To add date picker in checkout section

The code to add a date picker to select the delivery date on the checkout section of the webstore. The date picker will contain active dates from the current date only. All other dates will be disabled

_.extend(OrderWizardModuleAddress.prototype, {
template: jj_checkoutupdate_checkoutupdate_tpl,
events: {
'change [data-action="save-value"]': "deliveryDate",
},
deliveryDate: function deliveryDate() {
try {
const dateInput = document.getElementById('selectedDate');
const selectedDate = dateInput.value;
_.extend(Wizard_View.prototype, {
getContext: _.wrap(Wizard_View.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
var cart = container.getComponent('Cart');
const inputDateString = selectedDate;
// Parse the input date string
const parts = inputDateString.split('-');
const year = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1; // Months are 0-indexed in JavaScript
const day = parseInt(parts[2], 10);
// Create a Date object
const date = new Date(year, month, day);
var data = {
fieldId: "custbody_req_del_date",
type: "date",
value: date
}
cart.setTransactionBodyField(data).then(function () {
console.log(data.fieldId + ' was set to ' + data.value);
}).fail(function (error) {
console.log("error", error);
});
return context;
})
});
} catch (error) {}
},
getContext: _.wrap(OrderWizardModuleAddress.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
// Get today's date
const today = new Date();
// Convert today's date to yyyy-mm-dd format
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
const minDate = `${yyyy}-${mm}-${dd}`;
// Set the minimum date for the input element
context.startDate = minDate;
if(context.manageValue=="shipaddress"){
context.deliveryDate=true;
}
else{
context.deliveryDate=false;
}
return context;
})
});

Leave a comment

Your email address will not be published. Required fields are marked *