<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Date picker</td>
<td>The date picker component is used to select or schedule a specific date.</td>
</tr>
<tr>
<td><a href="/components/text-input/">Text input</a></td>
<td>Use the text input component for single-line, short entries. It’s commonly used for name, phone number, email entries, or for dates that are easily remembered or known by the user.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a date picker component, labeled 1 through 9.","caption":"The date picker component combines a text input with an expandable calendar menu.\n\n1. Label: describes the purpose of the field.\n2. Text field: container for entering text.\n3. Calendar: button styled with the **calendar** icon to open an expanded calendar menu.\n\n**Header**\n\n4. Navigation: button group with month and year dropdown selectors, previous and next arrow buttons, or both.\n\n**Body**\n\n5. Calendar menu: shows days within the defined month and year.\n6. Today’s date: indicated with a microdot.\n7. Selected date(s): selection is indicated by a filled blue container.\n\n**Footer**\n\n8. Application of settings: confirm or cancel button.\n9. Today: optional button to apply today’s date as the selection.","url":"https://dds.dell.com/site/components/date-picker/date-picker-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/date-input/","type":"External"},"title":"Date-input guidelines","description":"Read the Nielsen Norman Group&#39;s article on date-input form fields.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Date picker allows users to select a date by navigating through near past and future dates. Users can expand the calendar or manually use the text input to choose a date. 

