0

I am using Tempus Dominus date picker in a way that only shows months and years. And I also disable certain months, 2020-06 in the following example. When I click on the disabled month it doesn't select it as expected. But is it possible to grey it out and prevent clicking on it in the first place?

new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
  {
    restrictions: {
      minDate: "2020-01",
      maxDate: "2020-12",
      disabledDates: ["2020-06"],
      enabledDates: [],
      daysOfWeekDisabled: [],
      disabledTimeIntervals: [],
      disabledHours: [],
      enabledHours: []
    },
    display: {
      icons: {
        type: 'icons',
        time: 'fa-solid fa-clock',
        date: 'fa-solid fa-calendar',
        up: 'fa-solid fa-arrow-up',
        down: 'fa-solid fa-arrow-down',
        previous: 'fa-solid fa-chevron-left',
        next: 'fa-solid fa-chevron-right',
        today: 'fa-solid fa-calendar-check',
        clear: 'fa-solid fa-trash',
        close: 'fa-solid fa-xmark'
      },
      sideBySide: false,
      calendarWeeks: false,
      viewMode: 'calendar',
      toolbarPlacement: 'bottom',
      keepOpen: false,
      buttons: {
        today: false,
        clear: false,
        close: false
      },
      components: {
        calendar: true,
        date: false,
        month: true,
        year: true,
        decades: true,        
        hours: false,
        minutes: false,
        seconds: false        
      },
      inline: false,
      theme: 'auto'
    },
    stepping: 1,
    viewDate: "2020-01",
    useCurrent: true,
    defaultDate: undefined,    
    keepInvalid: false,
    debug: false,
    allowInputToggle: false,
    multipleDates: false,
    multipleDatesSeparator: '; ',
    promptTimeOnDateChange: false,
    promptTimeOnDateChangeTransitionDelay: 200,
    meta: {},
    container: undefined
  }
)
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/js/tempus-dominus.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/css/tempus-dominus.min.css" rel="stylesheet"/>

<input type="text" id="datetimepicker1">
pileup
  • 1
  • 2
  • 18
  • 45

0 Answers0