Cart Date Picker

Cart Date Picker

BByB
Visitor
2 0 0

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>

 

 

 

Replies 2 (2)

JayAdra
Shopify Partner
130 14 32

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
Visitor
2 0 0

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!