Cart Date Picker

[BByB]

Hello!

I followed the article on how to add a delivery date picker to my cart successfully. However, I'm trying to work out how to adapt the code so instead of weekends it is Mondays and Sundays that are unavailable to be picked. I'd also like to add some code to exclude certain dates (e.g. holidays).

The code from the article that I believe needs adapting is below for convenience...

I really am a novice at this stuff so I appreciate any help! I don't know where to begin 🙂

Thanks

Claire

P.S. I hope this was the correct location for this question. Apologies if there was a better location!

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>

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

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

[JayAdra]

Hi @BByB!

I'm not too familiar with the jQuery datepicker, but you might want to check their documentation for options: https://api.jqueryui.com/datepicker/

I don't see any options for blocking out specific dates though.

If you're interested in outsourcing this functionality and having more flexibility with available dates (including cut-off times, prep time, blockout dates etc.), you might want to consider an app like Bloom.

Let me know if you have any other questions.

[BByB]

Thanks for your reply. I have managed to switch it to exclude Sundays and Mondays as desired which is fantastic. However, if anyone knows how to exclude specific dates too - please let me know!

[Easify-Mark]

Hi @BByB,

It might be easier to add the date picker directly on the Product page rather than on the Cart page.

You can use the Easify Product Options app's Date Picker option type. This feature lets you set up the date picker with excluded days, like weekends or specific dates, so customers can only choose available dates when selecting a product.

[Daniel2help]

Hi @BByB - just jumping in as this came up for others too.

If you’re looking to let customers choose a delivery date in the cart (before checkout), you might want to try Flare. It adds a date picker to the cart page and lets you control things like:

• Blocking weekends, holidays, or certain zip codes

• Setting different lead times or rules per product

• Letting customers reschedule if needed

We use it for stores that needed more delivery logic than Shopify supports out of the box. Just thought I’d share in case it helps!