Jquery 日期选择器 + 自定义显示取决于所选的星期几（Shopify Liquid）

Question

我正在建立一个新的 shopify 网站并在购物车页面上实现一个日期选择器。我已成功完成此操作，并且日期值根据需要存储为订单属性。

我坚持的一点是，当用户在购物车中并选择一个日期时，我想检测一周中的哪一天并根据那一天触发不同的 HTML 块。目的是根据工作日的不同，我有不同的交货时间段，我想向客户显示该信息。

我是 javascript 和 Liquid 的新手，因此不确定如何获取 javascript 输出并在 Liquid 代码中使用它来影响显示的 HTML。

希望我的解释很清楚，并且您可以为此提供帮助。日期选择器的代码打印在下面。

  {{ '//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

使用 onSelect 回调并检查 dayName 并执行进一步的操作

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>