Multiple Timepickers

1import { useEffect, useRef, useMemo } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4function MultipleTimepickers() {
5  const startTimeRef = useRef<HTMLInputElement>(null);
6  const endTimeRef = useRef<HTMLInputElement>(null);
7  const picker1Ref = useRef<TimepickerUI | null>(null);
8  const picker2Ref = useRef<TimepickerUI | null>(null);
9
10  const options1 = useMemo(() => ({
11    ui: { theme: 'basic' },
12  }), []);
13
14  const options2 = useMemo(() => ({
15    ui: { theme: 'crane-straight' },
16  }), []);
17
18  useEffect(() => {
19    if (startTimeRef.current && endTimeRef.current) {
20      picker1Ref.current = new TimepickerUI(
21        startTimeRef.current, 
22        options1
23      );
24      picker1Ref.current.create();
25
26      picker2Ref.current = new TimepickerUI(
27        endTimeRef.current, 
28        options2
29      );
30      picker2Ref.current.create();
31    }
32
33    return () => {
34      picker1Ref.current?.destroy();
35      picker2Ref.current?.destroy();
36    };
37  }, []);
38
39  return (
40    <>
41      <input ref={startTimeRef} type="text" />
42      <input ref={endTimeRef} type="text" />
43    </>
44  );
45}

1import { useEffect, useRef } from 'react';
2import { TimepickerUI } from 'timepicker-ui';
3
4function MultiplePickersArray() {
5  const inputRefs = useRef<HTMLInputElement[]>([]);
6  const pickersRef = useRef<TimepickerUI[]>([]);
7
8  useEffect(() => {
9    // Initialize all pickers
10    inputRefs.current.forEach((input, index) => {
11      if (input) {
12        const picker = new TimepickerUI(input, {
13          ui: { theme: index % 2 === 0 ? 'basic' : 'dark' },
14        });
15        picker.create();
16        pickersRef.current.push(picker);
17      }
18    });
19
20    // Cleanup all pickers
21    return () => {
22      pickersRef.current.forEach(picker => picker.destroy());
23      pickersRef.current = [];
24    };
25  }, []);
26
27  return (
28    <div>
29      {['Morning', 'Afternoon', 'Evening'].map((label, i) => (
30        <input
31          key={label}
32          ref={el => inputRefs.current[i] = el!}
33          type="text"
34          placeholder={`Select ${label} time`}
35        />
36      ))}
37    </div>
38  );
39}

1import { TimepickerUI } from 'timepicker-ui';
2
3// Select all timepicker inputs
4const inputs = document.querySelectorAll('.timepicker-input');
5
6// Store pickers for cleanup
7const pickers = [];
8
9// Initialize each picker
10inputs.forEach((input, index) => {
11  const picker = new TimepickerUI(input, {
12    ui: { theme: index % 2 === 0 ? 'basic' : 'dark' },
13    clock: { type: '24h' }
14  });
15  
16  picker.create();
17  pickers.push(picker);
18});
19
20// Cleanup when needed
21function destroyAllPickers() {
22  pickers.forEach(picker => picker.destroy());
23  pickers.length = 0;
24}