Date Time

The Date Input component provides a formatted way for the user to enter in a particular date.

Props

NameTypeDescriptionRequiredDefault

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

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

Last updated