Timepicker addon

In this section, you will learn to add timepicker to jQuery UI Datepicker.

In this section, you will learn to add timepicker to jQuery UI Datepicker.

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>&nbsp;</td>
<td style="width: 124px">
<input name="Submit1" type="submit" value="SAVE" />
</td>
</tr>
</table>
</form>
</BODY>
</HTML>