Vanilla JS Datepicker

Demo

Style: Bulma | Bootstrap | Foundation | Plain CSS

* This page uses bulma-tooltip for tooltips.

Type

Options

autohide

beforeShowDay

beforeShowDay(date) {
  if (date.getMonth() == new Date().getMonth()) {
    switch (date.getDate()) {
      case 4:
        return {
          content: '<span class="tooltip" data-tooltip="Example tooltip">4</span>',
          classes: 'has-background-info'
        };
      case 8:
        return false;
      case 12:
        return "has-text-success";
    }
  }
}

show/hide

beforeShowMonth

beforeShowMonth(date) {
  switch (date.getMonth()) {
    case 6:
      if (date.getFullYear() === new Date().getFullYear()) {
        return {content: '🎉'};
      }
      break;
    case 8:
      return false;
  }
}

show/hide

beforeShowYear

beforeShowYear(date) {
  switch (date.getFullYear()) {
    case 2017:
      return false;
    case 2020:
      return {content: '<span class="tooltip is-tooltip-bottom" data-tooltip="Tooltip text">2020</span>'};
  }
}

show/hide

beforeShowDecade

beforeShowDecade(date) {
  switch (date.getFullYear()) {
    case 2000:
      return false;
    case 2100:
      return {
        content: '💯',
        classes: 'is-background-success',
      };
  }
}

show/hide

calendarWeeks

clearBtn

dateDelimiter

datesDisabled

daysOfWeekDisabled

0 1 2 3 4 5 6

daysOfWeekHighlighted

0 1 2 3 4 5 6

defaultViewDate

format

language

maxDate

maxNumberOfDates

maxView

minDate

nextArrow

orientation

pickLevel

prevArrow

showDaysOfWeek

showOnClick

showOnFocus

startView

title

todayBtn

todayBtnMode

todayHighlight

updateOnBlur

weekStart