name: Date Picker
description: A date picker uses the input group component to display a field with a button next to it
sections:
  - name: Migration Guide
    description: |
      ### Combobox markup change
      See the [Combobox migration guide](combobox.html#migrationguide) for migration information.

      ### New Picker markup
      Instead of a `.spectrum-FieldButton`, Combobox now uses `.spectrum-Picker`. See [Picker migration guide](picker.html#migrationguide) for details.

      ### Change workflow icon size to medium
      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.

examples:
  - id: datepicker
    name: Standard
    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>
  - id: datepicker-quiet
    name: Quiet
    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>
  - id: datepicker-range
    name: Range
    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>
  - id: datepicker-range-quiet
    name: Range (quiet)
    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>