Friday, May 6, 2011

jQuery - Datepicker - Disable Specific Dates

You can disable specific dates with the jQuery Datepicker using the beforeShowDay event.

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

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) < 0) {
    return [true
,"","Book Now"];
  } else {
    return [false
,"","Booked Out"];
  }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });

Note: iDate in the last line is the name of the HTML form input element.

To see a working example with some more features please see the jsFiddle example: HERE
Anonymous said...

Cool - that worked for me... Thanks!

Anonymous said...

its awsummmmmmmm wonderful thank you so much you solved my problem.

Anonymous said...

thank you :)

Anonymous said...

I works perfectly, thanks. Would you know how to load the dates of the array dynamically, from a database?

Craig Constable said...

First you would need to make an SJAX call to a PHP file that would have something like this:

$dates = array();
$sqldata = mysql_query("SELECT `date` FROM `date_table`);
while($date = mysql_fetch_assoc($sqldata)) {
$dates[] = $date;
}
echo json_encode($dates);

Then on the JavaScript side:

unavailableDates = new Array();
unavailableDates = eval("("+result+")");

result being the returned data from the SJAX call see:
http://tokenposts.blogspot.com/2011/05/javascript-ajax-sjax-submit-form-data.html

Anonymous said...

Nice one.. Was wondering how to and did not noticed this option in the documentation.. So thanks :)

Anonymous said...

thanks very useful

Mukesh B. Rane said...

hey thank you very much it's really nice

Jenny said...

Would you be able to show a jsfiddle so that all dates are disabled except for ones in the array?

Craig Constable said...

Hi Jenny,

Simply swap the IF ELSE statement.

http://jsfiddle.net/XxwSZ/

Il Martire said...

It is possible to get a working example for the people that doesn't know to integrate it in a webpage??? (the people...is me...) Tks....

Anonymous said...

just what I was looking for, thanks!

Anonymous said...

Its working.
But not working with dates
var unavailableDates = ["09-05-2011","14-05-2011","15-05-2011"];

Jim said...

Great post! :D

I have looked for something like this for a looong time! :D

Greg said...

Hi, thanks a lot for that, it's working perfect except one thing, when I use ajax to get the unavailability from the database, i get a javascript error:

ba is undefined
/js/libs/jquery-ui-1.8.18.custom.min.js
Line 47

if I remove the ajax statement and use the basic function I dont get the error. I compared the array return from the db to the one in the example and they look exactly the same. here is my js function:
$.post(
base_url+"booking/getDates", {house: house, room: room},
function(data){
unavailableDates = new Array();
unavailableDates = data;
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
console.log("unavailableDates: ", unavailableDates);
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
},"json"
);

Thank you in advance

Jorge Navas Alejo said...

Hello!

Amazing job dude. Just one question:

Is it possible to combine it with more clauses? In my cause, I'd like to disable specific dates AND weekends.

Thanks a lot!

Craig Constable said...

@Jorge
Please see more advanced example here http://jsfiddle.net/6SyfY/
I have allowed disabling any days you want, the example shows weekends.

Anonymous said...

Fantastic example. I was wondering how you would disable specific dates after the datepicker was initially configured with beforeshowdates?

Craig Constable said...

You can remove the date picker using:
$('#iDate').datepicker("destroy");

You can then update the unavailableDates array and re-add the datepicker using:
$('#iDate').datepicker({ beforeShowDay: unavailable });

Anonymous said...

Thanks Craig. After two days of searching around I'm thinking you're right about that. Was hoping that there was a way to update the element without destroying it.

Craig Constable said...

If you are simply changing the unavailableDates array you could just call: $('#iDate').datepicker("refresh");

Anonymous said...

It doesn't work.

Craig Constable said...

What issue are you having? You can see a working example in the jsFiddle link.

Anonymous said...

It's very usefull, thanx...

Anonymous said...

thnax for posting ...it solved mine problem too

Anonymous said...

but can tell me how to overwrite a class of "td" element ?

Anonymous said...

Hola, soy novato en esto y necesito las bondades de esta herramienta. Me podrían decir cómo inserto el código en mi sitio. Tengo instalado el datepicker 1.7.2.min.js y 1.8.22.custom.min.js, con el tema le-frog; al cual lo pasé al español y con el formato dd.mm.aa. La pregunta sería dónde tendría que insertar el código js y si le tengo que hacer alguna modificación respecto mi instalación y dónde tendría que insertar las nuevas líneas css. He intentado por horas varias cosas y no logro que funcione. Espero vuestra ayuda y gracias!!!!!!

