1. Components
  2. Form controls

Date range

Allows the user to select a date.

Date range orc-c-field orc-c-field--inline orc-c-field--small

Allows the user to select a date.

  • 

    <div class="orc-c-field orc-c-field--inline orc-c-field--date-range orc-c-field--small orc-js-field" data-date-picker data-date-picker-large-screen-width="585">

  <!-- date picker -->
  <span class="orc-c-field start-date orc-js-start-date">
        <label for="start-date" class="orc-c-field__label orc-u-is-vishidden">Start Date</label>
        <input type="date" class="orc-c-input orc-js-start-date" name="fromDate" id="start-date" placeholder="All Dates" min="2017-01-01" max="2019-01-01"  />
    </span>

  <span class="orc-c-field end-date orc-js-vishidden">
        <label for="end-date" class="orc-c-field__label orc-u-is-vishidden">End Date</label>
        <input type="date" class="orc-c-input" name="toDate" id="end-date" placeholder="All Dates" min="2017-01-01" max="2019-01-01"  />
    </span>

  <!-- end date picker -->

</div>
<!--end orc-c-field-->

Usage

When to use

Ideal in any circumstance where the user needs to select dates when not interacting with the booking widget: view events, filter offers by certain dates, or make changes to dates when booking a room.

When to consider an alternative

The booking widget already includes a date range selector, so use that component if providing the entire booking journey to the user.

Class Name Description 
orc-c-field
Required

Form field. Consists of a field label, field body, and input in most cases.

 
orc-c-field--inline
Required

Add to the orc-c-field element to place form inputs inside side-by-side.

 
orc-c-field--date-range
Required

Add to the orc-c-field element to style form inputs to work as a datepicker.

 
orc-js-field
JS

Add to the orc-c-field element to add form field validation. Add data-date-picker and data-date-picker-large-screen-width="585" data attributes to trigger JS and set the datepicker width on larger screens.

 
orc-js-field
JS

Add to the orc-c-field element to add form field validation. Add data-date-picker and data-date-picker-large-screen-width="585" data attributes to trigger JS and set the datepicker width on larger screens.

 
start-date
JS

Add to the orc-c-field that represents the start date. JS will target this class to use for the datepicker if JS is activated. If not, this will simply be a date input.

 
orc-c-field__label
Required

Labels for the input fields.

 
orc-u-is-vishidden
Required

Added to orc-c-field__label screen readers to still be able to read this while being visibly hidden from the user.

 
orc-c-input
Required

Form field input that is used for the start date and end date of the datepicker

 
orc-js-vishidden
Required

Used for the end date so that JS can make this visibly hidden when JS is activated. If JS fails, this is visible so the user can still fill out the date inputs and

 
orc-c-icon

Base icon class used for the field icon in this instance.

 
orc-c-field__icon

Optional icon used to display in the booking widget. Do not use for other datepicker instances.