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.