CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
Nisanth Kumar
Nisanth Kumar

Reputation: 5715

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
)

Upvotes: 19

Views: 44014

Answers (7)

Grogu
Grogu

Reputation: 2485

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

Upvotes: 0

S Debasish Nayak
S Debasish Nayak

Reputation: 263

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.

Upvotes: 1

Mark Mishyn
Mark Mishyn

Reputation: 4151

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, '', ''];
    }
})

Upvotes: 1

Karan Sharma
Karan Sharma

Reputation: 125

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, '', ''];
          }

Upvotes: 3

Nikita Ignatov
Nikita Ignatov

Reputation: 7163

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>

Upvotes: 34

Nisanth Kumar
Nisanth Kumar

Reputation: 5715

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

        }
    });
});

Upvotes: 21

manubkk
manubkk

Reputation: 1488

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.

Upvotes: 0

Related Questions