<h2>What&#39;s new in v3</h2>
<ul>
<li><p><strong>Padding:</strong>  Adjusted to 8px for small date picker and 16px for large.</p>
</li>
<li><p><strong>Error state:</strong></p>
<ul>
<li><strong>Error icon:</strong> Moved to be closer to the error message, leaving space for trailing icons such as dropdown.</li>
<li><strong>Error input</strong>: Color changed to text primary color.</li>
</ul>
</li>
<li><p><strong>Calendar action:</strong> Adjusted to be an icon button.</p>
</li>
<li><p><strong>Font style:</strong> Semibold for weekdays of the current month.</p>
</li>
<li><p><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</p>
</li>
</ul>
<h2>When to use</h2>
<p>Date pickers let users select a date or date range without typing. They reduce errors and make choosing dates easier.</p>
<p>Use the date picker to:</p>
<ul>
<li>Select a specific date or a range of dates in a form or workflow.</li>
<li>Schedule events, deliveries, appointments, or timelines.</li>
<li>Ensure consistent date formatting across an experience.</li>
</ul>
<p>Date pickers and text inputs both capture user information, but they serve different purposes. Choose the component that best aligns with the type of data you need to collect.</p>
<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>
<p>The date picker component combines a text input with an expandable calendar icon button.</p>
<details data-name='image-block' data-images='[{"alt":"The parts of a date picker component, labeled 1 through 9.","caption":"1. **Label:** describes the purpose of the field.\n2. **Text field:** the input area where the date appears or can be typed.\n3. **Calendar:** an icon button that opens the calendar menu.\n\nHeader\n\n4. **Navigation:** controls for switching months and years. May include dropdowns, arrow buttons, or both. \n\nBody\n\n5. **Calendar menu:** displays the days for the selected month and year.\n6. **Today’s date:** marked with a small indicator.\n7. **Selected date(s):** sshown with a filled blue container.\n\nFooter\n\n8. **Action buttons:** buttons to confirm or cancel the selection.\n9. **Today shortcut:** optional button that select today’s date.","url":"https://dds.dell.com/site/v3/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 and select a date 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.

### Single date selection

Use this pattern when the user needs to pick one specific date for a task or form field. It’s common in situations like choosing a date of birth, selecting a delivery date, scheduling a reminder, or setting the date for a one‑day event.

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

<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/v3/components/date-picker/date-picker-usage-single.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The date picker is available in two sizes:

* **Large:** Use when space and experience allow.
* **Small:** Use in compact layouts where a large date picker would not be applicable.

Only the input height changes. Width and calendar size remain the same for both.rs.

<details data-name='image-block' data-images='[{"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/v3/components/date-picker/date-picker-size-large.png"},{"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/v3/components/date-picker/date-picker-size-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## 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/v3/components/date-picker/date-picker-layout-placement.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Specifications

When using two or more date pickers, whether placed horizontally or stacked, it’s important to apply consistent padding to maintain alignment. The default padding values are the same for both large and small components:

* **Stacked:** 24 px of padding
* **Side by side:** 16 px of padding

All component specifications are measured in pixels and follow the default layout defined in the form pattern. Any updates related to density should follow the [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/v3/components/date-picker/date-picker-layout-2.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/v3/components/date-picker/date-picker-layout-3.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/v3/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--docs).

### Error states

The date picker shows an error state when the user enters an invalid or incomplete date. In this state, the input field displays a red border and shows a short message with an error icon explaining what needs to be fixed.

Common reasons include using the wrong format, choosing a date outside the allowed range, or leaving a required field empty.

The error message should be clear and helpful so the user can quickly correct the value.

