How to add delivery date option on checkout?

Scenario

You want to add a delivery date option on the checkout so that your customers can select a date for delivery.

Example

Steps

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 below-mentioned steps:

Creating Order Option form

1. Go to Site >  Forms section in StoreHippo Admin Panel.
2. Click on Add new to create the Order option form.
3. Provide the name of the form as 'order_option'.
4. In the order options form, create a field for delivery date.
5. Enter label as 'Select Delivery Date' and name as 'select_delivery_date'.
6. Select type as Widget.
   
7. Click on the field settings icon next to type to edit the field. In the Widget field, enter the name of the widget (say "calendar").
   
8. Click on Save to save the form.
   

   Adding Widget

9. Go to StoreHippo Design Theme.
10. Go to HTML section and click on Show all widgets.
11. Click on Add new widget.
    
12. Add new store widget, name it as "calendar" (mentioned above), add the below-mentioned code:
    
    
    for VueJs code (New themes):
    Template:
    

    <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">

    
    Controller:
    

    $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
    
    
    for angularJs code
    Template:
    

    <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
        }
    }
    

13. Click on Save to save the widget.