首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >限制日期选择器中的拾取日期

限制日期选择器中的拾取日期
EN

Stack Overflow用户
提问于 2021-05-08 14:36:52
回答 1查看 81关注 0票数 0

我正在建立一个使用Shopify的网上商店。我的生意是一家食品生产公司。我进入商业厨房的时间限制在每周一天(星期日),所以我打算在星期一到星期六收集订单,周日做饭,然后再取货。我已经有了很多需要加载到Shopify主题中的代码。首先,我在这个链接https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates上使用了自定义代码

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

我需要帮助自定义日期选择可用的日期,根据每周的一天,订单被下。

规则如下:

  • -星期一-星期六,最早可以在下周星期一和之后的任何一天收到,但不要更快;
  • -周日下个星期一(不是第二天)才能收到,但在那之后的任何一天都可以收到;
  • -在星期日完全不接货

例子:

周一5/10 -最早的拾件星期一5/17 5/17

  • Wednesday 5/11 -最早的拾取星期一5/17

  • Thursday 5/13 -最早的拾货星期一5/17

  • 星期五5/14 -最早的拾取星期一5/17

  • Saturday 5/15 -最早的拾取星期一5/17

  • 星期日5/16 -最早的拾取星期一5/24

<代码>H 124星期日不拾取<代码>H 225<代码>F 226

EN

回答 1

Stack Overflow用户

发布于 2021-05-11 16:27:13

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

代码语言:javascript
运行
复制
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), ""];
        }
      });
    });
  }
}
代码语言:javascript
运行
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67448702

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档