Dynamic Updates

1import { useState, useEffect, useRef, useMemo } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4function DynamicTimepicker() {
5  const inputRef = useRef<HTMLInputElement>(null);
6  const pickerRef = useRef<TimepickerUI | null>(null);
7  const [clockType, setClockType] = useState<'12h' | '24h'>('12h');
8  const [theme, setTheme] = useState<'basic' | 'dark'>('basic');
9
10  const options = useMemo(() => ({
11    clock: { type: clockType },
12    ui: { theme },
13  }), [clockType, theme]);
14
15  useEffect(() => {
16    if (!inputRef.current) return;
17
18    if (!pickerRef.current) {
19      // Create picker only once
20      pickerRef.current = new TimepickerUI(inputRef.current, options);
21      pickerRef.current.create();
22    }
23
24    return () => {
25      // Cleanup on unmount
26      pickerRef.current?.destroy();
27      pickerRef.current = null;
28    };
29  }, []); // Empty deps - run only once
30
31  // Update picker when options change
32  useEffect(() => {
33    if (pickerRef.current) {
34      pickerRef.current.update({ options });
35    }
36  }, [options]);
37
38  return (
39    <>
40      <button onClick={() => setClockType(
41        clockType === '12h' ? '24h' : '12h'
42      )}>
43        Toggle Format
44      </button>
45      <input ref={inputRef} type="text" />
46    </>
47  );
48}

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  clock: { type: '12h' },
6  ui: { theme: 'basic' }
7});
8
9picker.create();
10
11// Later, update options
12picker.update({
13  options: {
14    clock: { type: '24h' },
15    ui: { theme: 'dark' }
16  }
17});
18
19// Or with create option to reinitialize
20picker.update({
21  options: {
22    clock: { type: '12h' }
23  },
24  create: true
25});

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input);
5picker.create();
6
7// Update with new callbacks
8picker.update({
9  options: {
10    callbacks: {
11      onConfirm: (data) => {
12        console.log('New time selected:', data);
13      },
14      onCancel: () => {
15        console.log('Selection cancelled');
16      }
17    }
18  }
19});

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input);
5picker.create();
6
7// Update based on user preference
8function updatePickerTheme(isDarkMode: boolean) {
9  picker.update({
10    options: {
11      ui: { theme: isDarkMode ? 'dark' : 'basic' }
12    }
13  });
14}
15
16// Update based on device
17function updateForMobile(isMobile: boolean) {
18  picker.update({
19    options: {
20      ui: {
21        mobile: isMobile,
22        animation: !isMobile // Disable animation on mobile
23      }
24    }
25  });
26}
27
28// Listen to system theme changes
29window.matchMedia('(prefers-color-scheme: dark)')
30  .addEventListener('change', (e) => {
31    updatePickerTheme(e.matches);
32  });

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  clock: {
6    type: '24h',
7    disabledTime: {
8      hours: [9, 10, 11, 12] // Morning hours disabled
9    }
10  }
11});
12picker.create();
13
14// Update to disable evening hours instead
15function switchToEveningRestriction() {
16  picker.update({
17    options: {
18      clock: {
19        disabledTime: {
20          hours: [0, 1, 2, 3, 4, 5, 6, 7, 8]
21        }
22      }
23    },
24    create: true // Reinitialize to apply changes
25  });
26}
27
28// Clear all restrictions
29function clearRestrictions() {
30  picker.update({
31    options: {
32      clock: {
33        disabledTime: {}
34      }
35    },
36    create: true
37  });
38}
39
40// Update based on day of week
41function updateForDayOfWeek() {
42  const day = new Date().getDay();
43  const isWeekend = day === 0 || day === 6;
44  
45  picker.update({
46    options: {
47      clock: {
48        disabledTime: isWeekend
49          ? {} // No restrictions on weekends
50          : { hours: [0, 1, 2, 3, 4, 5, 6, 22, 23] } // Business hours only
51      }
52    },
53    create: true
54  });
55}

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  clock: {
6    type: '24h',
7    disabledTime: {
8      interval: '09:00 - 17:00' // Block business hours
9    }
10  }
11});
12picker.create();
13
14// Update to block after-hours
15function switchToAfterHoursBlock() {
16  picker.update({
17    options: {
18      clock: {
19        disabledTime: {
20          interval: ['00:00 - 08:00', '18:00 - 23:59']
21        }
22      }
23    },
24    create: true
25  });
26}
27
28// Multiple intervals for break times
29function setBreakSchedule() {
30  picker.update({
31    options: {
32      clock: {
33        disabledTime: {
34          interval: [
35            '00:00 - 09:00',  // Before work
36            '12:00 - 13:00',  // Lunch break  
37            '18:00 - 23:59'   // After work
38          ]
39        }
40      }
41    },
42    create: true
43  });
44}
45
46// 12h format intervals
47const picker12h = new TimepickerUI('#picker-12h', {
48  clock: {
49    type: '12h',
50    disabledTime: {
51      interval: '09:00 AM - 05:00 PM'
52    }
53  }
54});
55
56// Update 12h format intervals
57picker12h.update({
58  options: {
59    clock: {
60      disabledTime: {
61        interval: ['06:00 AM - 08:00 AM', '06:00 PM - 10:00 PM']
62      }
63    }
64  },
65  create: true
66});