TimePicker plugin for jQuery

Built by Gelform

This plugin is for letting a user choose dates and then corresponding times. I built it to allow users to let me know when they're available for phone calls.

The time pickers return an array of dates containing a date (in yyyy-mm-dd format) and 24-hour time (hh:mm), by default. Here's what it would look like in PHP:


$schedule = array (
	"1381107061051" => array (
		"date" => "2013-10-06",
		"time" => "07:00"
	),
	"1381193461051" => array (
		"date" => "2013-10-07",
		"time" => "15:00"
	),
	"1381279861051" => array (
		"date" => "2013-10-08",
		"time" => "16:00"
	)
);
			

Download it from Github


Examples:

Basic

Here's a basic example:

All this requires is:


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" media="all" href="css/jquery.timepicker.css" />
</head>
<body>
	<div id="basic"></div>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="js/jquery.timepicker.min.js"></script>
	<script>
	$(document).ready(function(){
		$('#basic').timePicker();
	});
	</script>
</body>
</html> 	

Bootstrap

Here's a bootstrap integration example:

We'll change a few things to make this work. First, we'll make the dates wrapper a button group, and each date a button. Similarly, we'll make each time picker a Bootstrap well. We could've also just changed the class.

The gotcha is changing the "selectedClassName" (the class added to each date when it's selected) to "active" to match Bootstrap. FInally we want to set "addSelectedClassOnClick" to false. Bootstrap will automatically add the class "active" to a clicked button, so we don't want our plugin to toggle it, which will turn it off.


// get today
var today = new Date();

// set a start date a week from now
var todayPlus7 = new Date(today.getTime() + (24 * 60 * 60 * 1000)*7);

$('#bootstrap').timePicker({
	datePicker: {
		startDate: todayPlus7,
		dates: {
			html: '<span class=" btn-group" data-toggle="buttons-checkbox" />',
		},
		date: {
			html: '<button type="button" class="btn" />',
			selectedClassName: 'active',
			addSelectedClassOnClick: false
		}
	},
	timePicker: {
		showPlaceholders: false,
		time: {
			html: '<span class="well" />',
		}
	}
}); 	

These settings are available like this, too:


$.fn.timePicker.defaults.datePicker.startDate = todayPlus7;
$.fn.timePicker.defaults.datePicker.date.html = '<button type="button" class="btn" />';
$.fn.timePicker.defaults.datePicker.date.selectedClassName = 'active';
$.fn.timePicker.defaults.datePicker.date.addSelectedClassOnClick = false;
$.fn.timePicker.defaults.timePicker.time.html = '<span class="well" />';
$.fn.timePicker.defaults.timePicker.showPlaceholders = false;

$('#bootstrap').timePicker(); 	

Callback

Here's a callback example:

For this we need a timepicker (in this case #callback) and a disabled button:


<!-- our html, including a disabled button -->
<p id="callback"></p>

<p>
	<button id="btn-callback" type="button" disabled="disabled">Disabled until 3 are selected</button>
</p> 	

Then we define our callback when we instantiate our time picker:


// instantiate the timepicker
$('#callback').timePicker({
	datePicker: {
		date: {
			// trigger this whenever a date item is clicked
			finished: function(){
				// get our whole date picker element
				var $wrapper = $('#callback');

				// get the timepickers element
				var $timePickers = $('[data-tp-role=timePickerTime]', $wrapper);

				// if there are 3 of them, we're good!
				if ( $timePickers.length >= 3 )
				{
					// enable our button, and change the text
					$('#btn-callback')
					.prop('disabled', '')
					.text('3 selected!');
				}
				else
				{
					// not enough dates selected, change the button back
					$('#btn-callback')
					.prop('disabled', 'disabled')
					.text('Disabled until 3 are selected');
				}
			}
		}
	}
}); 	

Settings:

Here's an explaination of the available settings:

numberOfTimes Int
The number of times you want to allow people to select. default: 3
fieldName Str
The name of the array passed when the form gets submitted. default: schedule
datePicker:
The element that contains the prev, next buttons, and the calendar boxes
startDate Date Obj
A date object of the date you want to start from. default: new Date()
numOfDates Int
How many calendar boxes to show between the prev and next buttons. default: 5
allowPastDates Bool
Set to true if you want to allow users to choose dates before today. default: false
wrapper:
htmlBefore Html
A message that appears above the date picker. Use this like a label. NOTE: MUST BE HTML, NOT JUST TEXT. default: <p>First, choose three dates:</p>
html Html
What kind of html element should wrap the date picker elements. default: <div />
className Str
The class name that will be added to the date picker element, for styling. default: TPDatePicker
prev:
This is the button that moves the dates back a day.
className Str
The class name that will be added to the prev element, for styling. default: TPDatePickerPrev
html Html
What kind of html element should the button be. default: <span />
text Html
What html or text should be in the prev element. default: &#9664;
clicked Func
A callback triggerd when the prev element has been clicked, but BEFORE the dates are rendered. this = the $datePickerPrev element
finished Func
A callback triggered after the new dates have been rendered. this = the $datePickerPrev just clicked
dates:
className Str
The class name that will be added to the element, for styling. default: TPDatePickerDates
html Html
What kind of html element should the dates wrapper be. default: <span />
added Func
A callback function triggered after the dates element have been added (only happens once). this = a jQuery array of the date elements just added
date:
className Str
The class name that will be added to the element, for styling. default: TPDatePickerDate
selectedClassName Str
What class should be applied to each calendar box when it's selected. default: selected
addSelectedClassOnClick Bool
For bootstrap and other frameworks. The selected class will only be applied when the prev or next buttons are clicked, but not when the element itself is clicked. Bootstrap already adds this class when it's clicked, so we don't want to toggle it again. default: true
html Html
What kind of html element should each calendar box be. default: <span />
text Html
What html or text should be in each calendar box element. This uses the built in "template" function, which will populate the following variables: monthName, shortMonthName, dayName, shortDayName and date. default: <small>shortMonthName</small> <b>date</b> <small>shortDayName</small>
Clicked Func
A callback function triggered after the calendar box has been clicked, before anything else has happened. this = the $datePickerDate just clicked
Finished Func
A callback function triggered after the corresponding time chooser box has been added. this = the $datePickerDate just clicked
next:
className Str
The class name that will be added to the element, for styling. default: TPDatePickerNext
html Html
What kind of html element should the button be. default: <span />
text Html
What html or text should be in the next element. default: &#9654;
clicked Func
A callback triggerd when the next element has been clicked, but BEFORE the dates are rendered. this = the $datePickerNext element
finished Func
A callback triggered after the new dates have been rendered. this = the $datePickerNext just clicked
timePicker:
wrapper:
htmlBefore Html
A message that appears above the times picker. Use this like a label. NOTE: MUST BE HTML, NOT JUST TEXT. default: <p>Now, please select your available times:</p>
html Html
What kind of html element should the times wrapper be. default: <div />
className Str
The class name that will be added to the element, for styling. default: TPTimePicker
time:
className Str
The class name that will be added to the element, for styling. default: TPTimePickerTime
preSelected Str
What default time should be selected when a time chooser is added. default: 7:00am
startTime Str
In 24h. The earliest time a user can choose. default: 6:00
endTime Str
in 24h. The latest time a user can choose. default: 19:00
interval Int
The interval between times, in minutes. (i.e. 15 = 7:15, 7:30, 7:45...) default: 15
selectFieldName Str
The actually name attribute of the time select element <select name="time".... This is what gets submitted when the form gets submitted. default: time
html Html
What kind of html element should each time box be. default: <span />
text Html
What html or text should be in each time box element. This uses the built in "template" function, which will populate the following variables: monthName, shortMonthName, dayName, shortDayName and date. default: <small>shortMonthName</small> <b>date</b> <small>shortDayName</small>
added Func
A callback when a time chooser box has been added. this = the $timePickerTime just added.
removed Func
A callback when a time chooser box has been removed. this = the $timePicker wrapper