EvoToolkit - v2.3.0 (Changelog)

Date Input

An abstraction of the text-input component which incorporates a calendar. This is for when you need the user to pick a date, but in a fixed, predictable format. In a perfect world, we'd just use the standard HTML5 date field, but at the moment it's not well supported across browsers.

See the calendar component for more information on how it works.

Source

Contributors

Luke Harrison
  • Overview
  • Options
  • Theming

Base

StandardDisabled

Standard date input component, with an inline calender which pushes down subsequent elements when active.

This is disabled by default. Enable block variable $component-input-calendar or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Mon Tue Wed Thu Fri Sat Sun
<div class="c-input c-input--suffix c-input--calendar"> <label class="c-type-foxtrot c-input__label" for="departure-field">Departure Date</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="departure-field" name="departure"> <div class="c-input__suffix c-input__calendar-trigger"> <svg class="c-input__icon"><use xlink:href="#calendar"></use></svg> </div> </div> <div class="c-calendar c-calendar--small c-input__calendar"> <div class="o-box o-box--spacing-small"> <div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons"> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> <div class="o-layout__item c-calendar__month-label"> <div class="c-calendar__label"> <span class="c-calendar__label-day"></span> <span class="c-calendar__label-month"></span> <span class="c-calendar__label-year"></span> </div> </div> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> </div> </div> <table class="c-calendar__main"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody></tbody> </table> </div> </div>

This component requires an icon, so copy the below symbol into your root svg element If using EvoToolkit boilerplate, this is the empty <svg> just after the opening <body>. . You can also download the SVG directly for use in design apps.

TimeDisabled

The input calendar comes with extra fields to specify a time.

This is disabled by default. Enable block variable $component-input-calendar or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Mon Tue Wed Thu Fri Sat Sun
<div class="c-input c-input--suffix c-input--calendar"> <label class="c-type-foxtrot c-input__label" for="departure-field">Departure Date</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="departure-field" name="departure"> <div class="c-input__suffix c-input__calendar-trigger"> <svg class="c-input__icon"><use xlink:href="#calendar"></use></svg> </div> </div> <div class="c-calendar c-calendar--small c-input__calendar"> <div class="o-box o-box--spacing-small"> <div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons"> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> <div class="o-layout__item c-calendar__month-label"> <div class="c-calendar__label"> <span class="c-calendar__label-day"></span> <span class="c-calendar__label-month"></span> <span class="c-calendar__label-year"></span> </div> </div> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> </div> </div> <div class="o-box o-box--spacing-micro o-box--spacing-small@sm2 c-box c-box--border c-calendar__time"> <div class="o-layout"> <div class="o-layout__item"> <div class="c-input c-input--left-label c-input--disable-state-inheritance"> <label class="c-type-foxtrot c-input__label" for="hours-field">Hours</label> <div class="c-input__wrapper"> <select id="hours-field" name="hours" class="c-input__field c-calendar__hours"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> <svg class="c-input__arrow"><use xlink:href="#arrow"></use></svg> </div> </div> </div> <div class="o-layout__item"> <div class="c-input c-input--left-label c-input--disable-state-inheritance"> <label class="c-type-foxtrot c-input__label" for="minutes-field">Minutes</label> <div class="c-input__wrapper"> <select id="minutes-field" name="minutes" class="c-input__field c-calendar__minutes"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> <option value="33">33</option> <option value="34">34</option> <option value="35">35</option> <option value="36">36</option> <option value="37">37</option> <option value="38">38</option> <option value="39">39</option> <option value="40">40</option> <option value="41">41</option> <option value="42">42</option> <option value="43">43</option> <option value="44">44</option> <option value="45">45</option> <option value="46">46</option> <option value="47">47</option> <option value="48">48</option> <option value="49">49</option> <option value="50">50</option> <option value="51">51</option> <option value="52">52</option> <option value="53">53</option> <option value="54">54</option> <option value="55">55</option> <option value="56">56</option> <option value="57">57</option> <option value="58">58</option> <option value="59">59</option> <option value="60">60</option> </select> <svg class="c-input__arrow"><use xlink:href="#arrow"></use></svg> </div> </div> </div> </div> </div> <table class="c-calendar__main"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody></tbody> </table> </div> </div>

Modifiers

A list of modifiers for the date input component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

FloatDisabled

The c-input__calendar--float modifier placed on c-input__calendar, makes the calendar absolute positioned, so stops it from interferring with any other content when active. Beware of using this on smaller screens as the calendar widget may stray off the page and become inaccessible to the user.

This is disabled by default. Enable block variable $component-input-calendar-position-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Mon Tue Wed Thu Fri Sat Sun
<div class="c-input c-input--suffix c-input--calendar"> <label class="c-type-foxtrot c-input__label" for="departure-field">Departure Date</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="departure-field" name="departure"> <div class="c-input__suffix c-input__calendar-trigger"> <svg class="c-input__icon"><use xlink:href="#calendar"></use></svg> </div> </div> <div class="c-calendar c-calendar--small c-input__calendar c-input__calendar--float"> <div class="o-box o-box--spacing-small"> <div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons"> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> <div class="o-layout__item c-calendar__month-label"> <div class="c-calendar__label"> <span class="c-calendar__label-day"></span> <span class="c-calendar__label-month"></span> <span class="c-calendar__label-year"></span> </div> </div> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> </div> </div> <table class="c-calendar__main"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody></tbody> </table> </div> </div>

AboveDisabled

Makes the calendar appear above the input, as long as the c-input__calendar is placed before the c-input__wrapper element. All other modifiers should work in conjunction with this.