Craig Constable said...

Hola,

Probablemente la mejor manera de insertar este código en la parte inferior de su página en una etiqueta SCRIPT. cambiar a dd.mm.yy es fácil basta con cambiar la línea:
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
a
dmy = date.getDate() + "." + (date.getMonth()+1) + "." + date.getFullYear();

si usted necesita un 0 a la izquierda se puede ver el ejemplo que hice aquí: http://jsfiddle.net/6SyfY/ se añade un 0 a la salida y lleva a los dos últimos dígitos.

Si quiere añadir css se puede ir ya sea en un archivo externo o en la propia página.

Espero que esto ayude!

Anonymous said...

Thank you for this helpful code.

cheers

Anonymous said...

Great option, helped a lot

Anonymous said...

Hi.
It's stop working when date format is [d-m-Y];
and only work for [j-n-Y];
see this link http://hostharbour.com/php_date.php
help me for [d-m-y] format.

Thanks

Anonymous said...

it's work well for "9-5-2011" but not work for "09-05-2011".
help me guys..

Craig Constable said...

Checkout the jsFiddle I linked in the post http://jsfiddle.net/6SyfY/

Anonymous said...

Perfect answer.
:) :)

-Frank

Tapwell Bathrooms said...

Perfect and simple for our needs.

Is there any way to use 'minDate: +x' but only include days that are available? e.g. If I set only weekdays to available, and I set minDate to 2, and the user views the calendar on a Friday, Monday will be unavailable.

Craig Constable said...

Hi Tapwell Bathrooms,

Can probably be simplified but here is a working sample: http://jsfiddle.net/6d48d/

Dan / Tapwell said...

Amazing, much appreciated!

stevo said...

For days whose date is less than ten you need the following instead:

function unavailable_b(date) {
var dmy = ("0" + date.getDate()).slice(-2) + "-" + ("0" + (date.getMonth()+1)).slice(-2) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}

Craig Constable said...

Hi Stevo,

Yes that is in the advanced example in the notes.
And no it is only needed when using dates with a preceding zero.

Unknown said...

Possible to block out the two weeks from the date of purchase? So if the order date is today, can the next two weeks be grated out?

Craig Constable said...

Hi Heather,
Yes. If you have the order date recorded in a database you can simply retrieve that and use it in a javascript function that creates an array of dates starting with that date until the array has a count of 14 dates.
PHP:
$result = mysql_query("SELECT max(`order_date`) FROM `orders`");
$order_date = mysql_result($result, 0);
echo "[script]order_date = '" . $order_date . "';[/script]

JavaScript:
order_date = new Date(order_date);
unavailableDates = new Array();
while (unavailableDates.length < 14) {
tempdate = new Date();
tempdate.setDate(order_date.getDate()+unavailableDates.length);
unavailableDates.push([tempdate.getDate(),tempdate.getMonth()+1,tempdate.getFullYear].join('-'));
}
Note: Not tested but should work or at least give you the idea of how to accomplish this task. Also script tags were changed from <> to []

Unknown said...

Thanks for your help Craig - a big beyond my capabilities I think...i need to hire a programmer!!

Unknown said...

Can anyone help with the coding for greying out 12 weeks from the date of the order? I've re-read this forum but still haven't been able to figure it out. so if someone orders today, I want to grey out the dates between today and 12 weeks from then. Thanks a mil.

Unknown said...

At the very least I need to make the field required. Thanks!

Craig Constable said...

Hi Heather, http://jsfiddle.net/Craigus/6SyfY/846/

Baby Giz said...

Wow!! Thank you!

Unknown said...

How to download javascript files from this jsfiddle...Please help me

Liz OXYwater said...

How do you turn off the following 7 days after today's date? from the delivery date picker?

Anonymous said...

Hi! In New Zealand we always put the date first, then the month, then year....
At the moment it's showing month -date- year... How can I change that?

Craig Constable said...

This is also using day-month-year so I'm not sure what you mean.

Marcie R. said...

Excellent! I've added this to my Shopify store with your terrific instructions but can't figure out where to add code in the snippet to remove Sundays and holidays. Can you please assist? Thank you!

Unknown said...

Hello,

I would like to know how to x unavailable dates out or highlight just the days that are available. I only deliver on weekends so I would love to know how to be able to make it easier to visualize that.

I love this, it was very helpful I was just wondering if the above can be done. Any help or information helps.

