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

Answer 2

我添加了运行代码片段，突出显示了本月的值数组。 '1-5-2019','11-5-2019','18-5-2019','28-6-2019'.

// An array of highlighting dates ( 'dd-mm-yyyy' )
var highlight_dates = ['1-5-2019','11-5-2019','18-5-2019','28-6-2019'];
 
$(document).ready(function(){
 
 // Initialize datepicker
 $('#datepicker').datepicker({
  beforeShowDay: function(date){
   var month = date.getMonth()+1;
   var year = date.getFullYear();
   var day = date.getDate();
 
   // Change format of date
   var newdate = day+"-"+month+'-'+year;

   // Set tooltip text when mouse over date
   var tooltip_text = "New event on " + newdate;

   // Check date in Array
   if(jQuery.inArray(newdate, highlight_dates) != -1){
    return [true, "highlight", tooltip_text ];
   }
   return [true];
  }
 });
});

.highlight a{
  background-color: #29f274 !important;
  color: #ffffff !important;
}

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


<!-- Text box element -->
<input type='text' id='datepicker'>

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

jQueryUI datepicker highlights next day

javascript

jquery

datepicker

jquery-ui-datepicker