CODEWITHSUNDEEP
jqueryjquery-ui
ferralucho
ferralucho

Reputation: 657

Hightlight jquery datepicker header selected day of the week

I would like to highlight the selected day (Su, Mo, Tu, We, Th, Fr, Sa) of the week in jquery datepicker header. Pay attention to the header in the next image (Tu is in bold text):

highlight day in datepicker header

The HTML of the days header section it' s like this:

enter image description here

What function or property of datepicker do I need to use to hightlight the selected day in the header ? Thank you.

Upvotes: 1

Views: 200

Answers (1)

Sandwell
Sandwell

Reputation: 1457

There is no option for this. You can use my sample as a workaround if you want :

  $('#js-date').datepicker().on('changeDate', function(ev) {
    var currentDate = new Date($('#js-date').val());
    $('.datepicker-days th.dow').removeClass('active')
    switch (currentDate.getDay()) {
      case 0:
        $('th.dow').eq(0).addClass('active');
        break;
      case 1:
        $('th.dow').eq(1).addClass('active');
        break;
      case 2:
        $('th.dow').eq(2).addClass('active');
        break;
      case 3:
        $('th.dow').eq(3).addClass('active');
        break;
      case 4:
        $('th.dow').eq(4).addClass('active');
        break;
      case 5:
        $('th.dow').eq(5).addClass('active');;
        break;
      case 6:
        $('th.dow').eq(6).addClass('active');
        break;
    }
  });

https://jsfiddle.net/Sandwell/8qacnzd9/40/

Upvotes: 1

Related Questions