Add a delivery date picker to your cart

This is a feature where your customer could add a delivery date while they’re buying something from your Shopify store. Without any delay, let’s get rolling

Editing your theme code to add this feature

Required files: section [cart-template.liquid]; assets[datepicker-jquery.js]

• In the Assets directory, Create a new file and add the following code:

$(document).ready( function() {
    $(function() {
      var noweekends = datepicker_noweekends, noweekends_val;
      var maxdate = "+"+datepicker_maxdate+"W";
      var mindate = datepicker_mindate;
      if (noweekends==true){
        noweekends_val = jQuery.datepicker.noWeekends;
      } else {
        noweekends_val = false;
      }
      $("#date").datepicker( {
        minDate: mindate,
        maxDate: maxdate,
        beforeShowDay: noweekends_val
      } );
    });
  });

• In the Section directory, find cart-template.liquid and locate the closing form tag </form>. Add the following code right above the </form> tag:

{% if section.settings.datepicker_enabled %}
      <div style="width:300px; clear:both;">
        <p>
          <label for="date">Pick a delivery date:</label>
          <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
          <span style="display:block" class="instructions"> {{section.settings.datepicker_note}}</span>
        </p>
      </div>
      {% endif %}

• In the same file add the following code right before the {% schema %}:

{% if section.settings.datepicker_enabled %}
  <script>
    window.datepicker_noweekends = {{section.settings.datepicker_noweekend}};
    window.datepicker_maxdate = {{section.settings.datepicker_maxdate}};
    window.datepicker_mindate = {{section.settings.datepicker_mindate}};
  </script>
  {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
  <script src="{{ 'datepicker-jquery.js' | asset_url }}" defer="defer"></script>
  {% endif %}

• In the same file locate the settings inside {% schema %}, locate the closing square brackets ] in the settings. Add the following code right before the closing square bracket ]:

,
{
      "type": "header",
      "content": "Date Picker"
    },
    {
      "type": "checkbox",
      "id": "datepicker_enabled",
      "label": "Enabled Delivery Date Picker?",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "datepicker_noweekend",
      "label": "No weekend?",
      "default": true
    },
    {
      "type": "number",
      "id": "datepicker_mindate",
      "label": "Min Date (Days)",
      "default": 4
    },
    {
      "type": "number",
      "id": "datepicker_maxdate",
      "label": "Max Date (Weeks)",
      "default": 8
    },
    {
      "type": "text",
      "id": "datepicker_note",
      "label": "Additional Text",
      "default": "We do not deliver during the weekend."
    }

• Congrats, You’ve completed the coding parts.
• Now it’s available on the cart page. You can modify through Themes>customization>cart page section settings.

Congrats, You’ve completed this feature.