Skip to main content

Time Picker

This component has a dependancy Make sure you follow the install instructions and load the moment JS dependancies.

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/timepicker"></script>

NPM#

npm i @pearson-ux/timepicker --save

Demo#

12 Hour Timepicker#

<pearson-timepicker label="Whats the time?" hours="12" increments="60"></pearson-timepicker>

Structure#

To add a timepicker, just add the markup in your app where you want it displayed.

API#

Required#

All these attributes are required.

AttributeTypeDefaultDescription
hoursStringunsetAccepts the value of 12 and 24 to toggle the different time formats

Optional#

All these attributes are optional.

AttributeTypeDefaultDescription
labelStringunsetThe label text of the timepicker
incrementString15The number of increments you want to set in minutes

Events#

There are no event that get emitted.

HTML Markup#

Do you want to use your own JS to make your own timepicker function? No problem, use the markup below along with CSS to build a timepicker with your own JS.

Important note: You can follow the UXF guidelines to view the suggested functionality of the timepicker.

Here are some basic practices to make sure the time picker you build is accessible.
<div class="gr-timepicker-container" >
<label class="gr-label" for="timePickerInput">Select time (HH:MM AM&#x2F;PM)</label>
<div class="timepicker">
<input type="text" id="timePickerInput" class="gr-input" role="combobox" aria-haspopup="true" aria-expanded="false" aria-controls="itemList" aria-owns="itemList" aria-autocomplete="none">
<span class="pe-icon-wrapper">
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#time-18"></use>
</svg>
</span>
</div>
<p id="inputAriaId" class="pe-input--error_message">
<svg focusable="false" class="icon-18" aria-hidden="false" aria-label="Error" title="Error" role="img">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-18"></use>
</svg>
Enter a valid time.
</p>
<div id="dropDown" class="pe-dropdown-container animated animateIn ">
<ul id="itemList" class="itemList" role="listbox" tabindex="0" data-selected data-time-type="12 hour">
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="6:00 AM">
<span class="pe-icon-wrapper" style="display:block"><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
6:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="7:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
7:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="8:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
8:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="9:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
9:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="10:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
10:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="11:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
11:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="12:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
12:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="1:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
1:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="2:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
2:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="3:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
3:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="4:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
4:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="5:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
5:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="6:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
6:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="7:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
7:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="8:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
8:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="9:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
9:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="10:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
10:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="11:00 PM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
11:00 PM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="12:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
12:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="1:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
1:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="2:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
2:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="3:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
3:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="4:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
4:00 AM
</li>
<li class="item" role="option" tabindex="-1" aria-selected="true" data-time="5:00 AM">
<span class="pe-icon-wrapper" ><svg focusable="false" aria-hidden="true" class="icon-18"><use xlink:href="#correct-18"></use></svg></span>
5:00 AM
</li>
</ul>
</div>
</div>