<details data-name='image-block' data-images='[{"alt":"Date picker showing an error state.","caption":"Date picker showing an error state.","url":"https://dds.dell.com/site/v3/components/date-picker/date-picker-interaction-error-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## 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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                              | Collection | CSS var                                        | Preview    |
| --------------------------------- | ---------- | ---------------------------------------------- | ---------- |
| spacing/xs                        | Semantic   | `var(--dds-spacing-xs)`                        | \-         |
| input/gap/sm                      | Component  | `var(--dds-input-gap-sm)`                      | \-         |
| input/padding-horizontal/sm       | Component  | `var(--dds-input-padding-horizontal-sm)`       | \-         |
| input/height/sm                   | Component  | `var(--dds-input-height-sm)`                   | \-         |
| border/radius/xs                  | Semantic   | `var(--dds-border-radius-xs)`                  | \-         |
| border/width/xs                   | Semantic   | `var(--dds-border-width-xs)`                   | \-         |
| color/background/SURFACE/neutral  | Semantic   | `var(--dds-color-background-surface-neutral)`  | \#FFFFFF   |
| color/border/NEUTRAL/pale         | Semantic   | `var(--dds-color-border-neutral-pale)`         | \#C5D4E3   |
| color/text/tertiary               | Semantic   | `var(--dds-color-text-tertiary)`               | \#5C6E7E   |
| button/size/xs                    | Component  | `var(--dds-button-size-xs)`                    | \-         |
| button/background/ghost-rest      | Component  | `var(--dds-button-background-ghost-rest)`      | \#40586D00 |
| icon/size/xs                      | Component  | `var(--dds-icon-size-xs)`                      | \-         |
| color/text/BRAND/rest             | Semanticv  | `var(--dds-color-text-brand-rest)`             | \#0063B8   |
| date-picker/calendar/gap          | Component  | `var(--dds-date-picker-calendar-gap)`          | \-         |
| date-picker/calendar/padding      | Component  | `var(--dds-date-picker-calendar-padding)`      | \-         |
| date-picker/calendar/control/gap  | Component  | `var(--dds-date-picker-calendar-control-gap)`  | \-         |
| file-input/file/padding-vertical  | Component  | `var(--dds-file-input-file-padding-vertical)`  | \-         |
| color/text/primary                | Semantic   | `var(--dds-color-text-primary)`                | \#1D2C3B   |
| color/text/NEUTRAL/rest           | Semantic   | `var(--dds-color-text-neutral-rest)`           | \#1D2C3B   |
| spacing/sm                        | Semantic   | `var(--dds-spacing-sm)`                        | \-         |
| button/size/sm                    | Component  | `var(--dds-button-size-sm)`                    | \-         |
| icon/size/sm                      | Component  | `var(--dds-icon-size-sm)`                      | \-         |
| date-picker/grid/gap/row          | Component  | `var(--dds-date-picker-grid-gap-row)`          | \-         |
| date-picker/grid/gap/column       | Component  | `var(--dds-date-picker-grid-gap-column)`       | \-         |
| date-picker/date/size             | Component  | `var(--dds-date-picker-date-size)`             | \-         |
| size/4                            | Global     | `var(--dds-size-4)`                            | \-         |
| border/radius/rounded             | Semantic   | `var(--dds-border-radius-rounded)`             | \-         |
| color/border/BRAND/base           | Semantic   | `var(--dds-color-border-brand-base)`           | \#00468B   |
| button/gap/sm                     | Component  | `var(--dds-button-gap-sm)`                     | \-         |
| button/padding-horizontal/sm      | Component  | `var(--dds-button-padding-horizontal-sm)`      | \-         |
| color/border/NEUTRAL/base         | Semantic   | `var(--dds-color-border-neutral-base)`         | \#1D2C3B   |
| color/background/BRAND/base-rest  | Semantic   | `var(--dds-color-background-brand-base-rest)`  | \#0672CB   |
| color/text/neutral                | Semantic   | `var(--dds-color-text-neutral)`                |            |
| color/border/ERROR/base           | Semantic   | `var(--dds-color-border-error-base)`           | \#8C161F   |
| helper-text/gap                   | Component  | `var(--dds-helper-text-gap)`                   | \-         |
| color/text/ERROR/rest             | Semantic   | `var(--dds-color-text-error-rest)`             | \#BB2A33   |
| input/gap/lg                      | Component  | `var(--dds-input-gap-lg)`                      | \-         |
| input/padding-horizontal/lg       | Component  | `var(--dds-input-padding-horizontal-lg)`       | \-         |
| input/height/lg                   | Component  | `var(--dds-input-height-lg)`                   | \-         |
| color/text/inactive               | Semantic   | `var(--dds-color-text-inactive)`               | \#B6B6B6   |
| color/background/SURFACE/inactive | Semantic   | `var(--dds-color-background-surface-inactive)` | \#E1E1E1   |
| color/border/INACTIVE/base        | Semantic   | `var(--dds-color-border-inactive-base)`        | \#7E7E7E   |
| color/background/SURFACE/primary  | Semantic   | `var(--dds-color-background-surface-primary)`  | \#FFFFFF   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-date-picker--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-date-picker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-date-picker--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-date-picker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-date-picker--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-date-picker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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

Date Picker