Very Simple JQuery Time Selector Plugin

Are you looking for time selector plugin for your project then in this post I am going to share a very simple jquery time selector plugin which you can integrate in your web based project to enable feature like time picker. It is work like as you are choosing time in your windows OS. DTimepicker is a minimal, convenient jQuery Time selector plugin which makes easy to choose time values in 24-hour frame using a spinner or the keyboard up down key.

Quick Integration of DTimepicker Plugin

Libraries

Include required libraries on page like jQuery core library + plugins JS library.

<script src="//code.jquery.com/jquery-latest.min.js">script>
<script src="timepicker.js">script>

HTML

Create simple HTML input box which act as time selector you can choose any time in 24-hour frame using a spinner or the keyboard up down key.

CSS

Add CSS on page for styling time selector.

.tp {
	position: relative;
	display: inline-block;
	border: 1px solid lightgray;
	padding: 2px 4px;
	font-family: Calibri, Tahoma, Veradana !important;
	background-color: #FFF;
	color: #000;
}
.tp input {
	font: inherit;
	border: 0; margin: 0;
	outline: none;
	text-align: center;
	background-color: #FFF;
	color: inherit;
}
.tp_spinners {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-top: -4px;
}
.tp_spinners span { border: 5px solid transparent; cursor: pointer; display: block; }
.tp_spinners .tp_spinup { border-bottom-color: black; border-top: 0; margin-bottom: 4px; }
.tp_spinners .tp_spindown { border-top-color: black; border-bottom: 0; }

JS

Initialize the plugin and set time for inputbox and all done.

$(function() {  
  $('#timeselector').timepicker();
});

You can also set initial time values.

$(function() {  
  $('#timeselector').timepicker({
    time: '11:09:30.000' 
  });
});

See live demo and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Related