Datepicker

JS File

Date picker is a way to pick dates

Calendar picker

Draft

Calendar picker allows user to select a date from calendar view or enter a date with text.

<label for="date_input" class="sba-c-label sba-u-margin-top--0">Enter a date</label>
<p class="sba-c-form-hint" id="date_input_hint">For example, MM/DD/YYYY</p>
<input type="text" id="date_input" class="sba-c-input js-calendar-picker js-format-as-date" aria-describedby="date_input_hint" /> 

Guidance

• Calendar picker calendar is built with jQuery UI
• The class name js-calendar-picker is used to create the calendar picker
• Adding js-format-as-date class name formats date properly as user types. Also prevents user from entering invalid date
• Calendar pickers should be used for all date fields

Text only date pickers and HTM5 native field

These items will be deprecated once the calendar picker has been accepted.f

<label for="date_input" class="sba-c-label">Enter a date</label>
<p class="sba-c-form-hint" id="date_input_hint">For example, MM/DD/YYYY</p>
<input type="date" id="date_input" class="sba-c-input" aria-describedby="date_input_hint" pattern="(0[1-9]|1[012]).(0[1-9]|1[0-9]|2[0-9]|3[01]).[0-9]{4}" required />

Guidance

The date input does not have a wide range of browser support. For browsers that do not support the date input, the fallback is a text field that is recieves formatting as the user types.

• You must use a form hint with an id. The form input must use an aria-describedby attribute to refer back to the hint's id. This provides context in an accessible way as a fallback to browsers that do not support date inputs.
• The pattern attribute provides client-side validation. However, you must always use server-side validation.
• Do not use the input-width utility on <input type="date"> because the spinner and calendar dropdown cuts off the date in Chrome.
• Avoid using min and max attributes on the date picker, as some browsers have difficulty interpreting them on date inputs. If you need code>min and max attributes, see the example below.

Other considerations

• See note above about code>min and max attributes. This could make selecting a date range difficult.
• <input type="date"> is not supported in Safari or IE. Instead, the browser will treat as a text input (though formatted with JS).
• Mobile browsers may have a scrollwheel implementation for <input type="date">, and keyboard entry not be available.

Date as formatted text field

If you need to have min and max attributes, an alternative is available. If that is the case, use a text input. This is also an example of how a date field would funtion on a browser that does not support the date input.

In this instance, if you add a class name of js-format-as-date to a text field, the input will be automatically formatted as the user types.

<label for="date_input2" class="sba-c-label sba-u-margin-top--0">Enter a date</label>
<p class="sba-c-form-hint" id="date_input_hint2">For example, MM/DD/YYYY</p>
<input type="text" id="date_input2" class="sba-c-input sba-u-input-width--16 js-format-as-date" aria-describedby="date_input_hint2" pattern="(0[1-9]|1[012])\s?.\s?(0[1-9]|1[0-9]|2[0-9]|3[01])\s?.\s?[0-9]{4}" required />