How to use uib-datepicker with a popup datepicker?

[lvarayut]

After updating to the 1.0.8, the following code doesn't work anymore:

<input type="text" name="date" class="form-control" placeholder="Departure date" data-ng-model="vmBooking.activeDate"  data-datepicker-popup="dd/MM/yyyy" data-is-open="vm.isFromDateOpen" data-close-on-date-selection="false" data-multi-select="vmBooking.booking.selectedDates" disabled>
<span class="input-group-btn">
    <a type="button" class="btn btn-default" data-ng-click="$event.stopPropagation(); vm.isFromDateOpen = true "> <i class="icon-calendar"></i> </a>
</span>

I have tried to replace the data-multi-select with uib-datepicker, however, it's still doesn't work. Any help would be appreciated.

Please take a look at this Plunkr which describes my situation.

[spongessuck]

You should switch to the directive uib-datepicker-popup (or in your case data-uib-datepicker-popup) only if you're using UI Bootstrap 14.x.

In any case, it looks like this v1.0.8 doesn't work for datepicker popup. v1.0.8 added support for multiple datepickers, and v1.0.7 added support for UI Bootstrap 14.x. If you don't need multiple datepickers on your page at once, I would revert to v1.0.7.

[brenovieira]

@lvarayut, if you add a plunker showing a working example with previous version and not-working with lastest version, I can see how to fix it later...

[lvarayut]

@brenovieira Sure, I just updated the question and put a Plunkr example.

[cklemming]

Checking in on this issue. Any timeline for resolving this? :)

[spongessuck]

@cklemming This bug isn't affecting what I'm doing, so it's not a priority for me to fix.

I'll certainly review/merge a PR that attempts to solve the issue.

[ryanquincypaul]

Long message, in short I fixed it but ran into other issues so I provided versions of file with and without the other fixes I had to make. There is also a plunker of the popup with multi select in action. I also forked your project and am ready to make a pull request if you want here.

Thank you so much @spongessuck for creating this! Saved me a lot of time even with having to fix it up for the popup directive. I had need for the multi select functionality on the popup directive. I was able to get it to work by adding a new delegate and decorating the uibDatepickerPopupDirective. Besides the index of the ctrls for the ngModelCtrl (it's 0 for popup instead of 1), it's basically a copy of the delegate for the datepicker. Here is a Gist of it cleanly merged into the latest version of your file.

Unfortunately, the latest change you added using Date.parse on the date.toISOString() breaks the controls for me. It could be the browser (chrome) or maybe it's my timezone (EDT), but the date prior to the selected date gets stored in the selectedDates array which is no bueno. I have also created a Gist that replaces Date.parse (which according to the internet, isn't a safe way to parse dates in JavaScript anyway) with another function and then calling getTime() on that date. I believe this is what you used to do prior to your fix for UTC.

I can submit a pull request for one or both of the Gists if you would like. I didn't see any issues regarding the UTC fix you created so maybe it's just me. Just let me know how/if you want to proceed with my fixes. For @lvarayut and @cklemming , Here is a plunker of the popup directive and the Date.parse replacement in action. Just copy the code in the gm.datepickerMultiSelect.popup.js or gm.datepickerMultiSelect.popup.nodate.parse.js if you run into the same day before selected date getting stored in selectedDates issue.

[spongessuck]

@ryanquincypaul The stackoverflow post you cited is quite old. All modern browsers support Date.parse properly, and I don't want to replace what I have (which, as far as I know, works perfectly fine for most people) with something else that might break existing apps using this module. I suspect whatever your issue is has to do with timezones. Remember that dates need to go into the array as time values, so timezone shouldn't matter as it should all be based on UTC.

In any case, I'm glad you found the issue that prevented it from working in popups, but seeing as how the code is almost identical, I'd like to the decision to use 0 or 1 as the beginning index be determined by a parameter to a function that returns the delegate function. If you can make this change and remove the Date.parse replacement, I'd appreciate a pull request to fix this bug.