Date picker

<bolt-date-picker label="Date picker"></bolt-date-picker>

<bolt-date-picker
    label="Date picker"
    error="Invalid date">
</bolt-date-picker>

<bolt-date-picker
    label="Date picker"
    invalid>
</bolt-date-picker>

Specify disabled dates to prevent users from clicking on those dates within the datepicker.
Example dates used: "07/15/2026, 07/16/2026"

<bolt-date-picker
    label="Date picker"
    disableddates="07/15/2026, 07/16/2026">
</bolt-date-picker>

Use min and max values to control how far the date picker will navigate into the past or future, and disable dates outside the specified range.
Min example date used: "08/30/2026"
Max example date used: "today"

<bolt-date-picker
    label="Date picker"
    min="08/30/2026">
</bolt-date-picker>

<bolt-date-picker
    label="Date picker"
    max="today">
</bolt-date-picker>

While disableddates, min, and max restrict which dates can be clicked on within the calendar, they do not prevent users from manually entering invalid dates.

Like other Bolt form elements, <bolt-date-picker> does not apply its own validation, but instead provides visual error and invalid states for use with validation logic.

Up to three sets of important dates may be specified by providing an array of dates along with a description for each set.
Example dates used: "08/28/2026, 08/29/2026" (One), "07/15/2026" (Two), "10/02/2026" (Three)

<bolt-date-picker
    label="Date picker"
    datesonelabel="Bill Due Date"
    datesone="08/28/2026, 08/29/2026">
</bolt-date-picker>

<bolt-date-picker
    label="Date picker"

    datesonelabel="Bill Due Date"
    datesone="08/28/2026, 08/29/2026"

    datestwolabel="Holiday"
    datestwo="07/15/2026">
</bolt-date-picker>

<bolt-date-picker
    label="Date picker"

    datesonelabel="Bill Due Date"
    datesone="08/28/2026, 08/29/2026"

    datestwolabel="Holiday"
    datestwo="07/15/2026"
    
    datesthreelabel="Bill Scheduled"
    datesthree="10/02/2026">
</bolt-date-picker>

<bolt-date-picker label="Date picker">
</bolt-date-picker>

The <bolt-date-picker> element wraps the <bolt-textfield> element in order to attach a date picker.

• label (required)
  • The label text for the input.
• min: (optional) [String: "today" | format=mm/dd/yyyy]
  • The earliest date that can be viewed.
• max: (optional) [String: "today" | format=mm/dd/yyyy]
  • The latest date that can be viewed.
• disableddates: (optional)
  • A list of comma-separated dates, each with the format of mm/dd/yyyy or the "today" keyword.
• pickerposition: (optional)
  • Where the calendar is rendered relative to the input vertically and horizontally. In the format of "[vertical] [horizontal]".
  • Vertical can be auto, above or below (required).
  • Horizontal can be left, center or right. Default: "auto right"
• datatestinput optional property to configure the data-test value on the underlying <input> element. Default is input.
• datatestbutton optional property to configure the data-test value on the underlying <button> element. Default is button.

Support is included for up to three important date types and can be used with the following parameters:

1. First Type
   • datesonelabel: the label used to describe the first important date type (e.g., "Bill Due Date").
   • datesone: an array of dates separated by commas in the format of mm/dd/yyyy or the "today" keyword.
2. Second Type
   • datestwolabel: the label used to describe the second important date type (e.g., "Bill Scheduled").
   • datestwo: an array of dates separated by commas in the format of mm/dd/yyyy or the "today" keyword.
3. Third Type
   • datesthreelabel: the label used to describe the third important date type (e.g., "Holiday").
   • datesthree: an array of dates separated by commas in the format of mm/dd/yyyy or the "today" keyword.

The <bolt-date-picker> element supports the use of <bolt-contextual-help> via the help slot placeholder. For more information and to see other options visit the contextual help page.

The following parameters are supported for pass-thru to the underlying <bolt-textfield> element:

(See the "Code reference" tab of the Text field component documentation for more details about each parameter.)

• arialabel
• arialabelledby
• disabled
• error
• instructionaltext
• invalid
• optionaltext
• required

• [data-test="input"] targets primary <input> element

  • Configurable via the datatestinput property

• [data-test="button"] targets <button> element (calendar icon button)

  • Configurable via the datatestbutton property

• Date picker gives a user access to a calendar widget with a pre-determined range of dates.
• A Date picker should always be combined with a field label for context.
• Date picker should allow the user the option to type a date. Do not require them to use the date picking widget to enter a date.
• A calendar Icon should trigger the opening of the Date picker calendar modal.
• The calendar Icon should be replaced with an x-mark Icon to trigger closing the calendar modal.
• Typing into the Text field attached to a Date picker should not trigger the opening of the calendar modal.
• Invalid dates cannot be selected with a Date picker; unavailable dates are disabled.
• Input validation and error messaging should, depending on the context of use, occur after a user either:
  • submits a form (form-level validation).
  • enters one or more characters (delayed onInput, mid-form validation).
  • exits the field (onBlur, frontend validation only).
• When using Date picker, both the Text field and Date picker Button should be disabled or enabled in tandem.
• Error and disabled states should not be used at the same time.

• When a user needs to enter a single date.
• Use Date picker to offer access to a calendar widget marked with restricted, reserved or booked dates (if not all dates are available for selection.)

• Avoid if users do not need to select a date.
• A Date picker should never be used without being attached to a Text field.

• Avoid using to enter a person's date of birth. It is easier for a user to enter a well-known date via typing directly than choosing from a Date picker. Use a Text field instead.
• Do not use Date picker to enter only a month, day, or year. Instead use Select.

• Text for a Date picker field label should use sentence case.
• The Text field can be used to write out a date using the format: mm/dd/yyyy.
• The Text field should not have a placeholder; use a label to describe the date type and instructional text to spell out the correct format.

• The Date picker should be accessible via the Tab key.
• When focused, pressing Enter or Space should open the Date picker calendar.
• Navigate calendar:
  • Arrow keys should navigate through dates within the calendar.
    • Up and down arrow keys should move the selection by one week.
    • Left and right arrow keys should move the selection by one day.
  • Month and year dropdowns:
    • Tab and Shift+Tab should navigate to the month or year dropdown menu when the calendar is open.
    • Once focused:
      • Up and down arrow keys should open the dropdown.
      • Up and down arrow keys should move through the options in the dropdown.
      • Pressing Enter or Space should select the highlighted option and close the dropdown.
      • Pressing Esc should close the dropdown without making a selection.
  • Once the desired date is focused, pressing Enter should select it.
    • The selected date should populate in the input field, and the calendar should close.
  • Pressing Esc should close the Date picker without selecting a date.
    • When closed, the focus should return to the date input field.

• Form field labels should always remain visible to help users understand what they're working with. Placeholder text, or text inside the form field, should not be used as a label because it disappears when the user starts typing. This can be confusing, especially for people with cognitive disabilities who might forget what the field is for. It's also a problem for those who use speech-to-text tools because it makes it hard to understand what to say to activate the field.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.