javascript - jQueryUI 日期选择器突出显示第二天

Question

出于某种原因，jQueryUI 日期选择器会突出显示第二天，即使所有 console.log 消息都在正确的日期处理。

查看此jsfiddle .

根据我自己的代码，我应该突出显示 29-08-2018，但 30-08-2018 是突出显示的。工具提示消息也添加到第 30 号，但仍然显示为 29 号。

此外，当我查看控制台时，我看到 29 号正在执行的操作:

$('.datepicker').each(function() {
  var $el = $(this);
  var specialdays = $el.attr('data-specialdays');
  var specialdaysJson = null;
  if (specialdays) {
    specialdaysJson = JSON.parse(specialdays);
  }

  $el.datepicker({
    dateFormat: 'dd-mm-yy',
    firstDay: 1,
    beforeShowDay: function(date) {
      if (!specialdaysJson) {
        return [true,''];
      }

      var dpd = 'date_' + date.toISOString().split('T')[0];
      console.log(date, dpd);

      if (specialdaysJson.hasOwnProperty(dpd)) {
        console.log('change');
        specialdaysJson[dpd][2] = 'Set for ' + dpd;
        return specialdaysJson[dpd];
      }
      return [true,''];
    }
  });
})

Answer 1

当使用date.toISOString().split('T')[0]时，它会首先将日期转换为UTC。

因此，如果您位于正时区且时间较早，那么时间可能会倒退一天。

或者，如果您位于负时区并且您的时间晚了，那么它可能会增加一天

尝试下面的代码:

$('.datepicker').each(function() {
  var $el = $(this);
  var specialdays = $el.attr('data-specialdays');
  var specialdaysJson = null;
  if (specialdays) {
    specialdaysJson = JSON.parse(specialdays);
   
  }

  $el.datepicker({
    dateFormat: 'dd-mm-yy',
    firstDay: 1,
    beforeShowDay: function(date) {
      if (!specialdaysJson) {
        return [true,''];
      }

let newDate = new Date(date)
      var dpd = 'date_' +  new Date(newDate.getTime() - (newDate.getTimezoneOffset() * 60000 ))
                    .toISOString()
                    .split("T")[0];
      console.log(date,"DDDD",dpd)
     
      if (specialdaysJson.hasOwnProperty(dpd)) {
        specialdaysJson[dpd][2] = 'Set for ' + dpd;
        console.log(specialdaysJson[dpd], date)
        return specialdaysJson[dpd];
      }
      return [true,''];
    }
  });
})

#ui-datepicker-div { font-size: 12px; } 
.bg-highlight { background-color: #F00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' />


<input type="text" class="datepicker" data-specialdays='{"date_2019-05-17":[true,"bg-highlight","tooltipText"]}' name="date1"/> <br/>