Thanks!

Craig Constable said...

Hi Andrea, Yes. Please look at the example http://jsfiddle.net/6SyfY/ you could enter Monday to Friday in the unavailable days.

Maxime D. said...

Hi Craig could you help with our website pleaseeee

Maxime D. said...

where can i send you the current code that I have

Maxime D. said...

i just don t understand how to add the code that you have to our code no matter how I put it it won t work?

Melissa said...

Hi,
I want to thank you for your support!
I'm trying to disable dates from a SQL Server table and trying to understand the example that you gave to Heather.
I have a system in Classic ASP, with a table with holidays and special dates on a SQL Server table (id and date), and want to disable this dates.
Could you help me please?

Craig Constable said...

Hi Melissa,
You need to retrieve the list of dates from your SQL Server table using ASP and then place that information into javascript.

I don't use ASP but you need to run something like this:

SELECT FORMAT(dateField,'D-M-YYYY') AS unavailableDates FROM holidaysTable;

You then need to get each of the dates into javascript so it looks like:

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

Anonymous said...

Hi there.
I'm a newbie at this so any help or direction would be amazing. I am using the following code in Shopify and would like to make some edits to the calendar. I would like to set Saturday as off- and be able to specify other days as off. I have tried to edit the code based on other responses above but seem to be having some issues. Here is the code that I am working with:


jQuery(function() {
jQuery("#date").datepicker({
minDate: +1,
maxDate: "+2M"
} );
});

Craig Constable said...

Did you check out the working example with more features mentioned in the post? You can use that and just remove Sunday from the unavailable days array.

Girl with Kaleidescope Eyes said...

Hi JQuery,

How do you apply this code into shopify? I'm having trouble applying this on shopify. Thank you

Unknown said...
This comment has been removed by the author.
Unknown said...

Hi Craig
I'm sorry, I'm in the same issue as the guy that posted on Sep 11, 2015 at 6am.
have this:
jQuery(function() {
jQuery("#date").datepicker({
minDate: +1,
maxDate: "+2M"
} );
});


I saw the example but it is not clear where do I have to insert and if I have to insert all of the above or what:
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var unavailableDates = ["2012/03/26","2012/03/27","2012/04/05"]; // yyyy/MM/dd
var unavailableDays = ["Saturday","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"];
}
}

$('#iDate').datepicker({ beforeShowDay: unavailable });


Sorry, very novice in this.
Would appreciate your help
Thanks mate!!

Craig Constable said...

Hi Jose,

Here is another example I have cleaned it up into a single function so you can add it easier. You will need to add the function in your script such as the place above your code of:
jQuery(function() {
jQuery("#date").datepicker({
minDate: +1,
maxDate: "+2M"
});
});

http://jsfiddle.net/pzmrg86L/

Unknown said...

Hi Craig, you are a super champ! Thank you so much!
Now, in Australia we use the date format dd/mm/yyyy, when I do the booking it shows the American format mm/dd/yyyy, how can I change it?
sorry to be a pain, customers might get confused...
please let me know
thank you very much!
Cheers mate!

Craig Constable said...

Hi Jose,

No Problem. Date format can be set easily by adding the option to the datepicker:

jQuery(function() {
jQuery("#date").datepicker({
minDate: +1,
maxDate: "+2M",
beforeShowDay: unavailable,
dateFormat: "dd/mm/yy"
});
});

Unknown said...

Hi Craig, thank you very much again! You are the best mate! Cheers!

Unknown said...

did this work for anyone? and how did you implement it?

Unknown said...

Hola, muchas gracias por las atenciones de antemano, su apoyo es muy importante, gracias, tengo entregas todos los días del año, solo que se necesita 2 días para su produccion, puedo hacer esta funcion?
ya esta en shopify y funciona bien,
quitar los dias festivos y como hacer que solo el cliente pueda seleccionar dos dias adelante?
gracias y saludos

Anonymous said...

hello craig,

I would like to disable the date picker back button to stop people picking a date in the past, do you have an idea to save me

Its for invites to stop people picking eg jan 2016 when they should have picked jan 2017, I get issue every december

thanks
amy

Craig Constable said...

Hi Amy,

You can add the hideIfNoPrevNext and minDate options as shown below.

$('#iDate').datepicker({ beforeShowDay: unavailable, hideIfNoPrevNext: true, minDate: new Date() });

hideIfNoPrevNext - will hide the Back and Next buttons if there are no available dates
minDate - will set the first date that is available (effectively making all past dates unavailable)

