How to highlight current week in air date picker calendar

Question

http://t1m0n.name/air-datepicker/docs/

I am using air date picker calendar. How can i highlight the current week in the calendar. See my fiddle location.

http://jsfiddle.net/oua394nt/

<input type="text"
    data-range="true"
    data-multiple-dates-separator=" - "
    data-language="en" id="my-element"
    class="datepicker-here"/>

Answer 1

Since AFAICS Air Datepicker does not adds week number into the cells data-, you could use a script to get the week number (edited from this SO answer):

jsFiddle demo

• Get and store the current week number.
• Use the Air Datepicker onRenderCell() method and add a class to the cells whose date's week number equals the current week number:

CSS:

.-current-week- {
  background: red;
}

JS:

function getWeek(d) {
  // https://stackoverflow.com/a/6117889/383904
  d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
  var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
  var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
  return {year:d.getUTCFullYear(), number: weekNo};
}

var currentWeekNumber = getWeek(new Date()).number;

$('#my-element').datepicker({
  onRenderCell: function(date, cellType) {
    if (cellType === 'day' && getWeek(date).number === currentWeekNumber) {
      return {
        classes: '-current-week-',
      }
    }
  }
});

Answer 2

Not with Jquery but Here is an example of highlight with Angular and Dayjs (hard to find examples of combination with Angular/Air Datepicker) !

import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
...

dayjs.extend(utc);
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);

new AirDatepicker('#airPicker', {
  onRenderCell({ date, cellType }) {
    let dateUtc = dayjs(date).utc();
    let utcWeekStart = dayjs().utc().startOf('week');
    let utcWeekEnd = dayjs().utc().endOf('week');

    if (
      dateUtc.isSameOrAfter(utcWeekStart) &&
      dateUtc.isSameOrBefore(utcWeekEnd)
    ) {
      return {
        classes: '-current-week-',
      };
    }
  },
}

CSS

.-current-week- {
  background: rgba(138, 79, 30, 0.1);
}