Timepicker addon
Posted on: July 9, 2012 at 12:00 AM
Posted on: July 9, 2012 at 12:00 AM
Timepicker addon
In this section, you will learn to add timepicker to jQuery UI Datepicker.
For adding timepicker addon, you need jQuery ui css as follows :
<link rel="stylesheet" media="all" type="text/css" href="css/jquery-ui-1.8.16.custom.css" />
In spite of this, you need to put following css code for timepicker in <style> tag as follows :
<style type="text/css">
#ui-datepicker-div, .ui-datepicker{ font-size: 70%; }
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
Also, you need to add the following js files in <html> <head> as follows :
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
You need to put the following jQuery code as follows :
<script type="text/javascript">
$(document).ready(function(){
$('#event_date').datetimepicker({ showSecond: true,dateFormat: 'yy-mm-dd',timeFormat: 'hh:mm:ss'});
});
</script>
If you want to disable the past date and want to make the future date and time selectable, add the mindate attribute as follows :
<script type="text/javascript">
$(document).ready(function(){
$('#event_date').datetimepicker({ showSecond: true,dateFormat: 'yy-mm-dd',timeFormat: 'hh:mm:ss',minDate: new Date() });
});
</script>
EXAMPLE
In the below example, we will add the timepicker in html form with datepicker using datetime picker addon. The complete HTML code is given below :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Timepicker Addon</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" media="all" type="text/css" href="css/jquery-ui-1.8.16.custom.css" />
<style type="text/css">
#ui-datepicker-div, .ui-datepicker{ font-size: 70%; }
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#event_date').datetimepicker({ showSecond: true,dateFormat: 'yy-mm-dd',timeFormat: 'hh:mm:ss'});
});
</script>
</HEAD>
<BODY>
<center><h3>Time picker add-on</h3></center>
<form id="form" method="post" action="" >
<table align="center">
<tr>
<td style="width: 124px">Event Name</td>
<td>
<input name="event_name" type="text" size="40"/>
</td>
</tr>
<tr>
<td style="width: 124px">Oranisation</td>
<td>
<input name="organisation" type="text" size="40"/>
</td>
</tr>
<tr>
<td style="width: 124px">Event Date</td>
<td>
<input name="event_date" type="text" size="40" id="event_date"/>
</td>
</tr>
<tr>
<td style="width: 124px">Place of Event</td>
<td>
<textarea name="event_place" cols="30" rows="3"></textarea>
</td>
</tr>
<tr>
<td style="width: 124px">Status</td>
<td >
<select name="status">
<option value="">--------Select Status--------</option>
<option value="pending">Pending</option>
<option value="skipped">Skipped</option>
<option value="done">Done</option>
</select>
</td>
</tr>
<tr>
<td style="width: 124px">Comment</td>
<td>
<textarea name="comment" cols="30" rows="3"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 124px">
<input name="Submit1" type="submit" value="SAVE" />
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
OUTPUT
The form will look like this :
When you click on Event Date input field, you will get the following date time picker :
When you select the date and time , it will automatically fill the output as follows :
