Time Picker
This component has a dependancy Make sure you follow the install instructions and load the moment JS dependancies.
#
InstallationFor 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>
#
NPMnpm i @pearson-ux/timepicker --save
#
Demo#
12 Hour Timepicker<pearson-timepicker label="Whats the time?" hours="12" increments="60"></pearson-timepicker>
#
StructureTo add a timepicker, just add the markup in your app where you want it displayed.
#
API#
RequiredAll these attributes are required.
Attribute | Type | Default | Description |
---|---|---|---|
hours | String | unset | Accepts the value of 12 and 24 to toggle the different time formats |
#
OptionalAll these attributes are optional.
Attribute | Type | Default | Description |
---|---|---|---|
label | String | unset | The label text of the timepicker |
increment | String | 15 | The number of increments you want to set in minutes |
#
EventsThere are no event that get emitted.
#
HTML MarkupDo 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.
<div class="gr-timepicker-container" > <label class="gr-label" for="timePickerInput">Select time (HH:MM AM/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>