CODEWITHSUNDEEP
javascripttwitter-bootstrapdatepicker
Imat
Imat

Reputation: 520

Add class to a multiple/specific day in bootstrap datepicker?

I'm having a hard time in adding a class to a date in bootstrap. Here's the datepicker. enter image description here

enter image description here

What I'm trying to achieved is put a small blue dot in the date I specified. I'm thinking of adding a class to the date. How should I do this?

Upvotes: 11

Views: 22114

Answers (2)

Rasel Coder
Rasel Coder

Reputation: 1

Check beforeshowday:

 $('#calendar').datepicker({ 
        calendarWeeks: true, 
        multidate: true,
        todayHighlight: true,
        daysOfWeekDisabled: [0],
        beforeShowDay: function(date){
        if (date.getMonth() == (new Date()).getMonth())
           switch (date.getDate()){
           case 4:
              return {
                 tooltip: 'Example tooltip',
                 classes: 'bd'
              };
           case 8:
              return false;
           case 21:
              return "green";
           }
        }
     });

Upvotes: 0

haxtbh
haxtbh

Reputation: 3534

Depending on the datepicker you are using you can do something like this:

Most of the date pickers have a beforeShowDay option. You can set a class here to add to the day you want to change.

For this example im using http://eternicode.github.io/bootstrap-datepicker

An example of how to do this can be found here: jsFiddle

You will want to put the dates you want to highlight / mark into an array:

var active_dates = ["23/5/2014","21/5/2014"];

Then use the beforeShowDay option to check the dates against the current day being shown and then apply a class.

<input type="text" id="datepicker" />

$("#datepicker").datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
     todayHighlight: true,
     beforeShowDay: function(date){
         var d = date;
         var curr_date = d.getDate();
         var curr_month = d.getMonth() + 1; //Months are zero based
         var curr_year = d.getFullYear();
         var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

         if ($.inArray(formattedDate, active_dates) != -1){
           return {
              classes: 'activeClass'
           };
         }
      return;
  }

});`

The activeClass can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.

.activeClass{
    background: #F00; 
  }

Upvotes: 35

Related Questions