Adding cutoff time to date picker

Solved
Highlighted
Tourist
10 1 0

Hi,

I have managed to add a delivery date picker in my cart template using instructions from here.

https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates

I would also like to include a cutoff time, so that any orders placed after 6pm will only be allowed to select the following day in the calendar.

I found this code but I can't seem to get it to work

beforeShow : function(){
        var dateTime = new Date();
        var hour = dateTime.getHours();
        //If Hour is greater or equals to 8PM
        if(hour  >= 20){
            //Disable all past days including tomorrow and today            $(this).datepicker( "option", "minDate", "+2" );
        }
    }

Can someone help me on how to place it?

My url is www.butterknifefolk.com

 

Thanks,

Jack

 

0 Likes
Highlighted
Tourist
10 1 0

This is an accepted solution.

Didn't get any replies, so I mucked around a bit and figured it out. Gonna leave it here for anyone who needs the solution.

beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
if(hour>=18){
$(this).datepicker( "option", "minDate", "+2" );
}
}

(where 18 is 6pm, change it to whatever time you want)

0 Likes
Highlighted
Tourist
4 1 0

Hi,

I was wondering if you could possibly help me.

I have gone through the instructions from the tutorial page (add a delivery date picker) and at the bottom it says about following the link for the blog to help with changing the date from noWeekends and adding your own unavailable date. I was wondering if you knew were abouts in the code i need to put the code and the code that you have kindly provide.

Any help would be fabulous about now I'm loosing the will. 

Thanks

0 Likes
Highlighted
Tourist
10 1 0

@BradleysPies 

 

This is the code I used for the theme.js, assuming you have done the other 2 steps in the tutorial. You can change some of the values to what works for you.

firstDay: 1, (Week starts on Monday)

minDate: +1, (The calendar only starts from tomorrow)

maxDate: '+7', (The calendar ends in 7 days)

dateFormat: 'DD d MM yy' ,

beforeShowDay: $.datepicker.noWeekends, (No weekends works in this line, I don't use it but if you need specific dates, this is where you change it)

The 2 variables below are for

- If order today before 6, the earliest date is tomorrow. If order today after 6, the earliest date if the following day

- Delivery date is required to checkout

I'm not a guru but I am quite obsessive about getting things to work.

Hit me up if you need more help, and I will try and figure something out!

 

 

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
firstDay: 1,
minDate: +1,
maxDate: '+7',
dateFormat: 'DD d MM yy' ,
beforeShowDay: $.datepicker.noWeekends,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
if(hour>=18){
$(this).datepicker( "option", "minDate", "+2" );
}
} } );
});
$("[name='checkout']").click(function() {
if ($('#date').val() == "" || $('#date').val() === undefined)
{
alert("You must pick a delivery date");
return false;
} else {
//$(this).submit();
return true;
}
});
});

0 Likes
Highlighted
Tourist
10 1 0

@BradleysPies 

I think my previous message got lost!

This is the code I've pasted at the bottom of my theme.js, assuming you have followed the other two steps in the tutorial.

Some customs you can make:

firstDay: 1, (my calendar starts on Monday)

minDate: +1, (calendar starts from tomorrow)

maxDate: '+7', (calendar ends in 7 days)

beforeShowDay: $.datepicker.noWeekends, (this works for disabling dates too, I don't use it but you can play around on this line)

 

The next 2 sets of codes

- any orders before 6pm, can pick tomorrow. Any orders after 6pm, can only pick from the day after

- delivery date is required to complete checkout

 

Hope this helps!

 

$(document).ready( function() {
$(function() {
$("#date").datepicker( {
firstDay: 1,
minDate: +1,
maxDate: '+7',
dateFormat: 'DD d MM yy' ,
beforeShowDay: $.datepicker.noWeekends,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
if(hour>=18){
$(this).datepicker( "option", "minDate", "+2" );
}
} } );
});
$("[name='checkout']").click(function() {
if ($('#date').val() == "" || $('#date').val() === undefined)
{
alert("You must pick a delivery date");
return false;
} else {
//$(this).submit();
return true;
}
});
});

0 Likes
Highlighted
Tourist
4 1 0

Thank you for replying! This is great.

0 Likes