• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Date Picker

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/inputgroup@3.0.3-alpha.0
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="true">
  <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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
        <use xlink:href="#spectrum-icon-18-Calendar" />
      </svg>
  </button>
</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="true">
  <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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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-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 type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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-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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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-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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </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-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 type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
      <use xlink:href="#spectrum-icon-18-Calendar" />
    </svg>
  </button>
</div>

Migration Guide

Combobox markup change

See the Combobox migration guide for migration information.

New Picker markup

Instead of a .spectrum-FieldButton, Combobox now uses .spectrum-Picker. See Picker migration guide for details.

Change workflow icon size to medium

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

No results found

Try another search term.