• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Date Picker

Component status
Contribution
Last releasedJune 16, 2022
Current version@spectrum-css/inputgroup@4.0.21
View repository
GitHub
View package
npm

Usage notes

A date picker uses the input group component to display a field with a button next to it

Variants

Standard
Contribution

Show markup
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker" aria-readonly="false" aria-required="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

Read-only
Contribution

Show markup
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker" aria-readonly="true" aria-required="false">
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-readOnly">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" placeholder="Choose a date" value="02/14/2020" readonly="readonly">
  </div>
</div>

Quiet
Contribution

Show markup
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker" aria-readonly="false" aria-required="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--medium spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

Range
Contribution

Show markup
<div aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

<p/>

<div aria-invalid="true" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield is-invalid spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield is-invalid spectrum-InputGroup-textfield">
    <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right spectrum-InputGroup-button is-invalid" aria-haspopup="dialog">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

<p/>

<div aria-disabled="true" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="" disabled>
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="" disabled>
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" disabled>
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

<p/>

<div class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>
<p/>

<div class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-invalid">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-invalid">
    <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right spectrum-InputGroup-button is-invalid" aria-haspopup="dialog">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

Range (quiet)
Contribution

Show markup
<div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--medium spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

<p />

<div aria-invalid="true" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield is-invalid spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield is-invalid spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--medium spectrum-PickerButton--right spectrum-InputGroup-button is-invalid" aria-haspopup="dialog">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

<p />

<div aria-disabled="true" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="2018-10-01" disabled>
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--medium spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false" disabled>
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>
<p/>

<div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--medium spectrum-PickerButton--right spectrum-InputGroup-button" aria-haspopup="dialog" aria-label="Calendar" aria-expanded="false">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>
<p/>

<div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-invalid">
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-startField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
  </div>
  <div class="spectrum-Datepicker-rangeDash"></div>
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-invalid">
    <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  </div>
  <button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--medium spectrum-PickerButton--right spectrum-InputGroup-button is-invalid" aria-haspopup="dialog">
    <div class="spectrum-PickerButton-fill">
      <svg class="spectrum-PickerButton-icon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
    </div>
  </button>
</div>

Migration Guide

Combobox markup change

See the Combobox migration guide for migration information.

New Picker markup

Instead of a .spectrum-Picker, Combobox now uses .spectrum-PickerButton. Refer to the markup below for usage details.

Change workflow icon size to medium

Please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.

Renamed classes

  • .spectrum-Datepicker--rangeDash renamed to .spectrum-Datepicker-rangeDash

Removed elements

  • .spectrum-Datepicker-focusRing is no longer required and should be removed

No results found

Try another search term.