Olive Helps
Loop Development Kit
Documentation
Whisper Components
APTITUDES
Release Notes
Date Time
The Date Input component provides a formatted way for the user to enter in a particular date.
Props
Name
Type
Description
Required
Default
dateTimeType+DateTimeTypeDetermines which type of date input field is rendered.
​labelstringText that sits inside of the input and floats above the cursor in the input on focus.
nullmaxDateThe furthest date in the future possible.
nullminDateThe earliest date possible.
nullonBlurfunctionExecutes the provided function when the user removes focus from the input.
nullonChangefunctionExecutes the provided function when the user alters the value of the input.
​
onFocusfunctionExecutes the provided function when the user focuses into the input.
nulltooltipstringText that appears when Text that appears when hovering over the input.
nullvalidationErrorstringWhen not
'' or undefied, outlines the input in red and renders the provided text in red beneath the input.nullvaluestringState value associated with the input.
nullNote: Types marked with + are Olive LDK enums
Examples
2 Date Inputs at the top, 2 Date/Time Inputs in the middle, 2 Time Inputs at the bottom
Javascript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
DateTimeType,
4
WhisperComponentType,
5
} from '@oliveai/ldk/dist/whisper/types';
6
​
7
export const dateTimeWhisper = async () => {
8
await whisper.create({
9
label: 'Time Input',
10
components: [
11
{
12
type: WhisperComponentType.DateTimeInput,
13
dateTimeType: DateTimeType.Date,
14
label: 'Date Input',
15
onBlur: (error) => {
16
console.log('onBlur', error);
17
},
18
onChange: (error, value) => {
19
console.log('onChange', error, value);
20
},
21
onFocus: (error) => {
22
console.log('onFocus', error);
23
},
24
tooltip: 'Tooltip Text',
25
validationError: '',
26
value: '',
27
},
28
{
29
type: whisper.WhisperComponentType.DateTimeInput,
30
dateTimeType: DateTimeType.Date,
31
label: 'Date Input',
32
onBlur: (error) => {
33
console.log('onBlur', error);
34
},
35
onChange: (error, value) => {
36
console.log('onChange', error, value);
37
},
38
onFocus: (error) => {
39
console.log('onFocus', error);
40
},
41
tooltip: 'Tooltip Text',
42
validationError: 'Validation Error',
43
value: '',
44
},
45
{
46
type: whisper.WhisperComponentType.DateTimeInput,
47
dateTimeType: DateTimeType.DateTime,
48
label: 'DateTime Input',
49
onBlur: (error) => {
50
console.log('onBlur', error);
51
},
52
onChange: (error, value) => {
53
console.log('onChange', error, value);
54
},
55
onFocus: (error) => {
56
console.log('onFocus', error);
57
},
58
tooltip: 'Tooltip Text',
59
validationError: '',
60
value: '',
61
},
62
{
63
type: whisper.WhisperComponentType.DateTimeInput,
64
dateTimeType: DateTimeType.DateTime,
65
label: 'DateTime Input',
66
onBlur: (error) => {
67
console.log('onBlur', error);
68
},
69
onChange: (error, value) => {
70
console.log('onChange', error, value);
71
},
72
onFocus: (error) => {
73
console.log('onFocus', error);
74
},
75
tooltip: 'Tooltip Text',
76
validationError: 'Validation Error',
77
value: '',
78
},
79
{
80
type: whisper.WhisperComponentType.DateTimeInput,
81
dateTimeType: DateTimeType.Time,
82
label: 'Time Input',
83
onBlur: (error) => {
84
console.log('onBlur', error);
85
},
86
onChange: (error, value) => {
87
console.log('onChange', error, value);
88
},
89
onFocus: (error) => {
90
console.log('onFocus', error);
91
},
92
tooltip: 'Tooltip Text',
93
validationError: '',
94
value: '',
95
},
96
{
97
type: whisper.WhisperComponentType.DateTimeInput,
98
dateTimeType: DateTimeType.Date,
99
label: 'Time Input',
100
onBlur: (error) => {
101
console.log('onBlur', error);
102
},
103
onChange: (error, value) => {
104
console.log('onChange', error, value);
105
},
106
onFocus: (error) => {
107
console.log('onFocus', error);
108
},
109
tooltip: 'Tooltip Text',
110
validationError: 'Validation Error',
111
value: '',
112
},
113
],
114
});
115
}
116
​
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
import { DateTimeType } from '@oliveai/ldk/dist/whisper/types';
5
​
6
const TestTimeInput = () => {
7
const [inputValue, setInputValue] = React.useState('');
8
9
return (
10
<oh-whisper label="Time Input" onClose={() => {}}>
11
<oh-datetime
12
dateTimeType={DateTimeType.Date}
13
label="Date Input"
14
onBlur={(error) => console.log('onBlur', error)}
15
onChange={(error, value) => setInputValue(value)}
16
onFocus={(error) => console.log('onFocus', error)}
17
tooltip="Tooltip Text"
18
validationError=""
19
value={inputValue}
20
/>
21
<oh-datetime
22
dateTimeType={DateTimeType.Date}
23
label="Date Input"
24
onBlur={(error) => console.log('onBlur', error)}
25
onChange={(error, value) => setInputValue(value)}
26
onFocus={(error) => console.log('onFocus', error)}
27
tooltip="Tooltip Text"
28
validationError="Validation Error"
29
/>
30
<oh-datetime
31
dateTimeType={DateTimeType.DateTime}
32
label="DateTime Input"
33
onBlur={(error) => console.log('onBlur', error)}
34
onChange={(error, value) => setInputValue(value)}
35
onFocus={(error) => console.log('onFocus', error)}
36
tooltip="Tooltip Text"
37
validationError=""
38
/>
39
<oh-datetime
40
dateTimeType={DateTimeType.DateTime}
41
label="DateTime Input"
42
onBlur={(error) => console.log('onBlur', error)}
43
onChange={(error, value) => setInputValue(value)}
44
onFocus={(error) => console.log('onFocus', error)}
45
tooltip="Tooltip Text"
46
validationError="Validation Error"
47
/>
48
<oh-datetime
49
dateTimeType={DateTimeType.Time}
50
label="Time Input"
51
onBlur={(error) => console.log('onBlur', error)}
52
onChange={(error, value) => setInputValue(value)}
53
onFocus={(error) => console.log('onFocus', error)}
54
tooltip="Tooltip Text"
55
validationError=""
56
/>
57
<oh-datetime
58
dateTimeType={DateTimeType.Time}
59
label="Time Input"
60
onBlur={(error) => console.log('onBlur', error)}
61
onChange={(error, value) => setInputValue(value)}
62
onFocus={(error) => console.log('onFocus', error)}
63
tooltip="Tooltip Text"
64
validationError="Validation Error"
65
/>
66
</oh-whisper>
67
);
68
};
69
​
70
ReactWhisper.renderNewWhisper(<TestTimeInput />);
Copied!
Last modified 21d ago