I tried to add a custom datepicker with custom js in my Magento 2 checkout for delivery date, the custom js datepicker is showing and when i click the date it fills the value, but when i click next to go to the payment method i got an error This is a required field.
the html file:
<input id="shipping_date" class="input-text" type="text" data-bind="
event: {change: userChanges},
hasFocus: focused,
value: value,
datepicker: true,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
disabled: disabled
}" readonly="true"/>
<div class="clearfix">
<div id="cal1Container">
</div>
the js file:
define([
'jquery',
'ko',
'Magento_Ui/js/form/element/abstract'
], function ($, ko, Component) {
'use strict';
return Component.extend({
initialize: function () {
this._super();
var calendar = window.checkoutConfig.calendar;
var storeId = window.checkout.storeId;
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var $el = $(element);
// custom DatePicker
YAHOO.namespace("shipping.calendar");
YAHOO.shipping.calendar.init = function() {
var options = {
mindate: calendar.first_day,
maxdate: calendar.last_day,
locale_weekdays: "1char",
};
YAHOO.shipping.calendar.cal1 = new YAHOO.widget.CalendarGroup(
"cal1",
"cal1Container", options,
{PAGES:2}
);
var mySelectHandler = function(type,dateSelected,obj) {
var dates = dateSelected[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
var date = year + "-" + month + "-" + day;
document.getElementById('shipping_date').value = date;
};
YAHOO.shipping.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.shipping.calendar.cal1, true);
YAHOO.shipping.calendar.cal1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.shipping.calendar.init);
// end custom DatePicker
}
};
return this;
}
});
});