Anonymous said...

I see, Thank you !

Eileen said...

Hi there I followed the Shopify tute to add the date picker to my cart which worked :) However is set to exclude weekends. Could you please help with how to change to add weekends & exclude Mon & Tuesday & convert to AUS format dd/mm/yy. Copy & pasting from your tute was great, but I don't understand HTML :( Many Thanks!!!

Craig Constable said...

Hi Eileen, try this: http://jsfiddle.net/6SyfY/1359/

Eileen said...

Thank you for quick reply Craig - this is my screen currently -
$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
} );
});
});
What line do I apply this to?
var unavailableDays = ["Monday","Tuesday"]; // Enter days of the week you want to disable. If none, set to []

Thank you!

Craig Constable said...

Hi Eileen I see you have a different setup then what is mentioned. I am not familiar with Shopify and did not create any tutorial. saying that here is something that might work for you:

$(document).ready(function(){$(function(){$("#date").datepicker({minDate:1,maxDate:"+2M",dateFormat:"dd/mm/yy",beforeShowDay:function(b){return h=["10/02/2017","23/02/2017"],w=["Monday","Tuesday"],f=("0"+b.getDate()).slice(-2)+"/"+("0"+(b.getMonth()+1)).slice(-2)+"/"+b.getFullYear(),d=new Date(b.getFullYear()+"/"+("0"+(b.getMonth()+1)).slice(-2)+"/"+("0"+b.getDate()).slice(-2)).getDay(),$.inArray(f,h)<0&&$.inArray(["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][d],w)<0?[!0,"enabled","Book Now"]:[!1,"disabled","Booked Out"]}})})});

Just replace the code you had with this.

It is set to disable Mondays and Tuesdays (you can change this by changing the code where is says w=["Monday","Tuesday"])
It is also set to disable "10/02/2017" and "23/02/2017" as an example, if you don't want this you can change it the code from h=["10/02/2017","23/02/2017"] to h=[]
I setup the date format for you.

Eileen said...

Thank you so much Craig!! I really appreciate your help! Thanks again, Eileen

Unknown said...

Thanks, very helpful

Unknown said...


Hi all
On Craigs JQuery Shopify datepicker code for Eileen, I was wondering how I could allow the current day to be selectable but only within business hours.
Mon - Fri, 9am to 5pm
Sat 10am to 2pm
I don't need the user to select a time, just only show the current day as a selectable option if within those hours.
i.e. If it is Friday and it is after 9am and before 5pm they can select Friday
But if it is Friday and it is after 5pm, they can only select Saturday onwards

Thanks

Unknown said...
This comment has been removed by a blog administrator.
Unknown said...

Hi Craig,
This has been super helpful and a success from someone who is out of their depth. Is it possible to make this field required before the order can be submitted?

Ana said...

Hi Craig,

I need this picker to extend dates without limitations - for a whole year from the purchase, how to do that?
Thank you so much,
Ana

Craig Constable said...

Hi Ana,
http://jsfiddle.net/n8jdLks5/ you just need to pass in purchaseDate from your database or where ever you have this data and the rest automatic.

Anonymous said...

im using the following code but sunday still shows available:

var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var unavailableDates = ["2012/03/26","2012/03/27","2012/04/05"]; // yyyy/MM/dd
var unavailableDays = ["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: +2,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.unavailable
} );
});
});

Unknown said...

replace 'jQuery.datepicker.unavailable' with just 'unavailable' for the beforeShowDay

Rachel said...

Hi,

I did have variable dates working, and now for some reason it has stopped working.

I currently have weekends disabled, but I'd also like to disable all Mondays and varying dates.

Thank you

Rachel said...

I also tried your workthrough for Eileen above, but as soon as I seem to edit thecode, it disables the datepicker so it just becomes a text field :/

Rachel said...

Disregard! I've made it work! :) Thank you

Ben said...

Hi, continue from Eileen mentioned above, how can i capture the date customer selected and appeared in the order? please help, many thanks.

teresa said...

How can I make the date picker a required field for customers?

H.Hadi said...

Hi there---any advice would be appreciated.
I am trying add to additional condition.
when the time is in PM, disable the next day
else the next day will be available.

BJ said...

Hi, is it possible to add something to block double appointments? For example:

User A chooses January 18, 2018 and 9:00am and User B does the same thing. How can I let User B know that the time and date is unavailable so they can choose a different date / time?

Thanks!

BJ!

Unknown said...

@BJ you need to manage availability with some other system and then from that system you would pass the dates that are no longer available to the unavailableDates variable. So at first January 18th is available for User A, then the system would say there is no availability for January 18th so when User B loads the website the 18th will be blocked.

Unknown said...
This comment has been removed by the author.
Anonymous said...

Hi, I followed exactly the steps for Shopify '' Add a delivery date selector to your cart ''. The only problem I have encountered is that I do not have a '' Section '' cart-template.liquid. so I put it in '' Templetes '' cart.liquid.

Is that why the calendar is not in the right place. I would like it to be at the checkout towards the selection of the delivery. Thank you very much for helping me.

Sandy

Unknown said...

Hi, i'm using Shopify. I understand that your code is awesome and really helpful but i really don't know where i have to paste it or how to get it working on my website. Can you help me with that ?

Unknown said...

BM
Put this in your theme.js at the bottom of the file it lives in the assets container
$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +0, //change this as needed
maxDate: '+3D', //change to as needed
beforeShowDay: jQuery.datepicker.noWeekend,
dateFormat:"dd/mm/yy" //change to as needed yy/mm/dd
} );
});
});

