在我当前的日期选择器代码中禁用特定日期的最快方法？

Posted 2023-05-08

【中文标题】在我当前的日期选择器代码中禁用特定日期的最快方法？

【英文标题】：Fastest way to disable a specific date in my current datepicker code?

【发布时间】：2021-04-03 20:34:27

【问题描述】：

这段代码主要是为了扩展插件的功能，因此它的编码略有不同。 限制日期被选中的最快方法是什么？即2021-02-25

<script type="text/javascript">
    jQuery(document).on('ready', function()
        jQuery(".checkout-date-picker").datepicker("destroy");
        jQuery(".checkout-date-picker").datepicker(
            minDate: 3,
            beforeShowDay: function(date) 
                return [(date.getDay() != 1)];
        
        ).attr('readonly','readonly');
    );
</script>

我已经尝试了下面的代码，但这显然是错误的，如果有人能指出正确的方向，我将不胜感激。

<script type="text/javascript">
    jQuery(document).on('ready', function()
        jQuery(".checkout-date-picker").datepicker("destroy");
        jQuery(".checkout-date-picker").datepicker(
            minDate: 3,
            beforeShowDay: function(date) 
                return [(date.getDay() != 1 && date != "2021-02-11")];
        
        ).attr('readonly','readonly');
    );
</script>

【参考方案1】：

<script type="text/javascript">
  var unavailableDates = ['11-2-2021', '25-2-2021'];

  function unavailable(date) 
    if(date.getDay() == 1)
      return [false, '', 'Unavailable'];
    
    dmy =
      date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) 
      return [true, ''];
     else 
      return [false, '', 'Unavailable'];
    
  

  jQuery(document).on('ready', function () 
    jQuery('.checkout-date-picker').datepicker('destroy');
    jQuery('.checkout-date-picker')
      .datepicker(
        minDate: 3,
        beforeShowDay: unavailable,
      )
      .attr('readonly', 'readonly');
  );
</script>

【讨论】：

使用此代码，我的日期选择器不再弹出选择，而且 - 我也试图阻止的星期一呢？感谢您的意见！

@user3448267 我已经编辑了周一的评论。请检查控制台并检查是否有任何错误。

【参考方案2】：

考虑以下示例。

jQuery(function($) 
  var noCheckOut = [
    "2021-02-11"
  ];
  var dtFormat = "yy-mm-dd";

  function exceptions(date) 
    var results = [true, "", ""];
    var ftDate = $.datepicker.formatDate(dtFormat, date);
    if (date.getDay() == 1 || noCheckOut.indexOf(ftDate) >= 0) 
      results = [false, "exception no-check-out"];
    
    return results;
  ;
  $(".checkout-date-picker").datepicker("destroy");
  $(".checkout-date-picker").datepicker(
    dateFormat: dtFormat,
    minDate: 3,
    beforeShowDay: exceptions
  ).attr('readonly', 'readonly');
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Check Out: <input type="text" class="checkout-date-picker"></p>

请看：

https://api.jqueryui.com/datepicker/#option-beforeShowDay https://api.jqueryui.com/datepicker/#option-dateFormat

$.datepicker.formatDate(格式、日期、选项)

将日期格式化为指定格式的字符串值。