You want to add a delivery date option on the checkout so that your customers can select a date for delivery.
To add delivery date option on checkout, you can enable calendar option on the checkout. For providing calendar on the checkout page, you need to add calendar widget. To do so, you are required Order Option form and then add the calendar widget to your store. Follow the
<input
type="date"
:min="minDate"
class="form-control"
:class="{'is-invalid': form.errors[field.name]}"
v-model="data[field.name]"
:id="field.id"
:placeholder="field.settings.placeholder"
:disabled="field.settings.read_only"
autocomplete="off">
$scope.minDate = $ref('');
if (window.serverTimestamp) {
$scope.minDate.value = new Date(parseInt(window.serverTimestamp)).toISOString().split('T')[0];
}
Note: add 3 settings in custom widget - form, data and field if any widget called in forms<div class="form-group"><div ng-init="optionData[option.name].value = ''"></div>
<input type="text" ui-date="dateOptions" ng-model="optionData[option.name].value" ng-change="temp=optionData[option.name].value;getDateValue(temp);setMyDate(temp);" placeholder="{{'Select Delivery Date'|msTranslate}}" class="form-control" readonly>
</div>
Controller:
function ($scope) {
var formatDate = function (date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
$scope.setMyDate = function (date) {
$scope.optionData[$scope.option.name].value = formatDate(date);
}
$scope.dateOptions = {
changeYear: true,
yearRange: '-50:+01',
changeMonth: true,
minDate: 0
}
}