timepicker-ui
4.7.0GitHub
timepicker-ui
GitHub4.7.0
Advanced / Multiple Pickers

Multiple Timepickers

Use multiple timepicker instances on the same page

Docs: Methods

Multiple Instances

Each timepicker instance is independent. You can have as many pickers as needed with different configurations.

Different Themes

#

Two pickers with different themes on the same page:

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


function MultipleTimepickers() {
  const startTimeRef = useRef<HTMLInputElement>(null);
  const endTimeRef = useRef<HTMLInputElement>(null);
  const picker1Ref = useRef<TimepickerUI | null>(null);
  const picker2Ref = useRef<TimepickerUI | null>(null);


  const options1 = useMemo(() => ({
    ui: { theme: 'basic' },
  }), []);


  const options2 = useMemo(() => ({
    ui: { theme: 'crane-straight' },
  }), []);


  useEffect(() => {
    if (startTimeRef.current && endTimeRef.current) {
      picker1Ref.current = new TimepickerUI(
        startTimeRef.current, 
        options1
      );
      picker1Ref.current.create();


      picker2Ref.current = new TimepickerUI(
        endTimeRef.current, 
        options2
      );
      picker2Ref.current.create();
    }


    return () => {
      picker1Ref.current?.destroy();
      picker2Ref.current?.destroy();
    };
  }, []);


  return (
    <>
      <input ref={startTimeRef} type="text" />
      <input ref={endTimeRef} type="text" />
    </>
  );
}

Array of Pickers

#

Managing multiple pickers using an array pattern:

index.tsx
import { useEffect, useRef } from 'react';
import { TimepickerUI } from 'timepicker-ui';


function MultiplePickersArray() {
  const inputRefs = useRef<HTMLInputElement[]>([]);
  const pickersRef = useRef<TimepickerUI[]>([]);


  useEffect(() => {
    // Initialize all pickers
    inputRefs.current.forEach((input, index) => {
      if (input) {
        const picker = new TimepickerUI(input, {
          ui: { theme: index % 2 === 0 ? 'basic' : 'dark' },
        });
        picker.create();
        pickersRef.current.push(picker);
      }
    });


    // Cleanup all pickers
    return () => {
      pickersRef.current.forEach(picker => picker.destroy());
      pickersRef.current = [];
    };
  }, []);


  return (
    <div>
      {['Morning', 'Afternoon', 'Evening'].map((label, i) => (
        <input
          key={label}
          ref={el => inputRefs.current[i] = el!}
          type="text"
          placeholder={`Select ${label} time`}
        />
      ))}
    </div>
  );
}

Vanilla JavaScript

#

Multiple pickers in vanilla JavaScript:

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


// Select all timepicker inputs
const inputs = document.querySelectorAll('.timepicker-input');


// Store pickers for cleanup
const pickers = [];


// Initialize each picker
inputs.forEach((input, index) => {
  const picker = new TimepickerUI(input, {
    ui: { theme: index % 2 === 0 ? 'basic' : 'dark' },
    clock: { type: '24h' }
  });
  
  picker.create();
  pickers.push(picker);
});


// Cleanup when needed
function destroyAllPickers() {
  pickers.forEach(picker => picker.destroy());
  pickers.length = 0;
}
Esc