This is disabled by default. Enable block variable $component-input-calendar-position-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Mon Tue Wed Thu Fri Sat Sun
<div class="c-input c-input--suffix c-input--calendar"> <label class="c-type-foxtrot c-input__label" for="departure-field">Departure Date</label> <div class="c-calendar c-calendar--small c-input__calendar c-input__calendar--above"> <div class="o-box o-box--spacing-small"> <div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons"> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> <div class="o-layout__item c-calendar__month-label"> <div class="c-calendar__label"> <span class="c-calendar__label-day"></span> <span class="c-calendar__label-month"></span> <span class="c-calendar__label-year"></span> </div> </div> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> </div> </div> <table class="c-calendar__main"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody></tbody> </table> </div> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="departure-field" name="departure"> <div class="c-input__suffix c-input__calendar-trigger"> <svg class="c-input__icon"><use xlink:href="#calendar"></use></svg> </div> </div> </div>

BreakoutDisabled

Adding this modifier makes the calendar breakout of its parent container ever so slightly. This is for when the designs requires the input to have a small width, but it's too small a width for the calendar to display properly.

The modifier exists purely as responsive classes based on framework breakpoints (c-input__calendar--breakout@sm, c-input__calendar--breakout@md etc) as you'll never want this behavour on smaller screens.

This is disabled by default. Enable block variable $component-input-calendar-breakout-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Mon Tue Wed Thu Fri Sat Sun
<div class="c-input c-input--suffix c-input--calendar" style='width:300px;margin:0 auto;'> <label class="c-type-foxtrot c-input__label" for="departure-field">Departure Date</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="departure-field" name="departure"> <div class="c-input__suffix c-input__calendar-trigger"> <svg class="c-input__icon"><use xlink:href="#calendar"></use></svg> </div> </div> <div class="c-calendar c-calendar--small c-input__calendar c-input__calendar--breakout@md"> <div class="o-box o-box--spacing-small"> <div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons"> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> <div class="o-layout__item c-calendar__month-label"> <div class="c-calendar__label"> <span class="c-calendar__label-day"></span> <span class="c-calendar__label-month"></span> <span class="c-calendar__label-year"></span> </div> </div> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> </div> </div> <table class="c-calendar__main"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody></tbody> </table> </div> </div>

You can customize the date input component by overriding certain JavaScript functionality through HTML data-attributes.

JavaScript

You can modify date input component functionality by adding the below data attribute. Unless stated otherwise, these must be placed on the top level block component (eg:- c-calendar)

Name
Name data-date-input-format
Description
Description

Enter a date format which you wish the selected date to be shown in. Any user freetyped dates will also be validated against this format. See Moment.js docs for date format examples.

Default
Example
Example
Mon Tue Wed Thu Fri Sat Sun
<div class="c-input c-input--suffix c-input--calendar" data-date-input-format="dddd, MMMM Do YYYY, h:mm:ss a"> <label class="c-type-foxtrot c-input__label" for="departure-field">Departure Date</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="departure-field" name="departure"> <div class="c-input__suffix c-input__calendar-trigger"> <svg class="c-input__icon"><use xlink:href="#calendar"></use></svg> </div> </div> <div class="c-calendar c-calendar--small c-input__calendar"> <div class="o-box o-box--spacing-small"> <div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons"> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> <div class="o-layout__item c-calendar__month-label"> <div class="c-calendar__label"> <span class="c-calendar__label-day"></span> <span class="c-calendar__label-month"></span> <span class="c-calendar__label-year"></span> </div> </div> <div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0"> <svg><use xlink:href="#arrow"></use></svg> </div> </div> </div> <div class="o-box o-box--spacing-micro o-box--spacing-small@sm2 c-box c-box--border c-calendar__time"> <div class="o-layout"> <div class="o-layout__item"> <div class="c-input c-input--left-label c-input--disable-state-inheritance"> <label class="c-type-foxtrot c-input__label" for="hours-field">Hours</label> <div class="c-input__wrapper"> <select id="hours-field" name="hours" class="c-input__field c-calendar__hours"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> <svg class="c-input__arrow"><use xlink:href="#arrow"></use></svg> </div> </div> </div> <div class="o-layout__item"> <div class="c-input c-input--left-label c-input--disable-state-inheritance"> <label class="c-type-foxtrot c-input__label" for="minutes-field">Minutes</label> <div class="c-input__wrapper"> <select id="minutes-field" name="minutes" class="c-input__field c-calendar__minutes"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> <option value="33">33</option> <option value="34">34</option> <option value="35">35</option> <option value="36">36</option> <option value="37">37</option> <option value="38">38</option> <option value="39">39</option> <option value="40">40</option> <option value="41">41</option> <option value="42">42</option> <option value="43">43</option> <option value="44">44</option> <option value="45">45</option> <option value="46">46</option> <option value="47">47</option> <option value="48">48</option> <option value="49">49</option> <option value="50">50</option> <option value="51">51</option> <option value="52">52</option> <option value="53">53</option> <option value="54">54</option> <option value="55">55</option> <option value="56">56</option> <option value="57">57</option> <option value="58">58</option> <option value="59">59</option> <option value="60">60</option> </select> <svg class="c-input__arrow"><use xlink:href="#arrow"></use></svg> </div> </div> </div> </div> </div> <table class="c-calendar__main"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody></tbody> </table> </div> </div>

You can theme the date input component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-input-length-bar-color primary-light
$component-input-length-background-color very-light
$component-input-focus-color primary
$component-input-border-color light
$component-input-disabled-background-color very-light
$component-input-box-color very-light
$component-input-disabled-text-color light
$component-input-calendar-box-border-color primary