JQueryUI DatePicker выделяется на следующий день - PullRequest
Новая
       27

JQueryUI DatePicker выделяется на следующий день

0 голосов
/ 17 мая 2019

По какой-то причине средство выбора даты jQueryUI выделяет следующий день, даже если все сообщения console.log обрабатываются в правильный день.

См. Это jsfiddle .

Отмой собственный код, который я должен выделить 29-08-2018, но 30-08-2018 - это подсветка.Сообщение всплывающей подсказки также добавляется к 30-му, но оно по-прежнему гласит 29-е.

datepicker with tooltip

Также, когда я смотрю на консоль, я вижу действиевыполнено 29-го:

enter image description here

$('.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,''];
    }
  });
})

Ответы [ 2 ]

3 голосов
/ 17 мая 2019

При использовании 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/>
0 голосов
/ 17 мая 2019

Я добавил фрагмент кода, который выделяет массив значений в этом месяце. '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'>
...