Single Date Picker

The date picker allows users select a single date from a calendar. They can also navigate from one month to another, when selecting a date.

Unless used as the inline variant, the single date picker consists of two components: the trigger and the date picker itself. Valid trigger components would be a Button or an Input. The trigger component should always reflect the currently selected date, or a placeholder text (date format in case of an input, call to action label in case of button) if no selection has been made yet.

note

For a date range selection refer to the DateRangePicker

Usage Rules

Do

• Use if you want to enter a single date

Don't

• Use if you want to enter a date range. Instead of using two date pickers to accomplish a date range selection, use the dedicated DateRangePicker
• Use if you want to enter a specific known value, such as a birthday. Users will likely want to type that value instead of hunting for it in a date picker.

Example

Live Editor

function SingleDateInput() { const [date, setDate] = useState(null); // Get the current date at midnight const today = new Date(); return ( <> <p style={{ marginBottom: Spacing15 }}> Selected date: {date ? date.toLocaleDateString() : '–'} </p> <SingleDatePicker date={date} onChange={(date) => { setDate(date); }} minDate={today} /> </> ); }

function SingleDateInput() {
  const [date, setDate] = useState(null);

  // Get the current date at midnight
  const today = new Date();

  return (
    <>
      <p style={{ marginBottom: Spacing15 }}>
        Selected date: {date ? date.toLocaleDateString() : '–'}
      </p>
      <SingleDatePicker
        date={date}
        onChange={(date) => {
          setDate(date);
        }}
        minDate={today}
      />
    </>
  );
}

Result

Loading...

Variants

Localization

The Single Date Picker has localization support. To make localization active, you can use the locale prop.

info

Supported languages:

English (Default), Chinese, French, German, Japanese, Korean, Portuguese, Russian, Spanish, Turkish, Vietnamese

Live Editor

function SingleDateInput() { const [date, setDate] = useState(null); // Get the current date at midnight const today = new Date(); return ( <> <p style={{ marginBottom: Spacing15 }}> Selected date: {date ? date.toLocaleDateString() : '–'} </p> <SingleDatePicker date={date} onChange={(date) => { setDate(date); }} minDate={today} locale="de" /> </> ); }

function SingleDateInput() {
  const [date, setDate] = useState(null);

  // Get the current date at midnight
  const today = new Date();

  return (
    <>
      <p style={{ marginBottom: Spacing15 }}>
        Selected date: {date ? date.toLocaleDateString() : '–'}
      </p>
      <SingleDatePicker
        date={date}
        onChange={(date) => {
          setDate(date);
        }}
        minDate={today}
        locale="de"
      />
    </>
  );
}

Result

Loading...

Custom Current Date

You can pass currentDate. Its value will be assigned to "today".

Live Editor

function SingleDateInput() { const [date, setDate] = useState(null); return ( <> <p style={{ marginBottom: Spacing15 }}> Selected date: {date ? date.toLocaleDateString() : '–'} </p> <SingleDatePicker date={date} onChange={(date) => { setDate(date); }} currentDate="Jan 28 2023" /> </> ); }

function SingleDateInput() {
  const [date, setDate] = useState(null);

  return (
    <>
      <p style={{ marginBottom: Spacing15 }}>
        Selected date: {date ? date.toLocaleDateString() : '–'}
      </p>
      <SingleDatePicker
        date={date}
        onChange={(date) => {
          setDate(date);
        }}
        currentDate="Jan 28 2023"
      />
    </>
  );
}

Result

Loading...

Props

Name	Type	Default
onChange * This handler will be called when a date is selected	(date: Date) => void	—
date The selected date	Date	null
minDate The earliest date the user can select	Date	—
maxDate The latest date the user can select	Date	—
currentDate The custom date to be used as the current date. If undefined, the machine current date is used.	string | number | Date	—
locale Use this prop to set localization for the date values	"tr" | "en" | "de" | "es" | "fr" | "ja" | "ko" | "pt" | "ru" | "vi" | "zh"	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Related Components

• DateRangePicker