A date implies having the month, day, and year (m/d/yyyy). The formatted example should appear in the [input mask](https://vanilla.delldesignsystem.com/iframe.html?viewMode=docs&id=components-text-input--basic&args=#input-mask) and label. By adding an input mask to the text input, you can show the expected date format and help users enter the date correctly if they choose to do so manually. 

The date picker is also commonly used in forms that require users to select a date, such as date of birth.

To learn more about forms, see the [form pattern](/patterns/form/).

### Single date selection

Users can open the calendar and select the desired date or enter the date manually in the text input. 

Selection is indicated by a filled blue container.

<details data-name='image-block' data-images='[{"alt":"Visual representation of a single date selection for a date picker component. ","caption":"Example of a single date selection in a date picker component.","url":"https://dds.dell.com/site/components/date-picker/date-picker-usage-single.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The date picker component comes in two sizes: small or large. Consider the experience as a whole and choose the size that best matches the relative width of the experience. 

Sizing changes the input height, but not the width.  

 The calendar remains the same size in both large and small date pickers.

<details data-name='image-block' data-images='[{"alt":"Visual representation of a small date picker component, with the calendar opened. ","caption":"Example of a small date picker component.","url":"https://dds.dell.com/site/components/date-picker/date-picker-size-small.png"},{"alt":"Visual representation of a large date picker component, with the calendar opened. ","caption":"Example of a large date picker component.","url":"https://dds.dell.com/site/components/date-picker/date-picker-size-large.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

| Size  | Use case                                                                             |
| ----- | ------------------------------------------------------------------------------------ |
| Small | Intended for use in compact areas where a large date picker would not be applicable. |
| Large | Use a large date picker if the area and the experience allows.                       |

## Layout

### Placement

The calendar opens as a dropdown menu, when the user selects the calendar icon. It opens top-left aligned and is attached to the input.

<details data-name='image-block' data-images='[{"alt":"Visual representation of how the calendar opens related to the text input. Shows the calendar closed and opened. ","caption":"Calendar menu opens attached to the text input and top left aligned to it.","url":"https://dds.dell.com/site/components/date-picker/date-picker-placement.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Specifications

When adding two or more date pickers horizontally, or stacked in a digital experience, it is important to apply the correct padding to ensure consistent alignment. In this case, the default is the same for large and small components.

Specifications for the component are measured in pixels and reflect the default layout as described in the form pattern. Any changes regarding density should follow [form pattern layout](/patterns/form/#layout) guidance.

<details data-name='image-block' data-images='[{"alt":"Visual representation of the 24 pixels space between two date picker components stacked.","caption":"Date picker components stacked with 24 pixels of padding.","url":"https://dds.dell.com/site/components/date-picker/date-picker-specifications.png"},{"alt":"Visual representation of the 16 pixels space between two date picker components horizontally placed. ","caption":"Date picker components horizontally side by side with 16 pixels of padding.","url":"https://dds.dell.com/site/components/date-picker/date-picker-specifications2.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

You can change the states of any buttons within the date picker component. To learn more about the available button states, review [button interaction documentation](/components/button/?tab=Design#interaction). 

To make changes to the individual button states within Figma, navigate to the header and footer instances in the layer's panel section.

By default, Sunday is shown in the first column of the calendar, since it’s the first day of the week (USA standard). Beginning the calendar on Monday or Saturday is available for localization purposes only. 

You must reach out to the Globalization team to determine the date format you should use in your digital experience. This will depend on the countries and regions where your product is used.

<details data-name='image-block' data-images='[{"alt":"Visual representation of grey unavailable dates appearing in the date picker component calendar.","caption":"Calendar having Sunday as the start day (default). Unavailable dates appear in gray color.\n\n1. First day of the week is marked as an unavailable date.","url":"https://dds.dell.com/site/components/date-picker/date-picker-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Date selection

If the text input field has no value, the calendar will default to the current month and year. 

Clicking on a day selects its value and closes the calendar. Once a date is selected, opening the calendar again will show the month and year of the selected date. Pressing the **today** button will enter the current day into the input and close the calendar menu. 

Select a **month** by pressing the month button, which will open a select list displaying all months, or using the previous or next arrows.

Pressing the **year** button will open a list displaying a defined range of available years to choose from:

* Only include years within the range that help users make an appropriate selection. 

  * For example, scheduling an appointment should only be available for the same day or future dates. 
* Pressing on a year preserves all other selections but may reformat the calendar to align numeric dates with their respective days. 
* The first and last year listed should be provided via listed parameters. By default, the list includes a range from 1900 to 2100. 

Speak with your engineering team about limiting the range in your dropdown to match your use case. For example, scheduling should only include future, available dates. If you’re asking for a date of birth, the top of the range should not exceed the current year.

### Unavailable dates

It is possible to make certain dates unavailable and therefore inactive in a date picker. In the Figma layers panel of your project, you can make dates inactive or "not available” visually. All exceptions must also be defined in code. 

Consult with your engineering team to determine which dates should be available for selection and which should be excluded. For more information, read about date picker in [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-date-picker--basic).

## Standards

### Accessibility

#### **Make sure the label communicates the purpose of the date being entered**

If the date being entered or chosen is specifically for a purpose (such as a start date), then that purpose should be placed in the label.

WCAG 2.2: [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels), [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html)

#### **Ensure the date picker is operable by keyboard**

The date picker needs to have a useful keyboard navigation for people who rely on a keyboard or assistive technology instead of a mouse to navigate. 

Users should be able to cycle between all interactive elements within the component by pressing the tab key and be able to use the four arrow keys (up, down, left, right) on both the month and day and the date cell selector itself. 

When the month or day dropdown is activated, keyboard functionality should follow standard W3C combobox patterns.

WCAG 2.2: [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html), [2.1.2 No Keyboard Trap](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html)

#### **Make the required date format explicitly clear, either in the label or the helper text**

Spell out the required date format for users. While placing this information in the helper text (such as “Use format m/d/yyyy”) is acceptable, bear in mind that it will become hidden if the calendar is open. When possible, place it in the label, such as “Start date (m/d/yyyy)”.

WCAG 2.2: [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html)

#### **Use meaningful copy for error text**

The error message should provide relevant assistance in helping users fix errors. Rather than unclear helper text such as “Invalid date”, explain the format required, possibly with an example.

WCAG 2.2: [3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion)

#### **Use the date formatting most commonly expected by your audience**

Depending on your location, the date order and formatting might vary, and could be separated by slashes (/), dashes (-) or another character, such as a period. Make sure that the chosen date format is expected, consistent for your audience, and clearly communicated.

### Content

#### **Label**

The label should clearly and succinctly explain the purpose of the date picker, providing contextual guidance and formatting when possible.

**Do**: Date of birth (m/d/yyyy)

**Don’t**: Date

#### **Placeholder text**

Do not rely on placeholder text to show formatting unless the formatting is applied as a mask within the input. Placeholder text disappears when the user begins typing, so they are unable to see the format for reference or for review. If applying a mask, ensure the date format is expected and consistent for your audience.

**Do**: \_\_ - \_\_ - \_\_\_\_

**Do**: – / – / ----

**Don’t**: m/d/yyyy

#### **Helper text**

Helper text can be used to show formatting, such as “Use format M/D/YYYY”. However, it is not preferred as opening the calendar will hide it from view.

**Do**: m/d/yyyy

**Don’t**: Enter a valid date

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-date-picker--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-date-picker--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/story/components-date-picker--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-date-picker--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-date-picker--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-date-picker--docs&viewMode=docs&websiteFrame=true'></details>

A date picker allows a user to specify a date through a text input or expandable calendar menu.

Date Picker

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
