Allow Moment.js Dates In Bootstrap-ui Datepicker

I'm trying to use Bootstrap UI's DatePicker with Moment.js dates. It is possible if I convert my model value from Moment.js date to standard Date prior to assigning it to a scope:

Solution 1:

Decorating the original datepickerPopup and datepicker directives it's possible to achieve this conversion.

In this plunker I've changed the following methods:

• ngModel.$render on datepickerPopup;
• parseDate on datepickerPopup;
• minDate and maxDate$watches on datepicker;
• this.render on datepicker;
• this.refreshView on datepicker;
• this.createDateObject on datepicker;
• $scope.select on datepicker;

with moment.utc() and I'm pretty satisfied with the results. Let me know if it works for you.

Solution 2:

I haven't tested this but you might be able to do this.

Create a customer filter that that returns the normal date...something like the below

angular.module('phonecatFilters', []).filter('momentToDate', function() {
    returnfunction(momentDate) {
        if (moment.isMoment(momentDate)) {
            return momentDate.toDate();
        }else { return momentDate }
    };
});

Then where you declare you directive ng-model="yourmomentdate | momentToDate"