Datepicker not working in Magento 2.4 frontend

Question

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.

Answer 1

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))

Answer 2

You need to add:

'jquery-ui-modules/datepicker'

in the define array of required js modules.