在纯 JavaScript 日期选择器中禁用周末、所有假期和星期一

Question

在 Shopify 项目运行 Booster 主题中，我们根本没有使用 jQuery。所以我使用一个简单的插件在购物车页面中添加日期选择器。使用以下代码，我只能让日期选择器正常工作，但我不确定如何禁用周末、所有假期和星期一？

<!DOCTYPE html>
<html lang="en">
<head>
<title>Date Picker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dtsel.css" />
<script src="dtsel.js"></script>
</head>
<body>

  <input name="dateTimePicker" />

</body>
<script>
  instance = new dtsel.DTS('input[name="dateTimePicker"]');
  instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              showTime: true
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              showTime: true,
              showDate: false
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              dateFormat: "yyyy-mm-dd",
              timeFormat: "HH:MM:SS"
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              direction: 'BOTTOM'
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              defaultView: "MONTHS"
            });
            instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
              paddingX: 5,
              paddingY: 5
            });
</script>
</html>

插件站点和 github 存储库的链接如下。 https://www.cssscript.com/date-time-picker-dtsel/ https://github.com/crossxcell99/dtsel

能否请您帮助让上面的 JavaScript 代码与下面的 jQuery 代码完全一样？

<script>
  jQuery(document).ready( function() {
    jQuery(function() {
        var disabledDays = ["2021-12-23","2021-12-24","2021-12-30","2021-12-25", "2021-12-31", "2021-1-1"];
        var myDate = new Date();
        if (myDate.getDay() == 5) {
          // If today is Friday, disallow the Monday of the coming week (3 days later)
          myDate.setDate(myDate.getDate() + 3);
          disabledDays.push(jQuery.datepicker.formatDate('yy-m-d', myDate));
        }
        jQuery("#ship_date").datepicker({
          minDate: +2,
          maxDate: '+2M', 
          beforeShowDay: function(date) {
              var day = date.getDay();
              var string = jQuery.datepicker.formatDate('yy-m-d', date);
              var isDisabled = ($.inArray(string, disabledDays) != -1);

              //day != 0 and day != 6 disable weekends
              return [day != 0 && day != 6 && !isDisabled];              
          }
        });
    });
  });
</script>

Answer 1

你可以看看VanillaJS DatePicker。它具有您需要的所有选项，并且完全用 JavaScript 编写，没有外部依赖性。在下面的代码中，您可以看到您在问题中陈述的条件的最小示例。

daysOfWeekDisabled - 0 和 6 禁用周日和周六

datesDisabled - 禁用日期，如果今天是周五，则包括下周一

minDate - 可以选择的最短日期为 +2 天

maxDate - 可以选择的最大日期为 +60 天

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

const DISABLED_DATES = ['03/11/2022'];
const today = new Date();

if(today.getDay() === 5){
 DISABLED_DATES.push(addDays(today, 3)); 
}

const elem = document.querySelector('#foo');
const datepicker = new Datepicker(elem, {
  pickLevel: 0,
  daysOfWeekDisabled: [0,6],
  datesDisabled: DISABLED_DATES,
  minDate: addDays(today, 2),
  maxDate: addDays(today, 60)
});

<link href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker.min.js"></script>

<div id="foo"></div>

Add days code来自这里

我有意增加了 60 天而不是 2 个月。您将需要解决此问题以获得准确的 maxDate。

在纯 JavaScript 日期选择器中禁用周末、所有假期和星期一

Disable weekends, all holidays and Mondays in pure JavaScript date picker

javascript

jquery

datetime

shopify