You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs
Date Range Picker
Actions and Inputs
Date Range Picker
The Date Range Picker allows a user to chose a date range visually from a calendar, by typing a date into the input fields, or using a custom options list.
input={{placeholder:"Select the event's date range"}}
onChange={(v)=>setDate(v)}
/>
</Form>
)}
</State>
Error
For each input, errors for exceeding min or max date is handled internally using a tooltip. For errors that are external, use Form.DateRangePicker's error prop to pass in error and the message.
The options that are out of min max range will be disabled. This example has the same options with min and max date set to only make first option - Last 7 Days - in range.
Labels can have a help icon with a tooltip to provide additional context to a label.
Help
<Stateinitial={undefined}>
{([date, setDate])=>(
<Form>
<Form.DateRangePicker
label="Date Label"
value={date}
labelProps={{
help:'This is help text',
direction:'r',
}}
onChange={(v)=>setDate(v)}
/>
</Form>
)}
</State>
Required and Optional
A visual indicator can be applied on a Date Picker's label.
<Form>
<Stateinitial={undefined}>
{([date, setDate])=>(
<Form.DateRangePicker
label="Date Label"
value={date}
labelProps={{
required:true,
}}
onChange={(v)=>setDate(v)}
/>
)}
</State>
<Stateinitial={undefined}>
{([date, setDate])=>(
<Form.DateRangePicker
label="Date Label"
value={date}
labelProps={{
optional:true,
}}
onChange={(v)=>setDate(v)}
/>
)}
</State>
</Form>
Multiple Calendar View
<Stateinitial={undefined}>
{([date, setDate])=>(
<Form>
<DateRangePicker
open
disableCloseOnClickOutside
value={date}
onChange={(v)=>setDate(v)}
dropdown={{views:2}}
/>
</Form>
)}
</State>
Accessibility
The user should be able to choose a date by typing into the start and end date input or by selecting a date from the calendar. The user should be able to use either method.
Keyboard Support
When focus is on the trigger, press space to open and escape to close the calendar.
When picker is open, use tab / shift + tab to change focus between inputs, calendar, and options.
When focus is on the calendar:
use the arrow keys to traverse through dates
use enter to select a date
use space to apply, when Apply button is enabled
use page up and page down to change months
use cmd + page up and cmd + page down to change the view scope between month, year, and decade.
Content Guidelines
Most of the content guidelines from Forms applies to the Date Picker.
Use a label for all input fields
A label is a short, meaningful description that clearly indicates what the user is expected to enter. Labels should be 1 to 3 words and written in title case. Labels should primarily be nouns. Avoid using labels as CTAs. A label is not inline help and shouldn’t be used to provide instruction.
Follow capitalization rules
Input labels should be written in title case.
Show hints, formatting, and requirements
Inline help should explain the situation for needing a date range.