0

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?

  • which type of format display in datepicker? – Rakesh Jesadiya Jun 8 '17 at 11:26
  • It is help for me hope it will help you magento.stackexchange.com/a/84879/43587 – Sagar Dobariya Jun 8 '17 at 11:59
  • @RakeshJesadiya : Currently the date picker uses the format " mm-dd-yyyy" – Zammuuz Jun 9 '17 at 3:09
  • @SagarDobariya : Did u really used that solution in your "html" file with Knockout JS ?? or in your phtml file ? Because I have to use the datepicker in html file with Knockout JS. – Zammuuz Jun 9 '17 at 3:11
2

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/

| improve this answer | |
  • It's not working. My Knockout Html file is form.html and its Js file is form.js. I have added the above code in form.js but nothing happened. – Zammuuz Jun 23 '17 at 3:06
  • @Anjana It depends where you have added your code.Can you please post your form.js so that I can review it.This is working code for me. – P_U Jun 23 '17 at 4:51
  • Hi @PareshaU, How can I set the initial value to null in the text input while the page loads. – Haritha Aug 2 '18 at 10:47
  • 1
    @Haritha you can just write this line like "dob: ko.observable()" instead of "dob: ko.observable(new Date())" – P_U Aug 2 '18 at 10:59
  • Is there a way that default opening of the date picker can be restricted on page load? @PareshaU – Haritha Aug 2 '18 at 12:05
0

The solution i used:

    ko.bindingHandlers['datepicker'] = {
    'init': function(element, valueAccessor, allBindingsAccessor) {
        /* Initialize datepicker with some optional options */
        var options = allBindingsAccessor().datePickeroptions || {},
            prop = valueAccessor(),
            $elem = $(element);

        prop($elem.val());

        $elem.datepicker(options);

        /* Handle the field changing */
        ko.utils.registerEventHandler(element, "change", function () {
            prop($elem.datepicker("getDate"));
        });

        /* Handle disposal (if KO removes by the template binding) */
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $elem.datepicker("destroy");
        });
    },
    'update': function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $elem = $(element),
            current = $elem.datepicker("getDate");

        if (value - current !== 0) {
            $elem.datepicker("setDate", value);
        }
    }
};
| improve this answer | |
0

The Solution I Used:

<input class="input-text" type="text" id="customer-dob" name="dob" value="" data-validate="{'required-entry':true}" data-bind="value: dob, datepicker: {storage: dob, options: { dateFormat: 'dd/mm/yyyy'}}"/>

Make Sure dob should be defined as observable.

Please let me know if it works for you.

Thanks

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.