Delivery date picker - Allow weekends

citruswa
New Member
3 0 0

Hi

 

We followed this tutorial https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates to add the delivery date picker but it blocks out weekend. 

 

How do we allow weekend dates to be picked?

 

Website is https://the-doorstep-grocer.myshopify.com/cart

0 Likes
Gavinator
Shopify Partner
1253 6 98

This bit of code:

 

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

Needs to be like this:

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

HTH, Gavin.

 

www.bookthatapp.com
0 Likes
citruswa
New Member
3 0 0

Thank you for your help. When I use this code, it takes away the calendar and just leaves a blank box that you write text into. 

0 Likes
Gavinator
Shopify Partner
1253 6 98

Sounds like there might be a Javascript error happening. Do you see anything in the console?

www.bookthatapp.com
0 Likes
HeatherParks
New Member
1 0 0

Hi, 

 

How do I add just saturday up until 2pm? and no deliveries on sunday? 

 

Many thanks

0 Likes
mattyz87
New Member
3 0 0

Hi there. 

I am looking for a little bit of assistance regarding this snippet, hoping you may be able to provide some insight.

I need to make it so that customers are required to fill out this form before proceeding to checkout.  Is there a simple piece of jquery that I can add to this to make it a required field?

 

We are getting customers skipping over it without seeing it and then my client is having to call them to find out the delivery date.

 

Thanks,

0 Likes
Gavinator
Shopify Partner
1253 6 98

Unfortunately this isn't as simple as it sounds. Ideally you would add a 'required' attribute to the input field and be done. However, if your theme, or 3rd party scripts (e.g. Apps) use Ajax then you'll need to add some Javascript code to do the validation.

1. Add required to the input field.

Before:

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

After:

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

See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required for more info about the required attribute.

2. Add some JS to validate a date is entered.

This is basically the same as adding a terms and conditions checkbox on the cart page, so I'll use the same code as that article :

 

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

  $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
    if ($('#date').val() != '') {
      $(this).submit();
    } else {
      alert('You must choose a date to check out.');
      return false;
    }
  });
});

 

This sample code only has very basic validation that checks a value has been entered, but doesn't validate the value is a date.

If this doesn't work check for errors in the developer console and refer to the article I linked to above as it covers off things like themes that no longer use jQuery (e.g. Debut).

HTH, Gavin.

www.bookthatapp.com
0 Likes