221 lines
15 KiB
YAML
221 lines
15 KiB
YAML
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>
|