You want to add a delivery time option on the checkout so that your customers can select a time for delivery.
To add a delivery time option at checkout, you can enable time 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 below-mentioned steps:
<select class="form-control" ng-model="optionData[option.name].value">
<option value="">Please Select</option>
<option ng-if="opt.value" ng-disabled="n >= opt.value.split('-')[0] && today_date==selected_date"
ng-repeat="opt in option.settings.options" value="{{opt.value}}">{{opt.name}}
</option>
<option ng-if="!opt.value" ng-repeat="opt in option.options" value="{{opt.value}}">{{opt.name}}
</option>
</select>
Controller:
function($scope,$rootScope){
$scope.today_date = new Date(parseInt(window.serverTimestamp));
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('-');
}
var d=new Date();
$scope.n = d.getHours();
console.log('===time=====',$scope.n);
$rootScope.getDateValue = function(opt){ if(!opt) return;
$scope.selected_date = formatDate(opt);
$scope.today_date = formatDate($scope.today_date);
if ($scope.today_date != $scope.selected_date) {
$scope.n = 0;
}
else $scope.n = d.getHours();
$scope.optionData[$scope.option.name].value = '';
console.log('==opt==',$scope.selected_date , $scope.today_date, $scope.n)
}
}