Appointment Picker
A lightweight, accessible and customizable javascript timepicker widget
Yet another timepicker? - Advantages
- no dependencies
- tiny (6KB minified, 2KB gzipped)
- only the listed times can be picked or entered, no validation necessary
See Appointment-Picker Demo and Examples
Installation
npm i -S appointment-picker
Setup
When using inside a static HTML file, add both the stylesheet and the script
Import
When using with a module loader, import the node-module
// Webpack (React, Angular, ES6); // CommonJS (Node, Browserify)const AppointmentPicker = ;
Initialize the picker using the new
keyword
var picker = document {};
Options
The appointment-picker can be configured with options
interval
sets the interval between appointments in minutes (1-60
), if this number gets lower (more possible appointments) the picker will get longermode
the picker can be used in standard24h
hour mode or in12h
mode - the latter uses am/pm postfixminTime
sets the minimum hour that can be picked, default is0
what is eqivalent to 12ammaxTime
sets the maximum hour that can be picked, default is24
startTime
hides all appointments below this hour, default is0
endTime
hides all appointments above this hour, default is24
disabled
array of disabled appointments, i.e.['10:30', '1:15pm', ...]
- these times cannot be selected or entered and will be skipped using the keyboard arrowslarge
increases the size of the picker and the appointments by setting ais-large
modifierleadingZero
adds leading zero to single-digit hour if true (i.e. 07:15)allowReset
whether a time can be reset once enteredtitle
defines the picker's headingtemplateOuter
HTML template that renders the picker's outer frame (usually containing a wrapper and title), must contain{{innerHtml}}
placeholder (example)templateInner
template for repeated list items (time inputs), must contain at least aninput
tag,{{time}}
and optional{{disabled}}
placeholder, i.e.<input type="button" value="{{time}}" {{disabled}}>
timeFormat24
custom time format for 24h mode (use placeholderH
for hour,M
for minute), i.e.H/M
could evaluate to13/45
(example)timeFormat12
custom time format for am/pm mode (use placeholderapm
for postfix - the algorithm will remove either the a or the p from the pattern), i.e.H.M AP.M.
could evaluate to1.30 A.M
Note: with startTime
and endTime
appointments below and above can be visually removed. If startTime is greater than minTime
a lower time can still be manually set via the keyboard. On the other hand the picker does not accept lower hours than minTime
and higher than maxTime
. Manually entered times outside of the defined bounds will be rejected by the picker, no extra validation is therefore needed. Entering an empty string into the input resets the time.
Now you can pass your options into the the AppointmentPicker invocation
var picker = document interval: 30 mode: '12h' minTime: 09 maxTime: 22 startTime: 08 endTime: 24 disabled: '16:30' '17:00' templateInner: '<li class="appo-picker-list-item {{disabled}}"><input type="button" tabindex="-1" value="{{time}}" {{disabled}}></li>' templateOuter: '<span class="appo-picker-title">{{title}}</span><ul class="appo-picker-list">{{innerHtml}}</ul>';
Methods
The appointment-picker exposes several functions to change its behaviour from outside (example).
Method | Desc. |
---|---|
picker.open() |
open the picker popup |
picker.getTime() |
get the current time programmatically from a picker instance, returns an object like { h: 14, m: 30, displayTime: '2:30 pm' } |
picker.setTime('10:30') |
set a time of a picker instance (empty string resets the time) |
picker.close() |
close the picker popup |
picker.destroy() |
destroy the picker instance and remove both the markup and all event listeners |
Events
Appointment-picker exposes events for hooking into the functionality:
change.appo.picker
triggered on each successful value change (event example)open.appo.picker
is fired each time the picker is openedclose.appo.picker
is fired each time the picker is closed
Each event
contains 2 properties time
and displayTime
, i.e. event.time: {'h':14,'m':30}
and event.displayTime: '2:30 pm'
documentbody;
Styling
All appointment-picker styles are namespaced with .appo-picker
, i.e. .appo-picker-list-item
.
You can either copy and modify the provided CSS, or import it using
/* Using sass/scss */;
or in your javascript file
// Using a css-loader inside JS (relative path to your node_modules folder);
Accessibility
For screen reader support add both a aria-label
and aria-live
properties on the input field
Browser Support
- Chrome
- Firefox
- Safari (macOS 10 & iOS 9)
- Edge
- IE11 / IE10
- IE9 (with classList polyfill)
Legacy browser support (IE9)
Add the element.classList polyfill by either importing it with a module loader or simply add the polyfill from a CDN in your html head.
Integration
Use as jQuery plugin
If you would like to use the appointment-picker as a jQuery plugin add following code before initializing
$fn { thisappointmentPicker = this0 options; return this;};
Now you can initialize the picker on any text input field using $
var $picker = ; // Or pass in options; // And access all exposed methods using jQuery$pickerappointmentPicker; // i.e. { h: 15, m: 30, displayTime: '3:30 pm' }
Use with React
Appointment Picker can be easily integrated into a React component. Simply import the node module and use React.createRef()
to pass the DOM element when calling new AppointmentPicker
(see example)
; Component { superprops; thispickerRef = React; thisonTimeSelect = thisonTimeSelect; } { return <input type="text" ref= thispickerRef ></input>; } { console; } { thispicker = thispickerRefcurrent {}; thispickerRefcurrent; } { thispickerRefcurrent; thispicker; }
Use with Angular
To integrate AppointmentPicker into an Angular component, import it's CSS, create a @ViewChild
reference (#pickerInput
) and pass it's nativeElement when calling new AppointmentPicker
.
/* CSS, SCSS */;
<!-- HTML -->
; @ implements OnInit OnDestroy @ input: ElementRef; picker: AppointmentPicker; @ { console; } { thispicker = thisinputnativeElement {}; } { thispicker; }
Author & License
- Jan Suwart | MIT License