Light Dark System

Datetime Picker

<ol-datetime-picker> | OlDatetimePicker
Since 1.8.33 experimental

A datetime picker component that allows users to select date, time, or both using a calendar dropdown. 

<ol-datetime-picker label="Select date and time"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => <OlDatetimePicker label="Select date and time" />;

Examples

Basic Usage

The datetime picker combines an input field with a calendar dropdown. Click the calendar icon to open the date/time selection interface. 

<ol-datetime-picker label="Appointment Date" help-text="Choose your preferred appointment date and time"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <OlDatetimePicker
    label="Appointment Date"
    help-text="Choose your preferred appointment date and time"
  />
);

Date Only Mode

Use the mode="date" attribute to allow only date selection without time.

<ol-datetime-picker mode="date" label="Birth Date" placeholder="Select your birth date"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <OlDatetimePicker
    mode="date"
    label="Birth Date"
    placeholder="Select your birth date"
  />
);

Time Only Mode

Use the mode="time" attribute to allow only time selection without date.

<ol-datetime-picker mode="time" label="Meeting Time" placeholder="Select meeting time"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <OlDatetimePicker
    mode="time"
    label="Meeting Time"
    placeholder="Select meeting time"
  />
);

Time Formats (12/24 Hour)

Use the time-format attribute to specify whether to use 12-hour or 24-hour time format. The default is 24-hour format. 


<ol-datetime-picker mode="time" time-format="12" label="12-Hour Time" placeholder="Select time in 12-hour format"></ol-datetime-picker>
<br />
<ol-datetime-picker mode="time" time-format="24" label="24-Hour Time" placeholder="Select time in 24-hour format"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <>
    <OlDatetimePicker
      mode="time"
      timeFormat="12"
      label="12-Hour Time"
      placeholder="Select time in 12-hour format"
    />
    <br />
    <OlDatetimePicker
      mode="time"
      timeFormat="24"
      label="24-Hour Time"
      placeholder="Select time in 24-hour format"
    />
  </>
);

Date and Time Mode (Default)

The default mode allows selection of both date and time.

<ol-datetime-picker mode="datetime" label="Event Start" placeholder="Select event start date and time"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <OlDatetimePicker
    mode="datetime"
    label="Event Start"
    placeholder="Select event start date and time"
  />
);

Setting Min and Max Dates

Use the min-date and max-date attributes to restrict the selectable date range. 

<ol-datetime-picker
  mode="date"
  label="Project Deadline"
  min-date="2024-01-01"
  max-date="2024-12-31"
  help-text="Select a date within 2024"
></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <OlDatetimePicker
    mode="date"
    label="Project Deadline"
    minDate="2024-01-01"
    maxDate="2024-12-31"
    helpText="Select a date within 2024"
  />
);

Initial Values

Set an initial value using the value attribute. The format depends on the mode:

  • Date mode: YYYY-MM-DD
  • Time mode: HH:MM
  • Datetime mode: YYYY-MM-DDTHH:MM
<ol-datetime-picker
  mode="datetime"
  label="Default Appointment"
  value="2024-06-15T14:30"
></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <OlDatetimePicker
    mode="datetime"
    label="Default Appointment"
    value="2024-06-15T14:30"
  />
);

Sizes

Datetime pickers are available in three sizes: small, medium, and large. 



<ol-datetime-picker label="Small" size="small" mode="date"></ol-datetime-picker>
<br />
<ol-datetime-picker label="Medium" size="medium" mode="date"></ol-datetime-picker>
<br />
<ol-datetime-picker label="Large" size="large" mode="date"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <>
    <OlDatetimePicker label="Small" size="small" mode="date" />
    <br />
    <OlDatetimePicker label="Medium" size="medium" mode="date" />
    <br />
    <OlDatetimePicker label="Large" size="large" mode="date" />
  </>
);

Filled Style

Add the filled attribute to draw a filled datetime picker.

<ol-datetime-picker label="Filled datetime picker" filled mode="date"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => <OlDatetimePicker label="Filled datetime picker" filled mode="date" />;

Pill Style

Use the pill attribute to give datetime pickers rounded edges.

<ol-datetime-picker label="Pill datetime picker" pill mode="date"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => <OlDatetimePicker label="Pill datetime picker" pill mode="date" />;

Disabled

Use the disabled attribute to disable the datetime picker.

<ol-datetime-picker label="Disabled" disabled mode="date" value="2024-06-15"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => <OlDatetimePicker label="Disabled" disabled mode="date" value="2024-06-15" />;

Readonly

Use the readonly attribute to make the datetime picker readonly. The user can view the calendar but cannot change the value. 

<ol-datetime-picker label="Readonly" readonly mode="date" value="2024-06-15"></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => <OlDatetimePicker label="Readonly" readonly mode="date" value="2024-06-15" />;

Clearable

Use the clearable attribute to add a clear button that appears when the datetime picker has a value. This allows users to easily reset the selection. 



<ol-datetime-picker
  label="Clearable Date"
  mode="date"
  value="2024-06-15"
  clearable
  help-text="Click the clear button to remove the selected date"
></ol-datetime-picker>
<br />
<ol-datetime-picker
  label="Clearable Time"
  mode="time"
  value="14:30"
  clearable
  help-text="Click the clear button to remove the selected time"
></ol-datetime-picker>
<br />
<ol-datetime-picker
  label="Clearable DateTime"
  mode="datetime"
  value="2024-06-15T14:30"
  clearable
  help-text="Click the clear button to remove the selected date and time"