no in your cart.template.liquid inside the form tags put this

input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}"

Annie said...
This comment has been removed by the author.
Annie said...

Hello, I may be asking repeated questions but I've followed your instructions but it doesn't seem to work. Any help would be greatly appreciated.

I'm on Shopify. The date picker codes are as below:

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
} );
});
});

I want to make all dates available, and change the date format to dd/mm/yy. How can I accomplish that please? Do I need to edit files other than on theme.js.liquid? Sorry if I sounded dumb.

Annie said...

I finally work it out, the codes become

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +0,
maxDate: '+2M',
dateFormat:"dd/mm/yy"
} );
});
});

Thank you for the guidance anyway, it's helpful :)

Anonymous said...

Hi I am following the workthrough for Eileen as I am using shopify and this is my code currently, as soon as I edit it and replace it with the workthrough, it becomes a text field. I would need your help. Thank you.

jQuery( document ).ready(function( $ ) {
$("#date").datepicker( {
minDate: +0,
maxDate: '+3M',
beforeShowDay: jQuery.datepicker.noWeekends
} );

Unknown said...

HOW TO MAKE XMAS 25/12, 26/12 AND NEW YEAR 01/01, 02/01 DATES UNAVAILABLE FOR NEW ZEALAND ON SHOPIFY?

Anonymous said...

Hi there!

Thanks for this great bit of info :)

I was hoping you could help me by telling me how to capture the customer's date selection in the orders?

Also, is there and option to move this date picker before the checkout option?

Thanks again

Beth

Unknown said...

Good Day! I was able to successfully add the "date picker" to the page but I'm not seeing the date the customers pick when I view the order. Where should I see the date they picked?

Thanks in advance.

Anonymous said...

The overley window not showing up! Does this still working?
It shows empty box and when I click on it, it let me write a text instead of showing the calender.
Thank you :)

Camellia said...

Hello! Is there a way to disable all Fridays in addition to "noWeekends" without entering the date of each individual Friday?

Dan said...

I am using the code below and for some reason I am unable to add the line for no weekends? If I add the following (beforeShowDay: jQuery.datepicker.noWeekends), my calendar just stops working? Does anyone know what I'm doing wrong? Thanks in advance

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +3,
maxDate: '+2M',
dateFormat:"dd/mm/yy"
} );
});
});

Unknown said...

Hello to everyone reading this,
Does anyone know if it would be possible to exclude based on the day and hour the order is placed?
I have to example :
- I would like to exclude delivery for dates 15 days ahead
- I would like to exclude delivery for tomorrow if the order is placed after 3pm
Thanks in advance for your help,
Best

Girl in need of help said...

Hi, I would like to know where do I paste this code? I dont really know much about codes. I would like to enable all dates and days for delivery. I would also like to add delivery timings. Would appreciate it alot if someone could help. : )

Unknown said...

Hi! I currently have a date picker that excludes particular days of the week. I would like to add a one-time single date (not an ongoing day) to the date picker. Can anyone assist with this? Here is how my code currently reads:
// Initialize theme's JS on docready
/* Adjusted by Tessa L | Shopify Theme Specialist on Apr 22 2020 */
$(theme.init);
$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: function(date) {
var day = date.getDay();
if (daysToExclude.indexOf(day) !== -1) {
return [false];
} else {
return [true];
}
}
} );
});
});

