datepicker beforeShowDay 数据格式问题答案

【问题标题】：datapicker beforeShowDay dataFormat problemdatepicker beforeShowDay 数据格式问题
【发布时间】：2021-02-20 20:24:12
【问题描述】：

当 dateFormat 在函数 beforeShowDay 中时，我遇到了问题。

我正在使用来自https://api.jqueryui.com/datepicker/ 的datapicker jQuery DataPicker。

我希望它检查日期并更改颜色。我设置了 dataPicker 数据格式，但不工作。 mm-dd-yy 什么时候可以工作，但我希望它在设置 yy-mm-dd 时可以工作。我该如何解决？这是我的脚本：

 <style>
.event a {
    background-color: lightgreen !important;
    color: #ffffff !important;
}

</style>
<script>

 $( function() {
    var eventDates = {};
    eventDates[ new Date( '2020-11-09' )] = new Date( '2020-11-09' ); //this not working
    eventDates[ new Date( '2020-11-10' )] = new Date( '2020-11-10' ); //this not working

    eventDates[ new Date( '11-09-2020' )] = new Date( '11/09/2020' ); //this working
     eventDates[ new Date( '11-10-2020' )] = new Date( '11/10/2020' ); //this working

    $( "#datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd',
        altField: "#alternate",
        altFormat: "yy-mm-dd",
      beforeShowDay: function( date ) {

            var highlight = eventDates[date];

            if( highlight) {
              
                 return [true, "event", 'Text'];
            } 
            else {
               
                 return [true, '', ''];
                }
            }
   
    });
  } );
  </script>

【问题讨论】：

2020-11-09 被解析为 UTC，11/09/2020 可能是本地 m/y/d。 11-09-2020 至少在 Safari 中被解析为无效日期，谁知道在其他实现中是什么。见Why does Date.parse give incorrect results?

标签： javascript jquery date jquery-ui datepicker

【解决方案1】：

尝试使用这种格式：yyyy-mm-dd

【讨论】：

【解决方案2】：

考虑以下示例。

$(function() {
  var eDates = [];
  var dF = 'yy-mm-dd';

  eDates.push('2020-11-09');
  eDates.push('2020-11-10');

  $("#datepicker").datepicker({
    dateFormat: dF,
    beforeShowDay: function(date) {
      var fDate = $.datepicker.formatDate(dF, date);
      var result = [
        true,
        "",
        ""
      ];
      if (eDates.indexOf(fDate) >= 0) {
        result[1] = "event";
        result[2] = "Event Text";
      }
      return result;
    }
  });
});

.ui-datepicker-calendar td.event a {
  background-color: lightgreen;
  color: #ffffff;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<input type="text" id="datepicker" />

您可以使用$.datepicker.formatDate( format, date, options ) 将date 对象格式化为字符串。这样可以更容易比较。

【讨论】：