JQuery UI Datepicker - add class to each date

Question

I'm trying to add class containing date to each cell in inline Datepicker. Here is my initialization code:

    var currentTime = new Date();
    var maxDate =  new Date(currentTime.getFullYear(), currentTime.getMonth() +1, 0);

    $( "#calendar_wrapper1" ).datepicker({ 
        inline: true,
        changeMonth: false,
        minDate: "0",
        maxDate: maxDate,
        beforeShowDay: function(date) {
           return [true, "d_" + date.getYear() + '_' + (date.getMonth() + 1) + '_' + date.getDay()];
        }
    });

This returns class d_115_12_3 for 30 dec. 2015, only month seems to be shown correctly or I don't understand which format is this.

Made jsfiddle of this: https://jsfiddle.net/NorthSea/8xg1w842/

Mosh Feu · Accepted Answer · 2015-12-30 09:36:59Z

You just need to replace

From:

return [true, "d_" + date.getYear() + '_' + (date.getMonth() + 1) + '_' + date.getDay()];

To:

return [true, "d_" + date.getFullYear() + '_' + (date.getMonth() + 1) + '_' + date.getDate()];

Read about it in .getFullYear() and .getDate()

var currentTime = new Date();
var maxDate =  new Date(currentTime.getFullYear(), currentTime.getMonth() +1, 0);
$( "#calendar_wrapper1" ).datepicker({ 
  inline: true,
  changeMonth: false,
  minDate: "0",
  maxDate: maxDate,
  beforeShowDay: function(date) {
    return [true, "d_" + date.getFullYear() + '_' + (date.getMonth() + 1) + '_' + date.getDate()];
  }
});


var currentTime = new Date();
// First Date Of the month 
var startDateFrom = new Date(currentTime.getFullYear(),currentTime.getMonth() +1,1);
// Last Date Of the Month 
var startDateTo = new Date(currentTime.getFullYear(),currentTime.getMonth() +2,0);
$("#calendar_wrapper2").datepicker({
  changeMonth: false,
  inline: true,
  minDate: startDateFrom,
  maxDate: startDateTo,
  beforeShowDay: function(date) {
    return [true, "d_" + date.getFullYear() + '_' + (date.getMonth() + 1) + '_' + date.getDate()];
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<h2>
  This month
</h2>
<div id="calendar_wrapper1">
</div>
<h2>
  Next month
</h2>
<div id="calendar_wrapper2"></div>

Collectives™ on Stack Overflow

JQuery UI Datepicker - add class to each date

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related