timescape/dist/react.d.ts

A flexible, headless date and time input library for JavaScript. Provides tools for building fully customizable date and time input fields, with support for libraries like React, Preact, Vue, Svelte and Solid.

import * as react from 'react';
import { Dispatch, SetStateAction, MutableRefObject } from 'react';
import TimescapeManager, { Options, RangeOptions, DateType } from './index.js';
export { $NOW } from './index.js';

type ReactOptions = Options & {
    onChangeDate?: (nextDate: Date | undefined) => void;
};
type UpdateFn = Dispatch<SetStateAction<Options>>;
declare const useTimescape: (options?: ReactOptions) => {
    readonly _manager: TimescapeManager;
    readonly getInputProps: (type: DateType, opts?: {
        ref?: MutableRefObject<HTMLInputElement | null>;
        autofocus?: boolean;
    }) => {
        ref: (element: HTMLInputElement | null) => void;
    };
    readonly getRootProps: () => {
        ref: (element: HTMLElement | null) => void | null;
    };
    readonly ampm: {
        readonly value: "am" | "pm" | undefined;
        set: (value: "am" | "pm") => void;
        toggle: () => void;
        getSelectProps: () => {
            value: "am" | "pm" | undefined;
            onChange: (e: Event | react.ChangeEvent<HTMLSelectElement>) => void;
        };
    };
    readonly options: ReactOptions;
    readonly update: Dispatch<SetStateAction<ReactOptions>>;
};
type ReactRangeOptions = RangeOptions & {
    from?: {
        onChangeDate?: (nextDate: Date | undefined) => void;
    };
    to?: {
        onChangeDate?: (nextDate: Date | undefined) => void;
    };
};
declare const useTimescapeRange: (options: ReactRangeOptions) => {
    readonly getRootProps: () => {
        ref: (element: HTMLElement | null) => void;
    };
    readonly from: {
        readonly getInputProps: (type: DateType, opts?: {
            ref?: MutableRefObject<HTMLInputElement | null>;
            autofocus?: boolean;
        }) => {
            ref: (element: HTMLInputElement | null) => void;
        };
        readonly options: ReactOptions;
        readonly update: Dispatch<SetStateAction<ReactOptions>>;
    };
    readonly to: {
        readonly getInputProps: (type: DateType, opts?: {
            ref?: MutableRefObject<HTMLInputElement | null>;
            autofocus?: boolean;
        }) => {
            ref: (element: HTMLInputElement | null) => void;
        };
        readonly options: ReactOptions;
        readonly update: Dispatch<SetStateAction<ReactOptions>>;
    };
};

export { DateType, type ReactOptions as Options, type ReactRangeOptions as RangeOptions, type ReactRangeOptions, type UpdateFn, useTimescape, useTimescapeRange };