11

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?

5
  • Which fork of bootstrap are you using? Can you add the plugin link?
    – Praveen
    May 12, 2014 at 8:31
  • You must create a circle in the top: 3px; left:3px; position:absolute; In every day May 12, 2014 at 8:39
  • @Praveen, I downloaded it to our repository. I don't have any clue what fork of bootstrap I am using.
    – Imat
    May 12, 2014 at 9:26
  • @EnriqueQuero, Yeah I know that. But how should I target the specific date I want?
    – Imat
    May 12, 2014 at 9:27
  • 1
    without knowing what datepicker library your using it is hard to tell.. It would even better if we have a jsfiddle to check it out
    – Praveen
    May 12, 2014 at 10:21

2 Answers 2

35

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; 
  }
4
  • 1
    Is it possible to do this with a date range? I.e. highlight 20-04-2015 to the 24-04-2015, so it would do 5 days in total.
    – haakym
    Apr 21, 2015 at 14:40
  • When I am using your code its working fine but the today's date is not active Feb 24, 2017 at 7:56
  • sorry for previous comment, When I am using your code its working fine but I want get only the event date on selection Feb 24, 2017 at 8:16
  • Fiddle does not seem to work, since this answer is old, and the specified days are of 23 may 2014 so you have to traverse in the history inside a calendar
    – FantomX1
    Aug 22, 2019 at 10:23
0

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";
           }
        }
     });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.