Classic Clock Style Time Picker Plugin For jQuery
File Size: | 31.7 KB |
---|---|
Views Total: | 4721 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fancy time picker plugin which enable you to select a time by dragging the hour and minute hands on a clock interface.
See also:
- KitKat Clock-Style Timer Picker with jQuery and CSS3 - KitKatClock
- jQuery Plugin To Select The Time Form A Clock-Style Interface
How to use it:
1. Load the necessary jQuery & jQuery UI libraries in the document.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
2. Create an empty element to display the user selected time.
<div id="time"></div>
3. Create the Html for the clock style time picker.
<div class="timepicker"> <div class="meridiem"> <div class="ante seleted">AM</div> <div class="post">PM</div> </div> <div class="hour"> <div class="pointer"></div> </div> <div class="minute"> <div class="pointer"></div> </div> <div class="mask"></div> </div>
3. The CSS to style the time picker.
.timepicker { background: white url('clockface.jpg') no-repeat scroll center; width: 300px; height: 300px; background-size: 100% 100%; position: relative; margin-left: 100px; margin-top: 100px } .timepicker .hour { position: absolute; width: 10px; height: 120px; left: 50%; top: 50%; margin-top: -60px; margin-left: -5px; z-index: 100; cursor: pointer; } .timepicker .minute { position: absolute; width: 6px; height: 200px; left: 50%; top: 50%; margin-top: -100px; margin-left: -3px; z-index: 50; cursor: pointer; } .timepicker .hour .pointer { background-color: black; width: 10px; height: 60px; } .timepicker .minute .pointer { background-color: black; width: 6px; height: 100px; } .timepicker .hour .hover { background-color: red } .timepicker .minute .hover { background-color: red } .timepicker .meridiem { border: 1px solid #eee; width: 100px; left: 50%; bottom: 20%; margin-left: -50px; position: absolute; z-index: 30; cursor: pointer; } .timepicker .meridiem .ante, .timepicker .meridiem .post { float: left; width: 50px; text-align: center; } .timepicker .meridiem .seleted { background-color: #eee; } .rotate { transform: rotate(60deg); -ms-transform: rotate(60deg); /* IE 9 */ -webkit-transform: rotate(60deg); /* Safari and Chrome */ } .timepicker .mask { position: absolute; width: 300px; height: 300px; z-index: 0; cursor: pointer; }
4. Enable the plugin and output the time to the empty container you just created.
$(function(){ $(".timepicker").timepicker({ change: function(e){ $("#time").html(e.hour + ":" + e.minute + " " + e.meridiem + " = " + e.hour24 + ":" + e.minute); } }); });
This awesome jQuery plugin is developed by LHoin. For more Advanced Usages, please check the demo page or visit the official website.