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	+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

Examples

2 Date Inputs at the top, 2 Date/Time Inputs in the middle, 2 Time Inputs at the bottom

Javascript

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: '',
      },
    ],
  });
}

React

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 />);