Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlight dates in jquery UI datepicker

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
)
like image 454
Nisanth Kumar Avatar asked Jul 28 '11 09:07

Nisanth Kumar


People also ask

How do I highlight specific dates in jQuery ui Datepicker?

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] .

How to display selected date in datepicker jQuery?

$(document). ready(function () { $("#datepicker"). datepicker({ onSelect: function (dateText, inst) { var date = $(this). val(); alert(date); } }); });

How do I display a specific date in datepicker?

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.


2 Answers

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:

  1. boolean - indicates if date can be selected
  2. string - name of the css class that will be aplied to the date
  3. string - an optional popup tooltip for this date

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>
like image 67
Nikita Ignatov Avatar answered Sep 19 '22 15:09

Nikita Ignatov


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];

        }
    });
});
like image 33
Nisanth Kumar Avatar answered Sep 20 '22 15:09

Nisanth Kumar