VUE Datetime picker issue: "RangeError: Invalid time value"

Hello,

I’m integrating Framework7 form with my schema-based form generator
module (https://github.com/scramatte/eom-form#readme).

It works quite well except with Datetime picker. For date only works.
I’ve got following error: RangeError: Invalid time value

Note that I need to store into the data model date as string witg format used by MySQL such: yyyy-mm-dd hh:mm:ss

The following code works well with date only but fail with date+time. I’ve tried various thing using moment lib, including passing a static date+time nothing works.
Note that the error occurs into setValue method

If I use Date object , my page enter into infinite loop because of reactive property refresh and probably due to microseconds that differs each time app goes through setValue function.


Same issue here with React.

When I inspect calendar-class.js and make foour small edits it works fine:

line 1509:

  • if (value) timeString = calendar.timeSelectorFormatter.format(value);
  • if (value) timeString = calendar.timeSelectorFormatter.format(new Date(value));

line 300:

  • valueToAdd.setHours(calendar.value[0].getHours(), calendar.value[0].getMinutes());
  • var date = new Date(calendar.value[0]);
  • valueToAdd.setHours(date.getHours(), date.getMinutes());

line 784:

  • $el.find(’.calendar-time-selector a’).text(value && value.length ? calendar.timeSelectorFormatter.format(value[0]) : calendar.params.timePickerPlaceholder);
  • $el.find(’.calendar-time-selector a’).text(value && value.length ? calendar.timeSelectorFormatter.format(new Date(value[0])) : calendar.params.timePickerPlaceholder);

line 1682:

  • value = [calendar.value[0].getHours(), calendar.value[0].getMinutes()];
  • var date = new Date(calendar.value[0]);
  • value = [date.getHours(), date.getMinutes()];

As you mentionned working with date wihtout time as strings works fine but the moment when you add time it does not. The reason being that the time functions expect a Date object. The fixes I made above corrects for that.

A workaround for React is as follows:

Where calendar accepts value translate the value to a Date object
Where calendar property onCalendarChange translate from date back to string

This leads to the circular loop update issue you also seem to experience.

To break the loop in OnCalendarChange compare the value with the previous value (using useRef) and only emit if it is different.