Jquery UI Datepicker 高亮天数在 Mozilla Firefox 上不工作

Question

我在脚本中为高光日做了一些定制。它在 Chrome 浏览器中工作正常，但在 Firefox 中不工作。为数组中的特定日期添加了 class "hightlight"（见屏幕截图），但是 class 没有在 Firefox 上生成。这个问题有什么解决方案吗？

提前致谢！

var dates =['05-20-2017','05-21-2017','05-22-2017','05-23-2017','05-24-2017','05-25-2017','06-01-2017','06-02-2017','06-03-2017','06-04-2017','06-05-2017','06-06-2017','06-07-2017','06-08-2017','06-09-2017','06-10-2017'];

$('#datepicker44').datepicker({
    minDate: 0,dateFormat: 'yy-mm-dd',
    //defaultDate: new Date('03/10/2017'), // this line is for testing
    beforeShowDay: highlightDays
});
$('#datepicker44').focus(function() {
  this.blur();
});
function highlightDays(date) {
 for (var i = 0; i < dates.length; i++) {
 if (new Date(dates[i]).toString() == date.toString()) {
 return [true, 'highlight'];
 }
 }
 return [true, ''];
}

td.highlight > a {
 background: #E50104!important;
 color: #fff!important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
}

 <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>
  
  <p>Date:
  <input type="text" id="datepicker44">
</p>

Answer 1

这是工作代码：https://jsfiddle.net/bhumi/8yxmxnr7/2/

我已经改变了这个条件：

if (new Date(dateSplit[0] + " " + dateSplit[1] + ", " + dateSplit[2]).toString() == date.toString()) {

也拆分日期

var dateSplit = dates[i].split("-");

Answer 2

您错误地比较了两个字符串，而不是比较了两个日期。默认情况下，Javascript 在您使用 .toString() 时输出：

Tue May 30 2017 00:00:00 GMT+0300 (EEST)

我不知道为什么它在 Chrome 中有效，但关键是你不能依赖 date.toString() 来保持跨浏览器的一致性。

相反，您必须创建两个单独的日期对象并比较它们的 .valueOf()，这将是一个 JavaScript 时间戳整数。

if (Date.parse(dates[i]).valueOf() == date.valueOf()) {
   // do your thing...
}

为了上面的工作你需要传入字符串Date可以理解，比如YYYY-MM-DD。我并不完全熟悉 Date 对象正确解析的所有字符串格式以及它与用户 locale 的关系。

我个人使用moment.js。它有更好的 API，干净的文档，我发现它很容易使用和理解。在大型项目中，我不再等到我需要 moment.js 了。我只是从一开始就添加它。我很少需要在最后一次清除时将其删除，因为它没有被使用。

Answer 3

如果您使用过 console.log，您会注意到 firefox 日志记录 "Invalid Date"。

一些日期格式没有明确定义，浏览器的行为可能不同。重新编写代码以使用像 iso 这样的严格格式：2017-05-20

比较结果字符串也是如此。每个浏览器的输出可能不同，因此请比较各个 day/month/year 值。您可以使用 toDateString() 或 toLocaleDateString().

Jquery UI Datepicker 高亮天数在 Mozilla Firefox 上不工作

Jquery UI Datepicker highlight days not working on Mozilla Firefox

html

javascript

css

jquery

jquery-ui-datepicker