Appointment Picker

A lightweight, accessible and customizable javascript timepicker.

Default (jQuery)

Time

var $picker = $('#time-1').appointmentPicker();

Large w/ options (jQuery)

Time

var $picker2 = $('#time-2').appointmentPicker({
	title: 'Select an appointment',
	interval: 15,
	startTime: 10,
	endTime: 16,
	large: true
});

am/pm w/ options (vanilla-js)

Time

var picker = new AppointmentPicker(document.getElementById('time-3'), {
	interval: 30,
	mode: '12h',
	minTime: 10,
	maxTime: 21,
	startTime: 09,
	endTime: 23,
	disabled: ['1:30 pm', '2:00 pm', '7:30 pm', '9:30 pm']
});

am/pm large w/ options (vanilla-js)

Time

new AppointmentPicker(document.getElementById('time-4'), {
	interval: 30,
	mode: '12h',
	startTime: 10,
	endTime: 18,
	minTime: 11,
	maxTime: 18,
	disabled: ['4:30 pm', '5:00 pm'],
	large: true
});

More Examples

Form embed
Calling exposed functions
Rendering into DOM on init

Tests

Mocha Specs

Report bugs or feature requests on Github Issues