How i can use beforeShowDay for highlighting days in jQuery UI datepicker. I have the following date array
Array
(
[0] => 2011-07-07
[1] => 2011-07-08
[2] => 2011-07-09
[3] => 2011-07-10
[4] => 2011-07-11
[5] => 2011-07-12
[6] => 2011-07-13
)
I got a simple solution where only we have to give the dates which will be disabled and to show color for available dates.And it worked for me
<style>
.availabledate a {
background-color: #07ea69 !important;
background-image :none !important;
color: #ffffff !important;
}
</style>
And for script use this:
<script>
$(function() {
//This array containes all the disabled array
datesToBeDisabled = ["2019-03-25", "2019-03-28"];
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
minDate : 0,
todayHighlight: 1,
beforeShowDay: function (date) {
var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
if(dateStr){
return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
}else{
return [datesToBeDisabled.indexOf(dateStr) == -1,""];
}
},
});
});
</script>
Hope it may help someone.
What worked for me was to use the builtin jqueryui function formatDate(); When it comes to the css I had to tweak it a little and add extra classes to be able to highlight dates.
style.css
#datepicker .event-highlight .ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight
{
background-color: darkgreen !important;
color : white !important;
border: 1px solid darkgreen !important;
border-color: darkgreen !important;
}
jquery formatDate()
//different date formats accepted
"mm/dd/yy"
"yy-mm-dd"
"d M, y"
"d MM, y"
"DD, d MM, yy"
"'day' d 'of' MM 'in the year' yy"
//return today's date
$.datepicker.formatDate("yy-mm-dd", $('#datepicker').datepicker("getDate"));
//alternatively you can use this syntax
jQuery.datepicker.formatDate('yy-mm-dd', 'getDate');
highlight dates in datepicker
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
beforeShowDay : function (date){
json.events.forEach(function (jsondate,counter) {
//get jquery date
var jquerydate = $.datepicker.formatDate("yy-mm-dd", date);
//OR alternative syntax
var jquerydate = jQuery.datepicker.formatDate('yy-mm-dd', date);
//get date busy with events
var busyday = jsondate.date;
if (jquerydate === busyday) {
return [true, '.event-highlight', 'tooltip text'];
}else{
return [true, '', ''];
}
});
return [true];
},