Appointment Picker

A lightweight, accessible and customizable javascript timepicker.

Appointment-Picker source on Github

Default (no options, jQuery)

$.fn.appointmentPicker = function(options) {
	this.appointmentPicker = new AppointmentPicker(this[0], options);
	return this;
};

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

Leading zero (large, jQuery)

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

Disabled array and min/maxTime (am/pm, vanillajs)

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']
});

Custom time format (large, am/pm, vanillajs)

new AppointmentPicker(document.getElementById('time-4'), {
	interval: 15,
	mode: '12h',
	startTime: 11,
	endTime: 16,
	minTime: 11,
	maxTime: 16,
	disabled: ['3:00 pm', '3:30 pm'],
	allowReset: false,
	large: true,
	timeFormat12: 'H.M AP.M.'
});

More Examples

Tests

Report bugs or feature requests on Github Issues

Copyright Jan Suwart, MIT license