datepicker - Jquery date picker + custom display dependent on day of week selected (Shopify Liquid)

Question

I am setting up a new shopify site and am implementing a date picker on the cart page. I have completed this successfully and the date value gets stored as an order attribute as desired.

The bit that I am stuck on is that when the user is in the cart and selects a date, I want to detect the day of the week and trigger a different HTML block dependent on that day. The purpose is that I have different delivery timeslots depending on the week day, and I want to display that information to the customer.

I am new to javascript and liquid and so am not sure how to get the javascript output and use it in the liquid code to influence the HTML that gets displayed.

Hoping that my explanation is clear and that you can assist on this. Code of the datepicker printed out below.

  {{ '//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 class="datepicker-calendar">
    <p>
      <label for="date">Pick a delivery date:</label>
      <input required class="required" id="date" type="text" name="attributes[Delivery Date]" value="{{ cart.attributes.delivery_date }}" data-error="Please tell us your info." >
      <span style="display:block" class="instructions"> .</span>
    </p>
  </div>

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

        $(function() {
          $("#date").datepicker({
            minDate: 0, 
            maxDate: '+2M',
            firstDay: 1,
            dateFormat: 'DD, MM d yy',
            dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
            beforeShowDay: function(date) {
                var day = date.getDay();
                var array = ["01-01-2021","12-02-2021","13-02-2021","02-04-2021","01-05-2021","13-05-2021","26-05-2021","20-07-2021","09-08-2021","04-11-2021","25-12-2021"];
                var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                return [(day != 0) && array.indexOf(string) == -1];
            }
              
          });
        });
        
        
        $.datepicker.setDefaults({
        showOn: "both",
         buttonImageOnly: true,
        buttonImage: "calendar.gif",
        buttonText: "Calendar"
        });
        
      }
    }
  </script>

Answer 1

USe the onSelect callback and check for dayName and perform further actions

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

        $(function() {
          $("#date").datepicker({
            minDate: 0, 
            maxDate: '+2M',
            firstDay: 1,
            dateFormat: 'DD, MM d yy',
            dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
            beforeShowDay: function(date) {
                var day = date.getDay();
                var array = ["01-01-2021","12-02-2021","13-02-2021","02-04-2021","01-05-2021","13-05-2021","26-05-2021","20-07-2021","09-08-2021","04-11-2021","25-12-2021"];
                var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                return [(day != 0) && array.indexOf(string) == -1];
            },
            onSelect:function(selectedDate){
              let day = new Date(selectedDate).getDay();
              switch(day) {
                case 0:
                  console.log('sunday');
                  break;
                case 1:
                  console.log('monday');
                  break;
                case 2:
                  console.log('tuesday');
                  break;
                case 3:
                  console.log('wednesday');
                  break;
                case 4:
                  console.log('thrusday');
                  break;
                case 5:
                  console.log('friday');
                  break;
                default:
                 console.log('saturday');
              }        
            }              
          });
        });       
        
        $.datepicker.setDefaults({
          showOn: "both",
          buttonImageOnly: true,
          buttonImage: "calendar.gif",
          buttonText: "Calendar"
        });
        
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

  <div class="datepicker-calendar">
    <p>
      <label for="date">Pick a delivery date:</label>
      <input required class="required" id="date" type="text" name="attributes[Delivery Date]" value="" data-error="Please tell us your info." >
      <span style="display:block" class="instructions"> .</span>
    </p>
  </div>