Aware Controls | JavaScript (ES5) Time Picker Demos

The Time Picker is a control that allows the user to select a date from a drop down list.

Default Behavior

Demonstrates the default behavior of the Time Picker control.

new ac.calendars.TimePicker({}, "#cntlTimePicker");

<input id="cntlTimePicker" />

Step

new ac.calendars.TimePicker({ step: 60 }, "#cntlTimePicker");

<input id="cntlTimePicker" />

Format

Demonstrates how you can change the format of the time on the picker.

const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth();
const currentDay = today.getDay();

new ac.calendars.TimePicker(
	{
		value: new Date(currentYear, currentMonth, currentDay, 11, 30, 0),
		format: "HH:mm"
	},
	"#cntlFormatTime"
);

<input id="cntlTimePicker" />