Anonymous said...

Hi everyone, just wondering where do i put code (disable specific date) in my existing date picker code? thank you.

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +0,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
} );
});
});

arthdr said...

HI there anyone knows how to transfer the calendar above the checkout button icon, so that buyer will not miss to pick the delivery date? I tried to work around but alignement is not good, in which once I view the cart page in mobile phone it wont show the calendar. Thanks in advance for the help.

Anonymous said...

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
} );
});
});

How Can I change this to remove Sundays only. Kindly help. I am little weak in Javascript

Unknown said...

Hey, This might be a really stupid question, but what section do I put this code within the shopify coding to make it work?

Unknown said...

You can use this tutorial to figure out which sections to alter:
https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates#edit-your-theme-liquid-template

Unknown said...

Hi there, thanks so much for this. I'm a coding noob and struggling to understand exactly where this code goes within the editor. Would you be able to explain please?

Unknown said...

P.S. I have used the shopify tutorial to get this far, but just can't work out where within the snippet code it goes.

Matthieu Molina 'Screech' said...

Hey guys
Any of you figure it out where to put that code to block days in the calendar in Shopify.
So far got the delivery calendar but can't block days.
Thanks in advance for your help guys

leilynn78 said...

I have been going around and around... Can anyone see what I got backwards?? I am trying to exclude dates from the calendar.

window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;

var unavailableDates = ["1-1-2021","6-1-2021","2-4-2021","4-4-2021","5-4-2021","1-5-2021","13-5-2021","23-5-2021","6-6-2021","26-6-2021","6-11-2021","24-12-2021","25-12-2021"];

function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}

$(function() {
$("#date").datepicker({
minDate: +1,
maxDate: '+12M',
dateFormat: "dd/mm/yy",
beforeShowDay: unavailable
});
});
}
}

leilynn78 said...

Got it!

window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;

$(function() {
$("#date").datepicker({
minDate: +1,
maxDate: '+24M',
dateFormat: "dd/mm/yy",
beforeShowDay: unavailable
});
});
}
}

var unavailableDates = ["1-1-2021","6-1-2021","2-4-2021","4-4-2021","5-4-2021","1-5-2021","13-5-2021","23-5-2021","6-6-2021","26-6-2021","6-11-2021","24-12-2021","25-12-2021","1-1-2022","6-1-2022","2-4-2022","4-4-2022","5-4-2022","1-5-2022","13-5-2022","23-5-2022","6-6-2022","26-6-2022","6-11-2022","24-12-2022","25-12-2022"];


function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}

Diana Mezzanotte said...

Is it possible to disable a date once the orders for a particular day reach a threshold? For example, once there are 5 orders placed for Friday delivery, Friday is disabled as a delivery option.

Unknown said...

Hey! Just wondering how to move the position of the date selector on my cart page? At the moment it's appearing way down in the bottom right, but I'd like it to be just above the checkout button so customers don't miss it. Also I have managed to allow only Mondays as that's when our deliveries are, but is it possible to set a cut off point? E.g. every Thursday at 5pm the following Monday's delivery becomes unavailable? Thanks!

Unknown said...

Hi there, all of this is super useful, and I've managed to integarate it into my cart page thanks to the above :). I am just wondering if it is possible to block out days for a certain product in my store? For example I offer same day delivery on everything, except some Easter and Mother's Day products which I will obviously only be deliverin on those dates. Is it possible to add a piece of code that will enable me to only have certain dates for certain products using a certain product tag?
Hope this makes Sense

Unknown said...

Hi

How would i input that delivery is available
Tuesday Thursday and Saturday.

Thanks

FreshVenture said...

Hi All,

I managed to get calendar on my cart page. Hope someone can help me:

1) I'm trying to block out dates for the next 2 months
2) Change delivery date text to say shipping date
3) Shipping only available on the next Monday
4) Remove time selector

Please help me thank you

Kara said...

Hi all, I managed to get the date picker to show up on my cart however how do I know it’s actually working and will show up on a customer order? Where will it appear on a Shopify order? Thanks

Chalini said...

where do I paste this?

dante said...

Hello, how do I apply a cut off time point? I am in Australia, Sydney and I need a time cut off point to select a date.

For example: A customer can pick the next day before 5pm AEST, after 5pm AEST customer can choose the following day.

Thanks

Anonymous said...

how can i block monday , tuesday and wednesday in the calendar. I need to deliver or pickup only thursady until sunday.
thanks,

Post a Comment