EvoToolkit - v3.7.2 (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

Table of contents

Base

Modifiers

Base

Standard

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

Mon Tue Wed Thu Fri Sat Sun 
<div class="c-input c-input--suffix c-input--calendar">
	<label class="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="/static/img/evotoolkit-059f9bb4f6.svg#calendar"></use></svg>
		</div>
	</div>
	<div class="c-calendar c-calendar--small c-input__calendar">
		<div class="o-box u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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>

Time

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

Mon Tue Wed Thu Fri Sat Sun 
<div class="c-input c-input--suffix c-input--calendar">
	<label class="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="/static/img/evotoolkit-059f9bb4f6.svg#calendar"></use></svg>
		</div>
	</div>
	<div class="c-calendar c-calendar--small c-input__calendar">
		<div class="o-box u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
				</div>
			</div>
		</div>
		<div class="o-box u-p-micro u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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.

Float

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.

Mon Tue Wed Thu Fri Sat Sun 
<div class="c-input c-input--suffix c-input--calendar">
	<label class="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="/static/img/evotoolkit-059f9bb4f6.svg#calendar"></use></svg>
		</div>
	</div>
	<div class="c-calendar c-calendar--small c-input__calendar c-input__calendar--float">
		<div class="o-box u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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>

Above

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.

Mon Tue Wed Thu Fri Sat Sun 
<div class="c-input c-input--suffix c-input--calendar">
	<label class="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 u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#calendar"></use></svg>
		</div>
	</div>
</div>

Breakout

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.

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-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="/static/img/evotoolkit-059f9bb4f6.svg#calendar"></use></svg>
		</div>
	</div>
	<div class="c-calendar c-calendar--small c-input__calendar c-input__calendar--breakout@md">
		<div class="o-box u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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 modify 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-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="/static/img/evotoolkit-059f9bb4f6.svg#calendar"></use></svg>
		</div>
	</div>
	<div class="c-calendar c-calendar--small c-input__calendar">
		<div class="o-box u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
				</div>
			</div>
		</div>
		<div class="o-box u-p-micro u-p-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="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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-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