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
)
Define beforeShowDay within datepicker() method. In the function create a new date format according to the defined format (dd-mm-yyyy) in an Array. Check for the date in the Array with $. inArray() method if it is available then return [true, "highlight", tooltip_text]; otherwise return [true] .
$(document). ready(function () { $("#datepicker"). datepicker({ onSelect: function (dateText, inst) { var date = $(this). val(); alert(date); } }); });
You can use beforeShowDay function to enable only the dates returned from your back end system. This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.
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];
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With