Dynamically exclude dates in a datepicker

Solved
Highlighted
Tourist
5 1 2

Hello,

I've added a delivery date field to the cart page in the Brooklyn theme using jQuery's datepicker, as described here:

 

https://help.shopify.com/en/themes/customization/cart/add-date-picker-for-delivery-dates

 

I know how to statically exclude specific days of the week, but I'd like to know if there's a way to specify the excluded dates via a section field/variable (a comma-separated text field, for example) in the theme customizer, so the client can add/remove dates easily without having to touch code.

If anyone has any insight into this, it's be much appreciated. 

 

0 Likes
Highlighted
Shopify Expert
115 22 45

This is an accepted solution.

So it looks like you just have to pass through a list of dates in a comma separated format based on the documentation:

 

var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];

 

This is the documentation to add new entries to the theme customization area: https://help.shopify.com/en/themes/development/theme-editor/settings-schema

 

Something like this will need to be added.

 

{
   "type": "text",
   "id": "calendar_excluded_dates",
   "default": "",
   "label": "Calendar Excluded Dates"
}

 

Then just change where the JS variable value is set

 

var unavailableDates = [{{ settings.calendar_excluded_dates}}];

 

They'll just need to follow this format when entering those values:

 

"9-5-2011","14-5-2011","15-5-2011"

 

 

You might need a small tweak to my code but this should be pretty close. 

0 Likes
Highlighted
Tourist
10 0 1

I am having an issue with the datepicker, hoping someone can help.   Eric? Anyone else?

 

Some of the dates I have listed as unavailable are showing up as options on my site and others are not.  2020/11/5 and 2020/11/4 show up.  2020/11/11 does not show up....

 

var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var unavailableDates = ["2020/11/5","2020/11/11","2020/11/4","2020/11/11","2020/11/20","2020/11/24","2020/11/25","2020/11/26","2020/11/27","2020/12/11","2020/12/12","2020/12/24","2020/12/25","2020/12/26","2020/12/27","2020/12/31","2021/1/1"]; // yyyy/MM/dd
var unavailableDays = ["Saturday","Monday","Friday","Sunday"];

function unavailable(date) {
ymd = date.getFullYear() + "/" + ("0"+(date.getMonth()+1)).slice(-2) + "/" + ("0"+date.getDate()).slice(-2);
day = new Date(ymd).getDay();
if ($.inArray(ymd, unavailableDates) < 0 && $.inArray(days[day], unavailableDays) < 0) {
return [true, "enabled", "Book Now"];
} else {
return [false,"disabled","Booked Out"];
}
}


$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +3,
maxDate: '+16',
beforeShowDay: unavailable
} );
});
});

0 Likes