0

I am trying to add datepicker in Magento 2.4 frontend checkout page. But its giving following error -

knockout.js:3381 Uncaught TypeError: Unable to process binding "datepicker: function(){return { storage:value} }"
Message: $el.datepicker is not a function
    at init (delivery-date.js:20)
    at knockout.js:3358
    at Object.ignore (knockout.js:1470)
    at knockout.js:3357
    at Object.arrayForEach (knockout.js:159)
    at applyBindingsToNodeInternal (knockout.js:3343)

My code is - In .phtml file

<input class="input-text" type="text" autocomplete="off" data-bind="
    hasFocus: focused,
    datepicker: { storage: value },
    attr: {
        value: value,
        name: inputName,
        placeholder: placeholder,
        disabled: disabled         
    }" />

In .js file

define([
    'jquery',
    'uiRegistry',
    'Magento_Ui/js/form/element/date',
    'ko',
], function ($, registry, Date, ko) {
    var format = 'mm/dd/yy';
    ko.bindingHandlers.datepicker = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var $el = $(element);            
            var initOptions = {
                        minDate: 0,
                        dateFormat:format,
                        showTimepicker: false
                        
                    };
            //initialize datepicker with our own options
            $el.datepicker(initOptions);

            if(initOptions.dateFormat)
            {
                $el.datepicker( "setDate", initOptions.dateFormat );
            }

            var writable = valueAccessor();
            if (!ko.isObservable(writable)) {
                var propWriters = allBindingsAccessor()._ko_property_writers;
                if (propWriters && propWriters.datepicker) {
                    writable = propWriters.datepicker;
                } else {
                    return;
                }
            }
            writable($(element).datepicker("getDate"));

        },
        update: function(element, valueAccessor)   {
            var widget = $(element).data("DateTimePicker");
            //when the view model is updated, update the widget
            if (widget) {
                var date = ko.utils.unwrapObservable(valueAccessor());
                widget.date(date);
            }
        }
    };
    return Date;
});

Please help me to fix this issue.

2 Answers 2

0

Magento 2.4 already has datepicker, why you want to write your own? https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/datepicker.js

In case you want to practice coding, you can take a look at the source code of the original datepicker binding and also, check the error message in the console to debug your code (which in this case at init (delivery-date.js:20))

1
  • 1
    I want to customise my datepicker calendar. Jan 28, 2021 at 10:40
0

You need to add:

'jquery-ui-modules/datepicker'

in the define array of required js modules.

Your Answer

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

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