Date Time Picker

Date Time Picker is an input field for selecting both a date and a time.

Usage
Styling

Step
Auto Open
Validation
Week Numbers
Initial Position
Internationalization (i18n)
Basic Features
Read-Only & Disabled
Style Variants
Usage Patterns
Best Practices
Related Components

Date Time Picker is an input field for selecting both a date and a time.

<DateTimePicker label="Meeting date and time" />

The date and time can be entered directly using the keyboard in the format of the current locale or through the Date Time Picker’s two overlays. The overlays open when their respective fields are clicked or any input is entered when the fields are focused.

Step

Date Time Picker’s step parameter defines the time interval in seconds between the items displayed in the time picker overlay. It also specifies the amount by which the time increases or decreases using the up and down arrow keys when the overlays are disabled.

The default step is one hour (that is, 3600). Unlike with Number Field, Date Time Picker accepts values that don’t align with the specified step.

Open in a
new tab

<DateTimePicker label="Meeting date and time" value="2020-06-12T12:30" step={60 * 30} />

Note	Use Even Steps The step must divide evenly an hour or a day. For example, "15 minutes", "30 minutes" and "2 hours" are valid steps, while "42 minutes" isn’t.

The displayed time format changes based on the step.

Open in a
new tab

<DateTimePicker label="Message received" value="2020-06-12T15:45:08" step={1} />

Step	Format
Less than 60 seconds	HH:MM:SS
Less than 1 second	HH:MM:SS:FFF

Step

Format

Less than 60 seconds

HH:MM:SS

Less than 1 second

HH:MM:SS:FFF

Note	Limit Number of Steps The overlay doesn’t appear for steps less than 900 seconds (i.e., 15 minutes) to avoid showing an impractical number of choices.

Auto Open

The overlay opens automatically when the field is focused using a pointer (i.e., mouse or touch), or when the user types in the field. You can disable this so that the overlay opens only when the toggle button or the Up/Down arrow keys are pressed.

Open in a
new tab

<DateTimePicker label="Meeting date and time" autoOpenDisabled />

Validation

Min & Max Values

You can define a min and max value for Date Time Picker if you need to restrict the input to a specific range:

Open in a
new tab

function Example() {
  const [errorMessage, setErrorMessage] = useState('');
  const [value, setValue] = useState(() => addDays(new Date(), 7));
  const [minDate] = useState(new Date());
  const [maxDate] = useState(() => addDays(new Date(), 60));

  return (
    <DateTimePicker
      label="Appointment date and time"
      helperText="Must be within 60 days from today"
      value={format(value, "yyyy-MM-dd'T'HH:00:00")}
      min={format(minDate, "yyyy-MM-dd'T'HH:00:00")}
      max={format(maxDate, "yyyy-MM-dd'T'HH:00:00")}
      errorMessage={errorMessage}
      onValueChanged={({ detail: { value: newValue } }) => {
        const date = parseISO(newValue ?? '');
        setValue(date);
        if (isBefore(date, minDate)) {
          setErrorMessage('Too early, choose another date and time');
        } else if (isAfter(date, maxDate)) {
          setErrorMessage('Too late, choose another date and time');
        } else {
          setErrorMessage('');
        }
      }}
    />
  );
}

Week Numbers

You can configure Date Time Picker to show week numbers in the date picker overlay.

Open in a
new tab

const dateTimePicker = useRef<DateTimePickerElement>(null);

useEffect(() => {
  if (dateTimePicker.current) {
    dateTimePicker.current.i18n = {
      ...dateTimePicker.current.i18n,
      firstDayOfWeek: 1,
    };
  }
}, []);

return <DateTimePicker ref={dateTimePicker} label="Meeting date and time" showWeekNumbers />;

The week numbers are displayed according to ISO-8601. They can only be displayed with the first day of the week set to Monday.

Initial Position

Date Time Picker’s initial position parameter defines which date is focused in the calendar overlay when the overlay is opened. Use this feature to minimize the need for any additional navigation or scrolling when the user’s input is expected to be between certain dates.

Open in a
new tab

<DateTimePicker label="Meeting date and time" initialPosition={startOfNextMonthISOString} />

Internationalization (i18n)

Date Time Picker allows localizing texts and labels, such as month names and button labels.

Open in a
new tab

const dateTimePickerRef = useRef<DateTimePickerElement>(null);

useEffect(() => {
  if (dateTimePickerRef.current) {
    dateTimePickerRef.current.i18n = {
      ...dateTimePickerRef.current.i18n,
      monthNames: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember',
      ],
      weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
      weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
      today: 'Heute',
      cancel: 'Abbrechen',
      dateLabel: 'datum',
      timeLabel: 'zeit',
    };
  }
}, []);

return <DateTimePicker ref={dateTimePickerRef} label="Sitzungsdatum" />;

See also how to configure a custom date format.

Basic Features

The following features, common to most input field components, are supported:

Label

The label is used to identify the input field. It supports plain-text content, and its length is limited to the width of the field. Helpers and Tooltips can be used to provide additional information that doesn’t fit into the label.

Visible labels are strongly recommended for all input fields. In cases where the built-in label cannot be used, an external element can be associated as the field’s label through the aria-labelledby attribute. Fields without any visible label should include an invisible label for assistive technologies with the aria-label attribute.

