Date Time
The Date Input component provides a formatted way for the user to enter in a particular date.
Name | Type | Description | Required | Default |
|---|---|---|---|---|
dateTimeType | +DateTimeType | Determines which type of date input field is rendered. | | |
label | string | Text that sits inside of the input and floats above the cursor in the input on focus. | null | |
max | Date | The furthest date in the future possible. | null | |
min | Date | The earliest date possible. | null | |
onBlur | function | Executes the provided function when the user removes focus from the input. | null | |
onChange | function | Executes the provided function when the user alters the value of the input. | | |
onFocus | function | Executes the provided function when the user focuses into the input. | null | |
tooltip | string | Text that appears when Text that appears when hovering over the input. | null | |
validationError | string | When not '' or undefied, outlines the input in red and renders the provided text in red beneath the input. | null | |
value | string | State value associated with the input. | null |
Note: Types marked with + are Olive LDK enums
2 Date Inputs at the top, 2 Date/Time Inputs in the middle, 2 Time Inputs at the bottom
Javascript
React
import { whisper } from '@oliveai/ldk';
import {
DateTimeType,
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
export const dateTimeWhisper = async () => {
await whisper.create({
label: 'Time Input',
components: [
{
type: WhisperComponentType.DateTimeInput,
dateTimeType: DateTimeType.Date,
label: 'Date Input',
onBlur: (error) => {
console.log('onBlur', error);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (error) => {
console.log('onFocus', error);
},
tooltip: 'Tooltip Text',
validationError: '',
value: '',
},
{
type: whisper.WhisperComponentType.DateTimeInput,
dateTimeType: DateTimeType.Date,
label: 'Date Input',
onBlur: (error) => {
console.log('onBlur', error);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (error) => {
console.log('onFocus', error);
},
tooltip: 'Tooltip Text',
validationError: 'Validation Error',
value: '',
},
{
type: whisper.WhisperComponentType.DateTimeInput,
dateTimeType: DateTimeType.DateTime,
label: 'DateTime Input',
onBlur: (error) => {
console.log('onBlur', error);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (error) => {
console.log('onFocus', error);
},
tooltip: 'Tooltip Text',
validationError: '',
value: '',
},
{
type: whisper.WhisperComponentType.DateTimeInput,
dateTimeType: DateTimeType.DateTime,
label: 'DateTime Input',
onBlur: (error) => {
console.log('onBlur', error);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (error) => {
console.log('onFocus', error);
},
tooltip: 'Tooltip Text',
validationError: 'Validation Error',
value: '',
},
{
type: whisper.WhisperComponentType.DateTimeInput,
dateTimeType: DateTimeType.Time,
label: 'Time Input',
onBlur: (error) => {
console.log('onBlur', error);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (error) => {
console.log('onFocus', error);
},
tooltip: 'Tooltip Text',
validationError: '',
value: '',
},
{
type: whisper.WhisperComponentType.DateTimeInput,
dateTimeType: DateTimeType.Date,
label: 'Time Input',
onBlur: (error) => {
console.log('onBlur', error);
},
onChange: (error, value) => {
console.log('onChange', error, value);
},
onFocus: (error) => {
console.log('onFocus', error);
},
tooltip: 'Tooltip Text',
validationError: 'Validation Error',
value: '',
},
],
});
}
import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
import { DateTimeType } from '@oliveai/ldk/dist/whisper/types';
const TestTimeInput = () => {
const [inputValue, setInputValue] = React.useState('');
return (
<oh-whisper label="Time Input" onClose={() => {}}>
<oh-datetime
dateTimeType={DateTimeType.Date}
label="Date Input"
onBlur={(error) => console.log('onBlur', error)}
onChange={(error, value) => setInputValue(value)}
onFocus={(error) => console.log('onFocus', error)}
tooltip="Tooltip Text"
validationError=""
value={inputValue}
/>
<oh-datetime
dateTimeType={DateTimeType.Date}
label="Date Input"
onBlur={(error) => console.log('onBlur', error)}
onChange={(error, value) => setInputValue(value)}
onFocus={(error) => console.log('onFocus', error)}
tooltip="Tooltip Text"
validationError="Validation Error"
/>
<oh-datetime
dateTimeType={DateTimeType.DateTime}
label="DateTime Input"
onBlur={(error) => console.log('onBlur', error)}
onChange={(error, value) => setInputValue(value)}
onFocus={(error) => console.log('onFocus', error)}
tooltip="Tooltip Text"
validationError=""
/>
<oh-datetime
dateTimeType={DateTimeType.DateTime}
label="DateTime Input"
onBlur={(error) => console.log('onBlur', error)}
onChange={(error, value) => setInputValue(value)}
onFocus={(error) => console.log('onFocus', error)}
tooltip="Tooltip Text"
validationError="Validation Error"
/>
<oh-datetime
dateTimeType={DateTimeType.Time}
label="Time Input"
onBlur={(error) => console.log('onBlur', error)}
onChange={(error, value) => setInputValue(value)}
onFocus={(error) => console.log('onFocus', error)}
tooltip="Tooltip Text"
validationError=""
/>
<oh-datetime
dateTimeType={DateTimeType.Time}
label="Time Input"
onBlur={(error) => console.log('onBlur', error)}
onChange={(error, value) => setInputValue(value)}
onFocus={(error) => console.log('onFocus', error)}
tooltip="Tooltip Text"
validationError="Validation Error"
/>
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<TestTimeInput />);
Last modified 8mo ago