></ol-datetime-picker>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => (
  <>
    <OlDatetimePicker
      label="Clearable Date"
      mode="date"
      value="2024-06-15"
      clearable
      helpText="Click the clear button to remove the selected date"
    />
    <br />
    <OlDatetimePicker
      label="Clearable Time"
      mode="time"
      value="14:30"
      clearable
      helpText="Click the clear button to remove the selected time"
    />
    <br />
    <OlDatetimePicker
      label="Clearable DateTime"
      mode="datetime"
      value="2024-06-15T14:30"
      clearable
      helpText="Click the clear button to remove the selected date and time"
    />
  </>
);

Custom Value Formatter

You can customize how the selected value is displayed in the input using the formatter property. 

<div class="datetime-picker-formatting">
  <ol-datetime-picker label="Custom format" mode="date"></ol-datetime-picker>
</div>

<script>
  const picker = document.querySelector('.datetime-picker-formatting ol-datetime-picker');
  picker.formatter = (value) => {
    if (!value) return '';
    const date = new Date(value);
    return date.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };
</script>

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

const App = () => {
  const customFormatter = (value) => {
    if (!value) return '';
    const date = new Date(value);
    return date.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  return (
    <OlDatetimePicker
      label="Custom format"
      mode="date"
      formatter={customFormatter}
    />
  );
};

Form Validation

Datetime pickers support standard form validation attributes like required.


Submit 
<form class="datetime-validation">
  <ol-datetime-picker
    label="Event Date"
    name="event-date"
    mode="date"
    required
    help-text="Please select an event date"
  ></ol-datetime-picker>
  <br />
  <ol-button type="submit" variant="primary">Submit</ol-button>
</form>

<script>
  const form = document.querySelector('.datetime-validation');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    alert(`Event date: ${formData.get('event-date')}`);
  });
</script>

import { useState } from 'react';
import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';
import OlButton from '@onlive.site/ui/dist/react/button';

const App = () => {
  const [eventDate, setEventDate] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Event date: ${eventDate}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <OlDatetimePicker
        label="Event Date"
        name="event-date"
        mode="date"
        required
        value={eventDate}
        onOlChange={(event) => setEventDate(event.target.value)}
        helpText="Please select an event date"
      />
      <br />
      <OlButton type="submit" variant="primary">Submit</OlButton>
    </form>
  );
};

[component-metadata:ol-datetime-picker]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.42/cdn/components/datetime-picker/datetime-picker.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.onlive.site/@onlive.site/ui@1.8.42/cdn/components/datetime-picker/datetime-picker.js';

To import this component using a bundler:

import '@onlive.site/ui/dist/components/datetime-picker/datetime-picker.js';

To import this component as a React component:

import OlDatetimePicker from '@onlive.site/ui/dist/react/datetime-picker';

Slots

Name Description
label The datetime picker’s label. Alternatively, you can use the label attribute.
help-text Text that describes how to use the datetime picker. Alternatively, you can use the help-text attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name The name of the datetime picker, submitted as a name/value pair with form data. string ''
value The current value of the datetime picker, submitted as a name/value pair with form data. string ''
size The datetime picker’s size. 'small' | 'medium' | 'large' 'medium'
filled Draws a filled datetime picker. boolean false
pill Draws a pill-style datetime picker with rounded edges. boolean false
label The datetime picker’s label. If you need to display HTML, use the label slot instead. string ''
helpText
help-text 		The datetime picker’s help text. If you need to display HTML, use the help-text slot instead. string ''
placeholder Placeholder text to show as a hint when the input is empty. string ''
disabled Disables the datetime picker. boolean false
readonly Makes the datetime picker readonly. boolean false
clearable Adds a clear button when the input is not empty. boolean false
mode The picker mode. Can be ‘datetime’ (default), ‘date’, or ‘time’. - ‘datetime’: Shows both date and time selection - ‘date’: Shows only date selection - ‘time’: Shows only time selection 'datetime' | 'date' | 'time' 'datetime'
timeFormat
time-format 		The time format. Can be ’12′ for 12-hour format or ‘24’ for 24-hour format. '12' | '24' '24'
minDate
min-date 		The minimum date that can be selected (ISO 8601 format: YYYY-MM-DD). FormatDateString | null null
maxDate
max-date 		The maximum date that can be selected (ISO 8601 format: YYYY-MM-DD). FormatDateString | null null
required Whether the input is required for form validation. boolean false
formatter A function that transforms the display value. Receives the value and should return a string. (value: string) => string -
validity Gets the validity state object - -
validationMessage Gets the validation message - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ol-change onOlChange Emitted when the datetime value changes. -
ol-input onOlInput Emitted when the input value changes. -
ol-focus onOlFocus Emitted when the component receives focus. -
ol-blur onOlBlur Emitted when the component loses focus. -

Learn more about events.

Methods

Name Description Arguments
checkValidity() Checks for validity but does not show a validation message. Returns true when valid and false when invalid. -
getForm() Gets the associated form, if one exists. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. Pass an empty string to restore validity. message: string
focus() Sets focus on the datetime picker. options: FocusOptions
blur() Removes focus from the datetime picker. -
select() Selects all the text in the input. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
input The input element.
calendar-button The calendar icon button.
dropdown The dropdown container.
calendar The calendar component.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <ol-calendar>
  • <ol-dropdown>
  • <ol-icon>
  • <ol-icon-button>
  • <ol-input>
  • <ol-popup>