Cart Attributes: datepicker https://docs.shopify.com/themes/customization/cart/add-date-picker-for-delivery-dates

delivery-date.liquid

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' | script_tag }}

<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"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
jQuery(function() {
  jQuery("#date").datepicker( { 
    minDate: +1, 
    maxDate: '+2M',
    beforeShowDay: jQuery.datepicker.noWeekends
  } );
});
</script>

{% comment %}
  To remove days of the week that aren't Saturday and Sunday, use this:
  http://stackoverflow.com/questions/2968414/disable-specific-days-of-the-week-on-jquery-ui-datepicker
{% endcomment %}

@deservist

A rather long-winded way of doing it might to:

1. Insert an add to cart code (e.g. Shopify.addItem) of 2 different products (Expedited Shipping & Regular Shipping) whenever the date gets selected (via the onSelect() function)

2. Depending on the date selected (refer to this thread to get the date selected), a different shipping surcharge product would be added to cart

3. Right at the start of (1), you might have to add a bit of code to remove any existing Expedited/Regular Shipping products that exist in the cart (might want to use a for loop e.g. {% for item in cart.items %} for this purpose), just in case your customer decides to switch dates leading to multiple shipping fees being stacked on without the original being removed first

Hope this helps

Hi I need help in changing the date format to Day-Month-year please!

@NatDT

Hi NatDT, see below for alternative date format:

<script>
jQuery(function() {
  jQuery("#pdate").datepicker( { 
    minDate: +1, 
    maxDate: '+2M',
    dateFormat: 'dd-mm-yy',
    beforeShowDay: jQuery.datepicker.noWeekends
  } );
});
</script>

Note that even though it only stated yy, it actually produces a 4 digit year eg: 2016

@yhchang

In regards to your comment on Oct 7 about the requirement pop up, where do we put the code? I tried including it in the original snippet for the calendar, then i tried placing it in the cart.liquid. Either place it didnt create the requirement to fill in the information. Can you help me figure this out?

I have the same questions as @BackdropCity. Where did you put the code to make it work?

Also, I would like to implement some sort of data validation to ensure that the delivery date entered will be valid. I know it could be an issue because I tried it by entering 1/09/1906 manually and nothing stopped me. I would like to make sure that noone enters a date less than today+1.

This is the full code that worked for me at the very bottom/end of the theme.js of Debut, to limit delivery options to Mondays and Fridays. Hope this helps. The days of the week being 0 = Sun, 1 = Mon, 2 = Tues, 3 = Wed, 4 = Thurs, 5 = Fri and 6 = Saturdays
$(document).ready( function() { $(function() { $("#date").datepicker({ minDate: +1, maxDate: '+2M', beforeShowDay: function(day){ var day = day.getDay(); return [(day != 0 && day != 2 && day != 3 && day != 4 && day != 6)]; } } ); }); });

The is actually working but if i have to add the date field in the forloop with already existing Fields it getting difficult.
The fields are used in product-form in shopify in dynamic.
Please if anybody have an idea about how to implement this in forloop or any reference , reply

Hi there, super useful info above. I see there is a way of adding certain products to the delivery date picker parameters. Is there a way of making certain products or collections have their own delivery date?

For example, I have a flower shop and deliver same day with a certain cut off time. All of this is now set up and the de;livery selector snippet is working correctly. However I will be adding products that will be pre-order only, and will only be available for delivery on specific dates, say Easter and Mother's Day. Would this be possible to do by adding some code?
Thanks in advance