在日期选择器中限制取件日期答案

【问题标题】：Limit Pickup Dates in Date Picker在日期选择器中限制取件日期
【发布时间】：2021-05-08 14:36:52
【问题描述】：

我正在使用 Shopify 建立一个在线商店。我的业务是食品生产业务。我只能每周（周日）使用一次商业厨房，所以我打算周一至周六收集订单，周日做饭，之后可以取货。我已经有很多我需要加载到我的 Shopify 主题中的代码。首先，我在此链接https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates使用了自定义代码

但是我需要进一步定制...

我需要根据下订单的星期几自定义日期选择器可用日期的帮助。

以下规则：

周一至周六下的订单最早可以在下周一和之后的任何一天取货，但不能更早；
周日下的订单要到下周一（不是第二天）才能取货，但之后的任何一天都可以取货；
周日根本不接货

示例：

5 月 10 日星期一 - 最早取件时间 5 月 17 日星期一
2011 年 5 月星期二 - 2017 年 5 月星期一最早取件
周三 5 月 12 日 - 最早取件时间为 5 月 17 日周一
星期四 5 月 13 日 - 最早取货时间星期一 5 月 17 日
5 月 14 日星期五 - 最早取件时间 5 月 17 日星期一
5 月 15 日星期六 - 2017 年 5 月星期一最早取件
5 月 16 日星期日 - 最早取件时间 5 月 24 日星期一
周日不取货

【问题讨论】：

标签： shopify liquid

【解决方案1】：

您可以尝试使用 datepicker 的 beforeShowDay 函数来限制可用天数，如下所示：

window.onload = function() {
  if (window.jQuery) {
    let $ = window.jQuery;
    let today = new Date();
    let next_week = today.getTime() + 7 * 24 * 60 * 60 * 1000;

    $(function() {
      $("#date").datepicker({
        beforeShowDay: function(date) {
            var day_of_week = date.getDay();
         
            //disable all dates in the past, disable all days of the week after today's day of the week but within 7 days
            if (date.getTime() <= today.getTime() || (day_of_week > today.getDay() && date.getTime() < next_week)) {
                return [false, ""];
            }
            
            //disable all sundays
            return [(day_of_week != 0), ""];
        }
      });
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all">
<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 on Sundays.</span>
    </p>
</div>

【讨论】：