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

发布于 2025-01-13 11:53:24 字数 2802 浏览 0 评论 0原文

在运行 Booster 主题的 Shopify 项目中，我们根本不使用 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/< /a> 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>

原文

In a Shopify project running Booster theme, we're not using jQuery at all. So I'm using a simple plug-in to add the date-picker in the cart page. With the below code, I've only been able to just get the date-picker working, but I'm not sure how to disable weekends, all holidays and Mondays?

<!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>

Links to the plug-in site and github repository are below.
https://www.cssscript.com/date-time-picker-dtsel/
https://github.com/crossxcell99/dtsel

Could you please help get the JavaScript code above do exactly what the jQuery code below does?

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

楠木可依 2025-01-20 11:53:24

你可以看看 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/[email protected]/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker.min.js"></script>

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

添加天数代码来自此处。

我故意增加了 60 天而不是 2 个月。您需要修复此问题才能获得准确的 maxDate。

You can have a look at VanillaJS DatePicker. It has all your required options and is completely written in JavaScript with no external dependencies. In the below code, you can see a minimal example of conditions that you stated in your question.

daysOfWeekDisabled - 0 and 6 disables Sunday and Saturday

datesDisabled - Dates to disable including next Monday if it is Friday today

minDate - Minimum Date that can be picked is +2days

maxDate - Maximum Date that can be picked is +60days

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/[email protected]/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker.min.js"></script>

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

Add days code is from here.

I have intentionally added 60 days instead of 2 months. You will need to fix this to get accurate maxDate.

回复收藏 0 原文

~没有更多了~