Question

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

请参阅此jsfiddle。

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

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

check_window = Toplevel()

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 datepicker第二天亮点

2 个答案: