@kelvininc/ui-components
Version:
Kelvin UI Components
80 lines (55 loc) • 4.29 kB
Markdown
<!-- Auto Generated Below -->
## Usage
### React
```tsx
import React from 'react';
import { KvAbsoluteTimePickerDropdownInput } from '@kelvininc/react-ui-components';
export const KvAbsoluteTimePickerDropdownInput: React.FC = () => (
<>
{/*-- Default --*/}
<KvAbsoluteTimePickerDropdownInput />
{/*-- With selected date --*/}
<KvAbsoluteTimePickerDropdownInput selectedTime={[1681319856833, 1681406272018]} />
{/*-- With initial date --*/}
<KvAbsoluteTimePickerDropdownInput initialDate={1681319856833} />
</>
);
```
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------------ | --------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------- |
| `disabled` | `disabled` | (optional) Defines if the inputs for inserting the dates are disabled. | `boolean` | `false` |
| `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` |
| `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()` |
## Events
| Event | Description | Type |
| --------------------- | -------------------------- | ------------------------------------------- |
| `dropdownStateChange` | Dropdown open state change | `CustomEvent<boolean>` |
| `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
```
----------------------------------------------