timepicker-ui
4.7.0GitHub
timepicker-ui
GitHub4.7.0
Advanced / Dynamic Updates

Dynamic Updates

Update timepicker options dynamically without destroying the instance

Docs: Methods

setOptions()

Use the setOptions() method to change options on an existing timepicker instance without recreating it. It replaces update({ options }), which still works until 5.0.

Interactive Demo

#

Change options dynamically and see the timepicker update:

import { useState, useEffect, useRef, useMemo } from 'react';
import { TimepickerUI } from 'timepicker-ui';


function DynamicTimepicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<TimepickerUI | null>(null);
  const [clockType, setClockType] = useState<'12h' | '24h'>('12h');
  const [theme, setTheme] = useState<'basic' | 'dark'>('basic');


  const options = useMemo(() => ({
    clock: { type: clockType },
    ui: { theme },
  }), [clockType, theme]);


  useEffect(() => {
    if (!inputRef.current) return;


    if (!pickerRef.current) {
      // Create picker only once
      pickerRef.current = new TimepickerUI(inputRef.current, options);
      pickerRef.current.create();
    }


    return () => {
      // Cleanup on unmount
      pickerRef.current?.destroy();
      pickerRef.current = null;
    };
  }, []); // Empty deps - run only once


  // Update picker when options change
  useEffect(() => {
    if (pickerRef.current) {
      pickerRef.current.setOptions(options);
    }
  }, [options]);


  return (
    <>
      <button onClick={() => setClockType(
        clockType === '12h' ? '24h' : '12h'
      )}>
        Toggle Format
      </button>
      <input ref={inputRef} type="text" />
    </>
  );
}

setOptions() Method

#

setOptions() changes options without destroying the picker. Groups you leave out keep their values:

index.ts
import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  clock: { type: '12h' },
  ui: { theme: 'basic' }
});


picker.create();


// Later, change options
picker.setOptions({
  clock: { type: '24h' },
  ui: { theme: 'dark' }
});


// Only the clock group changes; ui keeps theme: 'dark'
picker.setOptions({
  clock: { type: '12h' }
});

Update with Callbacks

#

Update options including event callbacks:

index.ts
import { TimepickerUI } from 'timepicker-ui';


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


// Update with new callbacks
picker.setOptions({
  callbacks: {
    onConfirm: (data) => {
      console.log('New time selected:', data);
    },
    onCancel: () => {
      console.log('Selection cancelled');
    }
  }
});

Conditional Updates

#

Update picker based on user preferences or app state:

index.ts
import { TimepickerUI } from 'timepicker-ui';


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


// Update based on user preference
function updatePickerTheme(isDarkMode: boolean) {
  picker.setOptions({
    ui: { theme: isDarkMode ? 'dark' : 'basic' }
  });
}


// Update based on device
function updateForMobile(isMobile: boolean) {
  picker.setOptions({
    ui: {
      initialView: isMobile ? 'keyboard' : 'clock',
      animation: !isMobile // Disable animation on mobile
    }
  });
}


// Listen to system theme changes
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    updatePickerTheme(e.matches);
  });

Update DisabledTime Dynamically

#

Change disabled times based on business rules or user context:

index.ts
import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  clock: {
    type: '24h',
    disabledTime: {
      hours: [9, 10, 11, 12] // Morning hours disabled
    }
  }
});
picker.create();


// Update to disable evening hours instead
function switchToEveningRestriction() {
  picker.setOptions({
    clock: {
      disabledTime: {
        hours: [0, 1, 2, 3, 4, 5, 6, 7, 8]
      }
    }
  });
}


// Clear all restrictions
function clearRestrictions() {
  picker.setOptions({
    clock: {
      disabledTime: {}
    }
  });
}


// Update based on day of week
function updateForDayOfWeek() {
  const day = new Date().getDay();
  const isWeekend = day === 0 || day === 6;


  picker.setOptions({
    clock: {
      disabledTime: isWeekend
        ? {} // No restrictions on weekends
        : { hours: [0, 1, 2, 3, 4, 5, 6, 22, 23] } // Business hours only
    }
  });
}

Update Disabled Ranges Dynamically

#

Change disabled time ranges for business hours, shifts, or scheduling:

index.ts
import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  clock: {
    type: '24h',
    disabledTime: {
      ranges: '09:00 - 17:00' // Block business hours
    }
  }
});
picker.create();


// Update to block after-hours
function switchToAfterHoursBlock() {
  picker.setOptions({
    clock: {
      disabledTime: {
        ranges: ['00:00 - 08:00', '18:00 - 23:59']
      }
    }
  });
}


// Multiple ranges for break times
function setBreakSchedule() {
  picker.setOptions({
    clock: {
      disabledTime: {
        ranges: [
          '00:00 - 09:00',  // Before work
          '12:00 - 13:00',  // Lunch break
          '18:00 - 23:59'   // After work
        ]
      }
    }
  });
}


// 12h format ranges
const picker12h = new TimepickerUI('#picker-12h', {
  clock: {
    type: '12h',
    disabledTime: {
      ranges: '09:00 AM - 05:00 PM'
    }
  }
});
picker12h.create();


// Update 12h format ranges
picker12h.setOptions({
  clock: {
    disabledTime: {
      ranges: ['06:00 AM - 08:00 AM', '06:00 PM - 10:00 PM']
    }
  }
});
Esc