Calendar
The calendar component provides a way to render dates for selection or presentation purposes.
We use as a base JQuery UI changing its style with the characteristics of our design system.
<div class="pforms"
<div class="title">
<h1>Title</h1>
</div>
<div class="form-field vertical">
Select or Inputs code here
</div>
<div class="form-field vertical double">
Double select code here
</div>
<div class="form-field">
Checkbox or Radio code here
</div>
<div class="form-field horizontal">
Buttons code here
</div>
</div>
General guidelines
- Ensure that locale is appropriately set so that users see dates and times in a familiar format.
- If helper text is necessary, place helper text above the input (below the area label).
- Use a concise label to indicate what the date and time selections refer to.
1
Month and Year: Indicates the menu where a date may be selected.
2
Controls: Allows the user to navigate through past and future time frames.
3
Days: Shows the available days to select.
4
Selected Option: Indicates the user the option selected.
- Use date and time pickers when you are asking the user for a time or date, or for scheduling tasks.
- Use hover states to preview a user’s selection.
- Do not use a complex date picker every time you ask for any date.
- Don't use a calendar picker to prompt for dates in the distant past or future, such as a date of birth.
- Don't use the same style for hover and selected states.