jQuery Timepicker example

jQuery Timepicker:

timepicker.html:

<html>
<head>
	<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">
$(function(){
		$("#time").timepicker();
	});
</script>
</head>
<body>
<input type='text' id="time" name='date_of_birth'/>
</body>
</html>

Output:

timepicker

Timepicker Customized :

<html>
<head>
	<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">
$(function(){
	var pickerTime = {
		hourGrid: 5,
		minuteGrid: 10,
		timeFormat: 'hh:mm tt'
		};
		$("#time").timepicker(pickerTime);
	});
</script>
</head>
<body>
<input type='text' id="time" name='date_of_birth'/>
</body>
</html>

Output:

timepicker_customized

Recommended Books:

457 total views, 3 views today

Leave a Reply

Your email address will not be published. Required fields are marked *