Helper

Helpers are used to provide additional information that the user may need to enter in the field, such as format requirements or explanations of the field’s purpose below the field.

A style variant is available for rendering the helper above the field.

In addition to plain text, helpers can contain components and HTML elements. However, complex and interactive content is likely to have accessibility issues.

Placeholder

The placeholder is text that’s displayed when the field is empty. Its primary purpose is to provide a short input hint (e.g., the expected format) in situations where a Helper cannot be used.

Placeholders should not be used as a replacement for a visible label. They can be mistaken for a manually entered value. See Label for alternatives to the built-in field label.

Invisible Labels (ARIA)

If the built-in label cannot be used, an invisible label should be provided for users of assistive technologies like screen readers. The date and time sub-fields can also be assigned invisible suffixes (e.g., date and time) that are appended to their invisible labels.

Open in a
new tab

<DateTimePicker
  label="Label"
  helperText="Helper text"
  datePlaceholder="Date"
  timePlaceholder="Time"
>
  <Tooltip slot="tooltip" text="Tooltip text" />
</DateTimePicker>

Read-Only & Disabled

Fields used to display values should be set to read-only mode to prevent editing. Read-only fields are focusable and visible to screen readers. They can display tooltips. Their values can be selected and copied.

Fields that are currently unavailable should be disabled. The reduced contrast of disabled fields makes them inappropriate for displaying information. They can’t be focused or display tooltips. They’re invisible to screen readers, and their values cannot be selected and copied.

Disabled fields can be useful in situations where they can become enabled based on some user action. Consider hiding fields entirely if there’s nothing the user can do to make them editable.

Open in a
new tab

<DateTimePicker readonly label="Read-only" value="2020-06-12T12:30" />

<DateTimePicker disabled label="Disabled" />

Style Variants

The following style variants can be applied:

Text Alignment

Three different text alignments are supported: left, which is the default; center; and right.

Right-alignment is recommended for numerical values when presented in vertical groups. This tends to aid interpretation and comparison of values.

Small Variant

The small variant can be used to make individual fields more compact. The default size of fields can be customized with <<https://vaadin.com/docs/styling/lumo/lumo-style-properties#,style properties>>.

Helper Above Field

The helper can be rendered above the field, and below the label.

Borders

Borders can be applied to the field surface by providing a value (e.g., 1px) to the --vaadin-input-field-border-width CSS property. This can be applied globally to all input fields using the html selector, or to individual component instances. Borders are required to achieve WCAG 2.1 level AA conformant color contrast with the default Lumo styling of fields.

You can override the default border color with the --vaadin-input-field-border-color property.

Open in a
new tab

<DateTimePicker
  theme="align-right small helper-above-field"
  label="Label"
  helperText="Helper text"
  value="2020-06-12T12:30"
  style={{ '--vaadin-input-field-border-width': '1px' } as React.CSSProperties}
/>

Usage Patterns

Date Time Range

You can accomplish a date time range picker using two Date Time Pickers.

Open in a
new tab

<div>
  <DateTimePicker
    label="Start date and time"
    value={startDateTime}
    onValueChanged={(event) => setStartDateTime(event.detail.value)}
  />

  <DateTimePicker
    label="End date and time"
    min={startDateTime}
    value={endDateTime}
    onValueChanged={(event) => setEndDateTime(event.detail.value)}
  />
</div>

To disable the days before the start date in the end date picker, you need to handle the selection in the start date picker and change the range in the end date picker.

Best Practices

Use Date Time Picker when the user needs to choose both a date and time of day. If you only need a date or time of day, use Date Picker or Time Picker, respectively.

Picking vs. Typing

The calendar overlay is useful when the user needs to choose a day that’s close to the current date or when information such as day of the week, week number, valid dates, and so on, can aid in choosing the best option.

For far off dates (i.e., years ago or years from now) and for known dates (i.e., holidays and birthdays), typing the date can be a faster and easier approach. It’s important to verify that the user can enter dates according to their locale.

Providing Input Guidance

Use a helper text to show the expected date and time formats, and placeholders to help users identify the two sub-fields, correctly.

Open in a
new tab

<DateTimePicker
  label="Select date and time"
  helperText="Format: DD/MM/YYYY and HH:MM"
  datePlaceholder="Date"
  timePlaceholder="Time"
  ref={dateTimePickerRef}
/>

Component	Usage Recommendation
Time Picker	Input field for entering or selecting a specific time.
Date Picker	Input field for entering or selecting a specific date.

Component

Usage Recommendation

Time Picker

Input field for entering or selecting a specific time.

Date Picker

Input field for entering or selecting a specific date.

Docs

Docs

Date Time Picker

Step

Auto Open

Validation

Min & Max Values

Week Numbers

Initial Position

Internationalization (i18n)

Basic Features

Read-Only & Disabled

Style Variants

Usage Patterns

Date Time Range

Best Practices

Picking vs. Typing

Providing Input Guidance

Docs

Step

Auto Open

Validation

Min & Max Values

Week Numbers

Initial Position

Internationalization (i18n)

Basic Features

Read-Only & Disabled

Style Variants

Usage Patterns

Date Time Range

Best Practices

Picking vs. Typing

Providing Input Guidance

Related Components