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

Yeah I would like to add that two! I currently have a "local delivery" app but it is $10 a month...

Wonderful stuff Caroline!
You have saved me a ton of time figuring out how to implement some of the advanced features I needed on my Shopify site (MemorialHelpers.com).

Hello Caroline,

Is there a way to have the picker only display as a calendar and not a field you have to click on?

Thanks.

Great stuff as always, Caroline!

Is there any way to connect the date picker to the shipping method or to some kind of billable element? For example, if they want it on their doorstep tomorrow, it adds a $20 Rush Shipping charge to their order, etc. If they want it on a weekend, it adds a $15 Weekend Delivery Surcharge, etc.

I've been wracking my brain for how to achieve this and I haven't been able to come up with a solution.

Hello Caroline:
I installed this on my Shopify Website yesterday and it was working great. I tested it several times and when I clicked inside the box, the calendar popped up. Today, when I click in the box, no calendar pops up. I tested the feature on desktop and smartphone to no avail. I started from scratch and reinstalled the code just now and still no calendar will pop up. Do you have any fixes or suggestions? Thanks in advance for your help.

Hi Caroline, great feature! thanks so much!
How can add Saturday to the days I operate?
Please let me know, I'm a novice in this.
thanks!!
=)

Thank you Caroline, this has been very helpful. I would also like to know how I am able to add Saturday as a delivery day. Thank you, Ali

Hi Caroline,

This isn't working for me. I see the date field but a calendar does not appear when clicked on.

Thank you!

This works perfectly! Is there a way to add this snippet to certain products or collections only?

Thanks!

This is brilliant! Thank you Caroline.
I would like to make this a mandatory field. Is that possible?
Thanks!

@dfstx @Popcorny,

I experienced the same problems as you did, and couldn't get Caroline's code to work via jQuery for some weird reason (could be due to conflicts in the libraries etc.)

What worked for me was to use the original code from the source doc - i've pasted it here for convenience (and for anyone else who stumbles onto this thread and wants to save a few hours of brain wreckage):
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker" 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>
$( "#date" ).datepicker({
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
});
</script>

This should work exactly as Caroline's code above.

@jluisdsaenz @crudomarketing,

To add Saturdays to the calendar, remove this line in the code (which gets rid of Saturdays & Sundays):
beforeShowDay: jQuery.datepicker.noWeekends

If you want to add Saturday but remove Sunday, change the code to the following:
beforeShowDay: function(day) {
var day = day.getDay();
if ( day == 0 ) {
return [false, ""]
} else {
return [true, ""]
}
}

The code day == 0 basically means if it's a Sunday (getDay() logs Sunday as 0, Monday as 1 ... Saturday as 6), it'll be removed from the calendar.

Hope this helps.

@kristidove

To include this to certain products or collections, add this file as a snippet (e.g. datepicker.liquid), and include it only where you want to.
E.g.
{% if collection.title contains “coffee-cup” %}
{% include “datepicker.liquid” %}
{% endif %}

More on snippets here

@Melissaowlston

Caroline actually mentioned how to make this required (via a pop-up) in another thread on the Shopify forums. The code is as such:
<script>
$(function() {
$('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
if ($('#date').val() == '') {
alert("You must pick a delivery date");
return false;
}
else {
$(this).submit();
}
});
});
</script>

@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