TypeScript

Full TypeScript support with type definitions

Installation

TypeScript definitions are included with the package:

npm install timepicker-ui

// Types are automatically available
import { TimepickerUI } from 'timepicker-ui';
import type { OptionTypes, CallbackData } from 'timepicker-ui';

Main Interfaces

`OptionTypes`

Configuration options for TimepickerUI instance

interface OptionTypes {
  amLabel?: string;
  animation?: boolean;
  appendModalSelector?: string;
  backdrop?: boolean;
  cancelLabel?: string;
  clockType?: '12h' | '24h';
  cssClass?: string;
  currentTime?: boolean | CurrentTimeConfig;
  delayHandler?: number;
  disabledTime?: DisabledTimeConfig;
  editable?: boolean;
  enableScrollbar?: boolean;
  enableSwitchIcon?: boolean;
  focusInputAfterCloseModal?: boolean;
  focusTrap?: boolean;
  hourMobileLabel?: string;
  iconTemplate?: string;
  iconTemplateMobile?: string;
  id?: string;
  incrementHours?: number;
  incrementMinutes?: number;
  inline?: InlineConfig;
  minuteMobileLabel?: string;
  mobile?: boolean;
  mobileTimeLabel?: string;
  okLabel?: string;
  pmLabel?: string;
  switchToMinutesAfterSelectHour?: boolean;
  theme?: Theme;
  timeLabel?: string;
  
  // Callbacks
  onOpen?: (data: CallbackData) => void;
  onCancel?: (data: CallbackData) => void;
  onConfirm?: (data: CallbackData) => void;
  onUpdate?: (data: CallbackData) => void;
  onSelectHour?: (data: CallbackData) => void;
  onSelectMinute?: (data: CallbackData) => void;
  onSelectAM?: (data: CallbackData) => void;
  onSelectPM?: (data: CallbackData) => void;
  onError?: (data: CallbackData) => void;
}

`CallbackData`

Data passed to callback functions

interface CallbackData {
  hour?: string | null;
  minutes?: string | null;
  type?: string | null;
  degreesHours?: number | null;
  degreesMinutes?: number | null;
  hourNotAccepted?: string | null;
  minutesNotAccepted?: string | null;
  eventType?: any;
  error?: string;
  currentHour?: string | number;
  currentMin?: string | number;
  currentType?: string;
  currentLength?: string | number;
}

`InlineConfig`

Configuration for inline mode

interface InlineConfig {
  enabled: boolean;
  containerId: string;
  showButtons?: boolean;
  autoUpdate?: boolean;
}

`DisabledTimeConfig`

Configuration for disabled time ranges

interface DisabledTimeConfig {
  hours?: Array<string | number>;
  minutes?: Array<string | number>;
  interval?: string | string[];
}

`CurrentTimeConfig`

Configuration for current time initialization

interface CurrentTimeConfig {
  time?: Date;
  updateInput?: boolean;
  locales?: string | string[];
  preventClockType?: boolean;
}

Type Aliases

`Theme`

Available theme names

type Theme = 
  | 'basic'
  | 'crane-straight'
  | 'crane-radius'
  | 'm3'
  | 'dark'
  | 'glassmorphic'
  | 'pastel'
  | 'ai'
  | 'cyberpunk'
  | 'custom';

`ClockType`

Clock format types

type ClockType = '12h' | '24h';

Usage Examples

Basic TypeScript Usage

import { TimepickerUI } from 'timepicker-ui';
import type { OptionTypes, CallbackData } from 'timepicker-ui';

const options: OptionTypes = {
  theme: 'dark',
  clockType: '24h',
  onConfirm: (data: CallbackData) => {
    console.log(`Time: ${data.hour}:${data.minutes}`);
  }
};

const input = document.querySelector<HTMLInputElement>('#timepicker');
if (input) {
  const picker = new TimepickerUI(input, options);
  picker.create();
}

React with TypeScript

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

interface TimePickerProps {
  onTimeSelect?: (time: string) => void;
  theme?: 'basic' | 'dark' | 'cyberpunk';
}

export function TimePicker({ onTimeSelect, theme = 'basic' }: TimePickerProps) {
  const inputRef = useRef<HTMLInputElement>(null);

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

    const options: OptionTypes = {
      theme,
      onConfirm: (data) => {
        if (onTimeSelect && data.hour && data.minutes) {
          const time = `${data.hour}:${data.minutes}`;
          onTimeSelect(time);
        }
      }
    };

    const picker = new TimepickerUI(inputRef.current, options);
    picker.create();

    return () => picker.destroy();
  }, [theme, onTimeSelect]);

  return <input ref={inputRef} type="text" placeholder="Select time" />;
}

Error Handling

import type { CallbackData } from 'timepicker-ui';
import { TimepickerUI } from 'timepicker-ui';

const picker = new TimepickerUI('#timepicker', {
  onError: (data: CallbackData) => {
    if (data.error) {
      console.error('Timepicker error:', data.error);
      alert(`Invalid time format: ${data.error}`);
    }
  },
  onConfirm: (data: CallbackData) => {
    console.log('Time confirmed:', `${data.hour}:${data.minutes}`);
  }
});

Extending Types

import type { OptionTypes, CallbackData } from 'timepicker-ui';
import { TimepickerUI } from 'timepicker-ui';

// Extend options with custom properties
interface CustomTimepickerOptions extends OptionTypes {
  customProperty?: string;
  analyticsEnabled?: boolean;
}

// Create wrapper with custom logic
class CustomTimepicker {
  private picker: TimepickerUI;
  private analyticsEnabled: boolean;

  constructor(
    input: HTMLInputElement,
    options: CustomTimepickerOptions
  ) {
    this.analyticsEnabled = options.analyticsEnabled ?? false;
    
    const pickerOptions: OptionTypes = {
      ...options,
      onConfirm: (data: CallbackData) => {
        if (this.analyticsEnabled) {
          this.trackEvent('time_confirmed', data);
        }
        options.onConfirm?.(data);
      }
    };

    this.picker = new TimepickerUI(input, pickerOptions);
  }

  private trackEvent(event: string, data: CallbackData) {
    console.log('Analytics:', event, data);
  }

  create() {
    this.picker.create();
  }

  destroy() {
    this.picker.destroy();
  }
}

💡

IntelliSense Support

All options and methods have full IntelliSense support in VS Code and other TypeScript-aware editors. Hover over any property to see its documentation.