bootstrap-datepicker with knockoutjs 3

[Xab01]

I try to use bootstrap-datepicker with knockout:

self.birthDate = ko.observable("2014-01-10");

this is my HTML code:

<input class="form-control" data-bind="datepicker: $parent.birthDate, datepickerOptions: { format: 'yyyy-mm-dd', autoclose: 'true', weekStart: 1, todayHighlight:'true' }">

JS code

//Date

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datetimepickerOptions || {};
        $(element).datepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function(event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }                
        });
    },
    update: function(element, valueAccessor)   {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            widget.setValue();            
        }
    }
};

I have the error:

TypeError: date.getUTCDate is not a function
d: date.getUTCDate(),

( formatDate: function(date, format, language){
if (typeof format === 'string')
format = DPGlobal.parseFormat(format);
var val = {
d: date.getUTCDate(),
D: dates[language].daysShort[date.getUTCDay()],
DD: dates[language].days[date.getUTCDay()],
m: date.getUTCMonth() + 1,
M: dates[language].monthsShort[date.getUTCMonth()],
MM: dates[language].months[date.getUTCMonth()],
yy: date.getUTCFullYear().toString().substring(2),
yyyy: date.getUTCFullYear()
}; )

Do you have any idea?

Thanks in advance

Xavier

[olivierbuffon]

I'm working on the same implementation. I think you have this error because the script expect a Date object. So you should try with something like :

self.birthDate = ko.observable(new Date("2014-01-10"));

[e4rthdog]

You also have a mistake for options. In custom binding you use datetimepickerOptions and in your html you use datepickerOptions

[dyardyGIT]

self.birthDate = ko.observable(new Date("2014-01-10"));

is this suppose to set the initial value? (doesn't for me) hmm

[victorantos]

@dyardyGIT to set the initial value you'd have to modify the binding:

instead of if (widget) { widget.date = ko.utils.unwrapObservable(valueAccessor()); widget.setValue(); }

put if (widget) { $(element).datepicker("update", ko.utils.unwrapObservable(valueAccessor())); }

[johnna1314]

yes ,I am solved

[itlackey]

sorry to resurrect this one but i am having issue using knockout with this library. it works as long as the date is selected from the picker but getting strange behavior when entering the date into the textbox. anyone else having this issue?