## Usage ### React ```tsx import React from 'react'; import { KvDateTimeInput } from '@kelvininc/react-ui-components'; export const DateTimeInputExample: React.FC = () => ( <> {/*-- Default --*/} {/*-- Labeled --*/} ); ``` ## Properties | Property | Attribute | Description | Type | Default | | ---------------- | ------------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `dateFormat` | `date-format` | (optional) Format of the provided date | `string` | `DEFAULT_DATE_FORMAT` | | `disabled` | `disabled` | (optional) Date time input disabled | `boolean` | `false` | | `forcedFocus` | `forced-focus` | (optional) Date time focus state | `boolean` | `false` | | `helpText` | `help-text` | (optional) Date time input help text | `string \| string[]` | `[]` | | `highlighted` | `highlighted` | (optional) Similar to forcedFocus but does not emmit events | `boolean` | `false` | | `inputName` | `input-name` | (optional) Date time input name | `string` | `undefined` | | `inputStyleType` | `input-style-type` | (optional) Specifies if the inputs should be joined together or separated | `EDateTimeInputTypeStyle.MergedLeft \| EDateTimeInputTypeStyle.MergedRight \| EDateTimeInputTypeStyle.Separated` | `EDateTimeInputTypeStyle.Separated` | | `label` | `label` | (optional) Date time input label | `string` | `undefined` | | `leftIcon` | `left-icon` | (optional) Input left icon | `EIconName` | `undefined` | | `placeholder` | `placeholder` | (optional) Date time place holder | `string` | `DEFAULT_PLACEHOLDER` | | `required` | `required` | (optional) Date time input required | `boolean` | `false` | | `rightIcon` | `right-icon` | (optional) Input right icon | `EIconName` | `undefined` | | `size` | `size` | (optional) Sets this tab item to a different styling configuration | `EComponentSize.Large \| EComponentSize.Small` | `EComponentSize.Large` | | `state` | `state` | (optional) Date time input state | `EValidationState.Invalid \| EValidationState.None \| EValidationState.Valid` | `EValidationState.None` | | `useInputMask` | `use-input-mask` | (optional) Use a input mask when the Date time type is a Datetime (default true) | `boolean` | `false` | | `value` | `value` | (optional) Date time value | `string` | `''` | ## Events | Event | Description | Type | | ---------------- | -------------------------------------- | ------------------------- | | `dateTimeBlur` | Emitted when date time lost focus | `CustomEvent` | | `inputFocus` | Emitted when the input is foccused | `CustomEvent` | | `rightIconClick` | Emitted when the right icon is clicked | `CustomEvent` | | `textChange` | Emitted when a keyboard input occurred | `CustomEvent` | ## Dependencies ### Used by - [kv-absolute-time-picker](../absolute-time-picker) - [kv-absolute-time-picker-dropdown-input](../absolute-time-picker-dropdown-input) ### Depends on - [kv-form-label](../form-label) - [kv-icon](../icon) - [kv-form-help-text](../form-help-text) ### Graph ```mermaid graph TD; 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-absolute-time-picker --> kv-date-time-input kv-absolute-time-picker-dropdown-input --> kv-date-time-input style kv-date-time-input fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------