## Usage ### React ```tsx import React from 'react'; import { KvAbsoluteTimePickerDropdownInput } from '@kelvininc/react-ui-components/client'; export const KvAbsoluteTimePickerDropdownInput: React.FC = () => ( <> {/*-- Default --*/} {/*-- With selected date --*/} {/*-- With initial date --*/} ); ``` ## Properties | Property | Attribute | Description | Type | Default | | ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | | `disabled` | `disabled` | (optional) Defines if the inputs for inserting the dates are disabled. | `boolean` | `false` | | `fromInputConfig` | `from-input-config` | (optional) Customizes the "from" date-time input (also used as the single input in single mode). Merged over the built-in defaults. | `{ label?: string; placeholder?: string; required?: boolean; size?: EComponentSize; state?: EValidationState; inputName?: string; highlighted?: boolean; helpText?: string \| string[]; leftIcon?: EIconName; }` | `undefined` | | `initialDate` | `initial-date` | (optional) Initial date displayed on the calendars | `number` | `undefined` | | `isDropdownOpen` | `is-dropdown-open` | (optional) Determines if the dropdown is open | `boolean` | `false` | | `minimumFromInputDate` | `minimum-from-input-date` | (optional) calendar from input minimum date | `number` | `undefined` | | `minimumSingleInputDate` | `minimum-single-input-date` | (optional) calendar single input minimum date | `number` | `undefined` | | `minimumToInputDate` | `minimum-to-input-date` | (optional) calendar to input minimum date | `number` | `undefined` | | `mode` | `mode` | (optional) Mode of the input: single, range | `EAbsoluteTimePickerMode.Range \| EAbsoluteTimePickerMode.Single` | `EAbsoluteTimePickerMode.Range` | | `numberOfCalendars` | `number-of-calendars` | (optional) Number of month calendars shown in the dropdown. Minimum 1, no upper limit. Default 2. | `number` | `DEFAULT_NUMBER_OF_CALENDARS` | | `selectedTime` | `selected-time` | (optional) Selected time in timestamp | `[] \| [number, number] \| [number]` | `undefined` | | `timezone` | `timezone` | (optional) Timezone of the provided timestamp | `{ name: string; offset: number; }` | `getDefaultTimezoneSettings()` | | `toInputConfig` | `to-input-config` | (optional) Customizes the "to" date-time input (range mode only). Merged over the built-in defaults. | `{ label?: string; placeholder?: string; required?: boolean; size?: EComponentSize; state?: EValidationState; inputName?: string; highlighted?: boolean; helpText?: string \| string[]; leftIcon?: EIconName; }` | `undefined` | ## Events | Event | Description | Type | | --------------------- | -------------------------- | ------------------------------------------- | | `dropdownStateChange` | Dropdown open state change | `CustomEvent` | | `selectedTimeChange` | Selected time change | `CustomEvent<[number, number] \| [number]>` | ## Dependencies ### Depends on - [kv-dropdown-base](../dropdown-base) - [kv-date-time-input](../date-time-input) - [kv-calendar](../calendar) ### Graph ```mermaid graph TD; kv-absolute-time-picker-dropdown-input --> kv-dropdown-base kv-absolute-time-picker-dropdown-input --> kv-date-time-input kv-absolute-time-picker-dropdown-input --> kv-calendar kv-dropdown-base --> kv-portal kv-date-time-input --> kv-form-label kv-date-time-input --> kv-icon kv-date-time-input --> kv-form-help-text kv-form-help-text --> kv-icon kv-calendar --> kv-icon kv-calendar --> kv-calendar-day style kv-absolute-time-picker-dropdown-input fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------