Strange Issue when using datepair with bootstrap datepicker component

[Nevario]

Hello,

Thank-you for an absolutely brilliant library!

I'm having a strange issue when I try and use datepair with a bootstrap datepicker component. Clicking on the calendar icon vs the field seems to produce different results and the datepickers get out of sync.

https://jsfiddle.net/tdmohr/8ryh0h37/1/

Any help would be greatly appreciated.

Thanks, Tim

[jonthornton]

It seems like interacting with the icon doesn't produce a change event on the input, so Datepair doesn't know anything's changed. You'll need to bind to whatever event the datepicker fires when a date is selected, and fire a synthetic change event on the input.

[Nevario]

Hi Jon,

Thanks for getting back to me.

I am seeing change and changeDate events being generated when clicking on the icons. In fact in my testing the click events are indistinguishable between the icon or text field. This also lines up with my other testing in that datepair seems to trigger a change on both icon and text field clicks, its just the dates copied are completely wrong.

Can you please give me more detail on how you reached this conclusion?

Thanks, Tim

[jonthornton]

I reached that conclusion after 2 minutes of clicking around and making an assumption. You're right.

I haven't tested datepair with this version of Bootstrap Datepicker before. It might be a week or two before I can dig into this. Thanks for raising the issue.

[jonthornton]

I think I found the problem. In your example, datepicker is bound to a container <div>. By default, datepair attempts to parse the date by calling $(input).datepicker('getDate'). This is actually a different instance of datepicker, and datepickers seem to maintain their own state independent of the input they're attached to.

A custom parseDate setting seems to fix the problem. https://jsfiddle.net/rtos2m2m/

I won't be integrating this fix into the library because I don't want to introduce a dependency on moment.js.

[Nevario]

Hi Jon,

Thanks for that.

That seems to have improved the issue, but unfortunately there are still problems. The date highlighted in the calendar, is different between the icon and input field.

I've also noticed the date formatting changes between the icon and field as well, from 09/09/2016 to 9/9/2016.

I'm still really holding out hope that datepair is the holy grail I'm looking for to replace my cobbled together solution.

Please let me know if I can help debug this further.

Tim

[Nevario]

Also, please correct me if I'm wrong, but I believe that the syntax I'm using to generate the bootstrap datepicker is completely inline with the documentation at https://eternicode.github.io/bootstrap-datepicker/

[jonthornton]

Yup, your datepair code looks correct.

This seems related to the multiple datepickers issue. updateDate by default also tries to interact with a datepair attached directly to the input, and if one doesn't already exist it gets created silently (the boon and curse of jQuery IMHO). You end up with second datepicker attached to the input that overrides the one attached to the input-group container.

The fix seems to be custom updateDate and parseDate functions that know to bypass the input and look for an input-group container. It feels brittle to couple markup to javascript in this way but I couldn't come up with anything simpler.

https://jsfiddle.net/rtos2m2m/3/