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" );
}
}
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.
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;
}
});
});
Thanks for this help. Got a different question, would you know how to clear the date on the field box? Right now, the last date I entered automatically appears in the date field.
Thanks for this, its most helpful! Does your text box for the date picker allow text to be added? Mine does and I wondered if there was a way to stop this from happening, if anybody knows? As it allows you to type anything in the box (rather than selecting a date) which then allows the button to checkout to proceed.
Hi, I wondered if you could help. I used some info on this page to create the date picker, but I cannot disable the ability to add text/numbers into the calendar box. When the calendar box is clicked you can override the date selection by typing anything in the box at all. This could obviously get messy!
$(document).ready( function() { // Adds date picker to field $(function() { $(“#date”).datepicker( { dateFormat: “DD, MM d yy”, minDate: +2, maxDate: ‘+1M’, beforeShowDay: function(date) { var day = date.getDay(); return [(day != 0 && day != 1 && day != 5 && day != 6)]; },
} ); }); // Makes sure basket can not be checked out without a delivery date being selecting $(“[name=‘checkout’]”).click(function() { if ($(‘#date’).val() == “” || $(‘#date’).val() === undefined) { alert(“You must pick a delivery date”); return false; } else { //$(this).submit(); return true; } }); });
I followed these instructions, particularly regarding the Require function to ensure that customers select a pickup or delivery date before going to checkout.
However, some customers are still getting all the way to purchase without selecting a delivery date. How is this possible? When I test it myself on my own devices and browsers (on mobile and on the desktop in three different browsers) I am not allowed to get past checkout without first requiring checkout. Can anyone shed some light on this?
The code I added in addition to the original JQuery is as follows. It works flawlessly on my end, but I am still running into customers getting past it, and my client is having to call to find out delivery dates - which is less than ideal.
$("[name='checkout']").click(function() {
if ($('#date').val() == "" || $('#date').val() === undefined)
{
alert("You must select a delivery or pickup date");
return false;
} else {
//$(this).submit();
return true;
}
});
This is so unbelievably useful. Thanks you for taking the time to put this info down and explain it clearly. It works a charm and will save me $50USD a month not having to use a clunky temperamental app. I just have a quick question though if you wouldn’t mind…
On my shopify cart page www.rosaliebloom.com.au my delivery date picker boxes always appear right at the bottom of my page. Its not the end of the world but just looks a little funky IMO. Is there any way of adding some code in order to move this up above the “checkout now” button?
Hi! Thanks all for very helpful tips! I implemented the cut-off time like advised, but it is still not working. Does anybody have an idea what could be the issue? The live version is here: https://dodomarket.mu Thanks in advance!
Awesome job implementing these custom date pickers yourselves. For those asking about time pickers, and other custom options like cut-off times, prep time, making date/time required, blocking out certain days/dates etc., I’ve built an app to allow you to manage all of these settings if you’re interested in checking it out.
Not only does it make configuring all of these settings easy, but it was built to be as fasy and efficient as possible. It doesn’t rely on loading external libraries like jQuery or jQueryUI - it totals about 7kb total, so won’t affect your store’s loading speed at all.
Let me know if you had any questions about it, or needed any help getting set up. We’ve got free unlimited support, so feel free to message me or hit up our support with your requirements and we can help you configure it as needed.
You might be facing some technical error due to this code’s compliance in your store. You can eliminate this code with our application’s in-built feature. We have a cut-off time feature where you can set multiple cut-off times.
Apart from this, our app has a lots of other features that enable you to:
Define working on week day basis
Allow customers to choose date and time-slots for delivery
Define holidays and non working days
Add cut-off time
You can have a look at the features of our app on Shopify marketplace:
I was able to take the code and played with it inside chatGPT and was able to come up with code that included a cut off time but had to include weekend days (0 and 6) to the maths.
I don’t offer next day delivery but a 2 day service with a cut off of 11am. I was finding the date on a Thursday order after 11am should have offered Tuesday as the next available date but wasn’t including weekend days to the maths so was displaying Monday as an option.
I’ve also added an if statement if the total weight of the cart is less than 35kg not to show date picker as I will be able to send out with fedex which is a different service.
I removed the must pick a date code as I didn’t want to force customers into choosing a date if not applicable.
I haven’t gone live with this yet so not too sure how well it will be received but will update if any troubles.
I wanted to add this to the checkout as I have a plus account but it seems very difficult to add code using extra programmes to upload to a partner site as an app. Any help on how to do this would be appreciated.
{% if cart.total_weight > 35000 %}
{{ '//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css' | stylesheet_tag }}
We do not deliver weekends or bank holidays.
{% endif %}
