Configuring timepicker.js

HTML attributes

data-start Start of selectable time range
data-end End of selectable time range
data-step Size of jump between time blocks in minutes
data-format 12 or 24 hour format
data-delimiter Use colon (1:00pm), comma (1,00pm) or full stop (1.00pm) to separate hours and minutes

example.com/index.html

12–5pm, 30 minute blocks, 24hr time, comma separated

		index.html		
12–5pm, 30 minute blocks, 24hr time, comma separated
<input
	type="timepicker"
	data-start="12.00"
	data-end="17.00"
	data-step="30"
	data-format="24"
	data-delimiter=","
	value="15,00"
>

Start time, end time and time steps

It may not be useful for your customers to be able to select any time of the day. Maybe you're creating a pizza delivery form. Maybe you have a clowns for hire service. Maybe you're offering pizzas delivered by clowns. Regardless, you'll only want to deliver during your operating hours.

You can set the beginning and end time range in the drop down menu by setting data-start and data-end. Let's also presume you only want your customers to be able to choose from half hour blocks by setting data-step="30".

Time formats

timepicker.js doesn't mind too much what time format you use to set this time. For example, 5pm could be written as "5:00pm", "5pm" or "17:00", regardless of your formatting options.

Steps (time blocks) format

Steps must be specified in minutes. For example data-step="15" would be 15 minute blocks (default), data-step="30" for half hour blocks and data-step="60" for one hour blocks.

Example

example.com/index.html

Select a time between 9am and 5pm

		index.html		
<!DOCTYPE html>
<html>
	<head>
		<script src="timepicker.js" defer></script>
	</head>
	<body>
		Select a time between 9am and 5pm<br/>
		<input type="timepicker" data-start="9.00am" data-end="5.00pm" data-step="30" value="12:00pm" />
	</body>
</html>

12/24 hour time and the delimiter

example.com/index.html

What time does your plane leave tomorrow?

		index.html		
<!DOCTYPE html>
<html>
	<head>
		<script src="timepicker.js" defer></script>
	</head>
	<body>
		What time does your plane leave tomorrow?<br/>
		<input type="timepicker" data-format="24" data-delimiter="." value="18.00" />
	</body>
</html>

When shoud I use 24-hour time? What's wrong with the 12-hour format?

These days, 24-hour time is only really used where the ambiguity of 12-hour time can cause problems. In the example above, would 12am mean your plane leaves first thing tomorrow, or last? Although most people in the world use 12-hour time, if you really think about it, the 12-hour format is quite stupid:

12 hour time visualised

AM rolls over to PM at midday/noon, then the 12 rolls back to 1 an hour later.
12-hour time gives us 10am → 11am → 12pm → 1pm → 2pm
The first hour of the day is actually 12, not 1. I'll let you think about that.
Does "midnight last Tuesday" or even "12am last Tuesday" mean the very beginning or end of tuesday? 24-hour time has both 00:00 and 24:00 to express the difference. The time is exactly the same, but it clarifys things in the context of a single day. For example "00:00 last tuesday" would be the beginning of the day, and "24:00 last tuesday" would be the end.

All together now

example.com/index.html

Select a time between 09.00 and 17.00

		index.html		
<!DOCTYPE html>
<html>
	<head>
		<script src="timepicker.js" defer></script>
	</head>
	<body>
		Select a time between 09.00 and 17.00<br/>
		<input type="timepicker" data-start="09:00" data-end="17:00" data-step="30" data-format="24" data-delimiter="." value="13.00" />
	</body>
</html>

What next?

That's it! pretty simple huh?

As you already know, form follows function, so it's time for styling your timepickers.