Inline date time issues with the time in multiple mode

[chrisbbreuer]

I'm submitting a ... (check one with "x")

[#] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.1.4
• Vue.js version : 2.5.9
• Browser name and version : Chrome 62
• This package version : 5.0.0

Current behavior

If you inline flatpickr and enable the time and multi multiple mode, you will realize that it is not as intuitive changing the time and it the first chosen time (earliest date) is the one that will be reactive always.

Expected behavior
the latest chosen date time should be reactive.

Minimal reproduction of the problem with instructions

https://jsfiddle.net/63kzdwLx/99/

I would truly appreciate any advice as how I can workaround this bug or any help on fixing it would be amazing!

Thanks so much for this great component.

[ankurk91]

@Chinese1904
Thanks for the detailed bug report.
I found that this is a bug in flatpickr itself.

Here is an example in plain js

<input type='text' id="flatpickr" />

var fp = flatpickr(document.querySelector('#flatpickr'), {
  altFormat: "F j, Y",
  altInput: true,
  inline: true,
  enableTime: true,
  mode: "multiple",
  onChange: function(selectedDates, dateStr, instance) {
    console.log('date: ', dateStr);
  }
});

You will notice that flatpickr is not updating time on all dates.

Here is jsfiddle -
http://jsfiddle.net/ankurk91/jmxcrknt/
http://jsfiddle.net/jmxcrknt/20/

[chrisbbreuer]

@ankurk91 now that I look at it more closely, it seems that the behavior is correct in what you display, but just not with the Vue component chmln reported back as well saying it doesn't appear to be a bug.

Any ideas?

[ankurk91]

The Vue component is updating v-model value same as returned from flatpickr and i want to keep the behaviour same.
I agree with chmln that you should hook into onChange method.

[chrisbbreuer]

Hi @ankurk91

I think I kindly have to disagree here. The behavior is different from Flatpickr to your Vue wrapper.

Flatpickr will change the last selected date's time if I change the time after I added dates. Which is the correct behavior.

Your Vue wrapper will change the date's time of the earliest selected date. Which is not very intuitive nor handy because if I change the time after I added dates already, I want to change the last selected date and ongoing selections.

[ankurk91]

I see, I will look into it.

[chrisbbreuer]

Thanks a lot @ankurk91
Appreciate all the work you've already put into it!

[ankurk91]

@Chinese1904
Update to version 5.0.2.
Feel free to reopen.

[chrisbbreuer]

amazing! Thanks for the fix @ankurk91 ! Appreciated a lot!