CODEWITHSUNDEEP
javascriptjquerydatepickerjquery-ui-datepicker
Hugo Delsing
Hugo Delsing

Reputation: 14173

jQueryUI datepicker highlights next day

For some reason jQueryUI datepicker highlights the next day, even though all console.log messages are handled on the correct day.

See this jsfiddle.

From my own code I should highlight 29-08-2018, but 30-08-2018 is highlighter. The tooltip message is also added to the 30th, but it still says 29th.

datepicker with tooltip

Also when I look at the console, I see the action being performed on the 29th:

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

Upvotes: 0

Views: 167

Answers (2)

Rahat Hameed
Rahat Hameed

Reputation: 432

I have added the running code snippet which highlights the array of values in this month. '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'>

Upvotes: 0

Kashyap Merai
Kashyap Merai

Reputation: 862

When using date.toISOString().split('T')[0] it'll first convert to the date to UTC.

So if you are in a positive timezone and your time is early in the day, then it could go back a day.

Alternatively, if you're in a negative timezone and your time is late in the day, then it could add a day

Try below code:

$('.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/>

Upvotes: 3

Related Questions