@itwin/itwinui-react/esm/core/TimePicker/TimePicker.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
export type MeridiemType = 'AM' | 'PM';
export type Precision = 'hours' | 'minutes' | 'seconds';
export type TimePickerProps = {
    /**
     * Selected date. Only time is used from Date object.
     */
    date?: Date;
    /**
     * Callback when time is changed.
     */
    onChange?: (date: Date) => void;
    /**
     * Format of the time. 12h or 24h.
     * @default false
     */
    use12Hours?: boolean;
    /**
     * Precision of the time.
     * @default 'minutes'
     */
    precision?: Precision;
    /**
     * Change step of the hours displayed.
     * @default 1
     */
    hourStep?: number;
    /**
     * Change step of the minutes displayed.
     * @default 1
     */
    minuteStep?: number;
    /**
     * Change step of the seconds displayed.
     * @default 1
     */
    secondStep?: number;
    /**
     * Set focus on hour.
     * @default false
     */
    setFocusHour?: boolean;
    /**
     * Custom hour cell renderer.
     * @default (date: Date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 })
     */
    hourRenderer?: (date: Date) => React.ReactNode;
    /**
     * Custom minute cell renderer.
     * @default (date: Date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 })
     */
    minuteRenderer?: (date: Date) => React.ReactNode;
    /**
     * Custom second cell renderer.
     * @default (date: Date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 })
     */
    secondRenderer?: (date: Date) => React.ReactNode;
    /**
     * Custom AM/PM cell renderer.
     * @default (meridiem: MeridiemType) => meridiem
     */
    meridiemRenderer?: (meridiem: MeridiemType) => React.ReactNode;
    /**
     * Use combined time renderer. Combines hour, minute, and seconds into one column.
     * **WARNING**: Using the combined renderer with a `precision` of 'seconds' along with
     * small time steps (`hourStep`, `minuteStep`, and especially `secondStep`) can result in slow performance!
     * @default false
     */
    useCombinedRenderer?: boolean;
    /**
     * Custom combined time renderer.
     * Default returns time in `HH:MM:SS` format
     * @default (date: Date, precision: Precision) => {
     *   let dateString = '';
     *   switch (precision) {
     *     case 'seconds':
     *        dateString = ':' + date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
     *      case 'minutes':
     *        dateString = ':' + date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }) + dateString;
     *      case 'hours':
     *        dateString = date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }) + dateString;
     *    }
     *    return dateString;
     *   }
     */
    combinedRenderer?: (date: Date, precision: Precision) => React.ReactNode;
};
/**
 * Time picker component
 * @example
 * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
 */
export declare const TimePicker: PolymorphicForwardRefComponent<"div", TimePickerProps>;