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
)
Have a look at the documentation.
beforeShowDay The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
This means that you need to create a function that will take a date and return an array of parameters where values are:
here is an example:
var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.
$('#whatever').datepicker({
beforeShowDay: function(date) {
// check if date is in your array of dates
if($.inArray(date, your_dates)) {
// if it is return the following.
return [true, 'css-class-to-highlight', 'tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});
and now you can add the style to highlight the date
<style>
.css-class-to-highlight{
background-color: #ff0;
}
</style>
I solved the issue using
var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() {
$( "#dateselector").datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
//return [false];
return [true, 'ui-state-active', ''];
}
}
return [true];
}
});
});
Found the most voted answer not working. Updated the code little bit to make it working. $.inArray() mostly search for indexOf(). Also we can't compare two dates directly for equality. Reference : Compare two dates with JavaScript
function inArrayDates(needle, haystack){
var found = 0;
for (var i=0, len=haystack.length;i<len;i++) {
if (haystack[i].getTime() == needle.getTime()) return i;
found++;
}
return -1;
}
And update the accepted function as
if(inArrayDates(date, markDates) != -1) {
return [true, 'selected-highlight', 'tooltip here'];
} else {
return [true, '', ''];
}
Dates in JS are instances of object Date, so you can't check properly if dates are equal using == or ===.
Simple solution:
var your_dates = [
new Date(2017, 4, 25),
new Date(2017, 4, 23)
];
$( "#some_selector" ).datepicker({
beforeShowDay: function(date) {
are_dates_equal = d => d.getTime() === date.getTime();
if(your_dates.some(are_dates_equal)) {
return [true, 'ui-state-active', ''];
}
return [true, '', ''];
}
})
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];
},
http://jqueryui.com/demos/datepicker/#event-beforeShowDay
You compare the date parameter in the beforeShowDay with the dates you have got in your array, and if there is a match you return an array as defined in the link above.
In the array you return from beforeShowDay, the second element is used to set the class name which will be used on the date, you can then use css to set styles for that class.
