Date

Single Date
Date Range

Single Date

Single date controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div>.

Style	Attribute	Value	Standard Example	Inline Example

Standard			Date:	Date:
Disabled	class disabled	disabled disabled	Date:	Date:
Invalid	class	invalid	Date:	Date:
Read Only	class readonly	readonly readonly	Date:	Date:

Code:


      <div class="form-group date">
        <label class="control-label" for="<!-- Start input control ID goes here -->"><!-- Start label text goes here -->:</label>
        <div class="control-input">
          <input type="text" class="form-control date" id="<!-- Start input control ID goes here -->" name="inline_date_field1c" placeholder="Enter date" value="">
          <span class="add-on"><span class="glyphicon glyphicon-calendar-icon"></span></span>
        </div>
      </div>

The date value is required to be in dd/mm/yyyy format to be correctly recognised.

There is a hidden input that takes a list of comma separated dd/mm/yyyy values which marks the date as unavailable.

Date Range

Date range controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to both of the <input> tags, and classes should follow on from the surrounding <div>.

Style	Attribute	Value	Standard Example	Inline Example

Standard			Start Date: End Date:	Start Date: End Date:
Disabled	class disabled	disabled disabled	Start Date: End Date:	Start Date: End Date:
Invalid	class	invalid	Start Date: End Date:	Start Date: End Date:
Read Only	class readonly	readonly readonly	Start Date: End Date:	Start Date: End Date:

Code:


      <div class="form-group date-range">
        <label for="<!-- Start input control ID goes here -->" class="control-label"><!-- Start label text goes here -->:</label>
        <div class="control-input">
          <input type="text" class="form-control date-range-start" id="<!-- Start input control ID goes here -->" name="<!-- Start input control name goes here -->" placeholder="Enter start date" value="<!-- Start input control value goes here -->">
          <span class="add-on">
            <span class="glyphicon glyphicon-calendar-icon"></span>
          </span>
        </div>
        <div class="form-control-spacer"></div>
        <label for="<!-- End input control ID goes here -->" class="control-label"><!-- End label text goes here -->:</label>
        <div class="control-input">
          <input type="text" class="form-control date-range-end" id="<!-- End input control ID goes here -->" name="<!-- End input control name goes here -->" placeholder="Enter end date" value="<!-- End input control value goes here -->">
          <span class="add-on">
            <span class="glyphicon glyphicon-calendar-icon"></span>
          </span>
          <input type="hidden" class="dates-disabled" value="<!-- Input control excluded values go here -->"/>
        </div>
      </div>

The date value is required to be in dd/mm/yyyy format to be correctly recognized.

There is a hidden input that takes a list of comma separated dd/mm/yyyy values which marks the date as unavailable.

Causeway Style

Notifications

Date

Single Date

Code:

Date Range

Code: