CODEWITHSUNDEEP
cssbootstrap-datepicker
toxicmog
toxicmog

Reputation: 83

Bootstrap Datepicker return colour for select dates

Ok,

so I'm using this calendar https://bootstrap-datepicker.readthedocs.io/en/latest/

I have an MVC controller which is already passing an array of dates and a known state for these dates, I can disable these fine. What I'm trying to attempt is that for a certain state, I change the colour of the number on the calendar.

An exmaple on the site has a a rather intersting return green, now I couldn't get it work when I experimented.

So I copied the entire example(which is the code snippet), and it all worked except for the return green, yet if you us the sandbox and enable the 'before show day' you can see this returning green.

Looking at the DOM in the Sandbox you can see the class change to 'green day' in my code it changes it to 'day green'.

My question is, has anyone actually got this working? If so, what colours can you change to? I've searched through the libary, but I'm coming up blank on how this actually works. 

  $('#sandbox-container div').datepicker({
    beforeShowDay: function(date){
                  if (date.getMonth() == (new Date()).getMonth())
                    switch (date.getDate()){
                      case 4:
                        return {
                          tooltip: 'Example tooltip',
                          classes: 'active'
                        };
                      case 8:
                        return false;
                      **case 12:
                        return "green";**
                  }
                }
});

Upvotes: 0

Views: 836

Answers (1)

toxicmog
toxicmog

Reputation: 83

Ok, so I actuallly worked this out while I was typing this.

add to the bootstrapper-datepicker css the below

.day.purple {
  color: purple;
}

The code names the day whatever you return, so you don't need to return a color, you could return 'sausage' and on the css return green, what's important is the name you return is the name of your css class

$('#sandbox-container div').datepicker({
    beforeShowDay: function(date){
                  if (date.getMonth() == (new Date()).getMonth())
                    switch (date.getDate()){
                      case 4:
                        return {
                          tooltip: 'Example tooltip',
                          classes: 'active'
                        };
                      case 8:
                        return false;
                      **case 12:
                        return "purple";**
                  }
                }
});

Upvotes: 1

Related Questions