Disabled Time

Restrict time selection by disabling specific hours, minutes, or intervals

Overview

The disabled time feature allows you to prevent users from selecting certain time values. This is useful for business hours restrictions, appointment scheduling, or any scenario where only specific times should be selectable.

✓Disable specific hours (e.g., after business hours)
✓Disable specific minutes (e.g., only allow :00, :15, :30, :45)
✓Set minute intervals (e.g., 5, 10, 15 minute increments)
✓Visual indicators show disabled times

Disable Hours

Restrict which hours can be selected by providing an array of hour values:

Business Hours (9 AM - 5 PM)

const picker = new TimepickerUI(input, {
  disabledTime: {
    hours: [0, 1, 2, 3, 4, 5, 6, 7, 8]
  }
});

picker.create();

Only hours 9-17 (9 AM to 5 PM) will be selectable.

Night Time Only

const picker = new TimepickerUI(input, {
  clockType: '24h',
  disabledTime: {
    hours: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
  }
});

picker.create();

Only allows selection from 10 PM to 5 AM.

Disable Minutes

Control which minute values are available:

Quarter Hour Intervals

const picker = new TimepickerUI(input, {
  disabledTime: {
    minutes: Array.from({ length: 60 }, (_, i) => i)
      .filter(m => ![0, 15, 30, 45].includes(m))
  }
});

picker.create();

Only :00, :15, :30, and :45 minutes will be selectable.

Using Minute Interval Helper

const picker = new TimepickerUI(input, {
  disabledTime: {
    interval: 15  // Only show minutes in 15-minute intervals
  }
});

picker.create();

Shorthand for 15-minute intervals (0, 15, 30, 45).

5-Minute Intervals

const picker = new TimepickerUI(input, {
  disabledTime: {
    interval: 5  // Show minutes in 5-minute intervals
  }
});

picker.create();

Minutes: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55

Combined Restrictions

Combine hour and minute restrictions for precise control:

Business Hours with Intervals

const picker = new TimepickerUI(input, {
  disabledTime: {
    hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23],
    interval: 30  // 30-minute intervals
  }
});

picker.create();

// Result: Can only select 9:00, 9:30, 10:00, 10:30... until 17:00, 17:30

Custom Minutes per Hour

const picker = new TimepickerUI(input, {
  disabledTime: {
    hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 20, 21, 22, 23],
    minutes: [5, 10, 20, 25, 35, 40, 50, 55]
  }
});

// Only allows minutes: 0, 15, 30, 45 during hours 9-19

Dynamic Restrictions

Change disabled times dynamically based on user actions or external data:

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input);

// Initial creation with no restrictions
picker.create();

// Update to add restrictions (e.g., after selecting a date)
function updateTimeRestrictions(selectedDate) {
  const isWeekend = [0, 6].includes(selectedDate.getDay());
  
  const restrictions = isWeekend
    ? { hours: [] }  // No restrictions on weekends
    : { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] };  // Business hours

  picker.update({
    options: {
      disabledTime: restrictions
    },
    create: true
  });
}

// Listen for date changes
dateInput.addEventListener('change', (e) => {
  updateTimeRestrictions(new Date(e.target.value));
});

Visual Styling

Disabled times are automatically styled to be visually distinct:

Default Disabled Styling

.timepicker-ui-clock-face__clock-hand[disabled],
.timepicker-ui-minutes__minute[disabled],
.timepicker-ui-hour__hour[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.timepicker-ui-minutes__minute[disabled]:hover,
.timepicker-ui-hour__hour[disabled]:hover {
  background-color: transparent;
}

Custom Disabled Colors

.timepicker-ui-minutes__minute[disabled],
.timepicker-ui-hour__hour[disabled] {
  opacity: 0.2;
  text-decoration: line-through;
  color: #ef4444;  /* Red to indicate disabled */
}

Validation Best Practices

When using disabled time, make sure to also implement server-side validation. Client-side restrictions can be bypassed, so always validate the submitted time values on your backend to ensure they meet your business rules.

Learn about validation