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?

4
  • which type of format display in datepicker? Jun 8, 2017 at 11:26
  • It is help for me hope it will help you magento.stackexchange.com/a/84879/43587 Jun 8, 2017 at 11:59
  • @RakeshJesadiya : Currently the date picker uses the format " mm-dd-yyyy"
    – Zammuuz
    Jun 9, 2017 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, 2017 at 3:11

3 Answers 3

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/

9
  • 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, 2017 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, 2017 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, 2018 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, 2018 at 10:59
  • Is there a way that default opening of the date picker can be restricted on page load? @PareshaU
    – Haritha
    Aug 2, 2018 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);
        }
    }
};
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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