Magento2 KnockoutJS Datepicker – Datepicker Options in Knockout JS Binding Not Working

datepickerknockoutjsmagento2uicomponent

In my HTML frontend form, I have included a date picker using Knockout JS data binding. But the date picker options is not loading. I want my date format should be like "02-Dec-1991". I gave my HTML element like this:

<input class="input-text" type="text" id="customer-dob" name="dob" value="" data-validate="{'required-entry':true}" data-bind="value: dob,datepicker: dob,datePickeroptions: {
                    dateFormat: 'dd/M/yy',
                    changeMonth: true,
                    changeYear: true,
                    maxDate: new Date(),
                    datePickerPlaceholder: 'dd/M/yy' 
                    }"/>

Please suggest me how to make this work?

Best Answer

To make your code working you have to write below code in your ".js" file.

ko.bindingHandlers.datepicker = {
            init: function(element, valueAccessor, allBindingsAccessor) {
                var $el = $(element);

                //initialize datepicker with some optional options
                var options = allBindingsAccessor().datepickerOptions || {};
                $el.datepicker(options);

                //handle the field changing
                ko.utils.registerEventHandler(element, "change", function() {
                    var observable = valueAccessor();
                    observable($el.datepicker("getDate"));
                });

                //handle disposal (if KO removes by the template binding)
                ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                    $el.datepicker("destroy");
                });

            },
            update: function(element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor()),
                    $el = $(element),
                    current = $el.datepicker("getDate");

                if (value - current !== 0) {
                    $el.datepicker("setDate", value);   
                }
            }
        };

return Component.extend({
//....
dob: ko.observable(new Date())
//....
});

Reference from: http://jsfiddle.net/rniemeyer/NAgNV/

Related Topic