I have been making good use of a jQuery UI plugin called datetimepicker developed by Trent Richardson.
It works with the existing jQuery UI datepicker ( which means that not only do you get a fully functional and tested calendar but also the numerous themes which are available ), and adds an hour and minute selector below the calendar.
In this example, I am using the latest version of jQuery (currently 1.7), jQuery UI (currently 1.8.16) and the jQuery UI theme Hot-Sneaks, all delivered via the asp.net CDN. ( Make sure you use Fallbacks when delivering content from a CDN)
Include these in the <head></head>or just before </body> of your html.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/hot-sneaks/jquery-ui.css" /> <script src="pathtojs/jquery-ui-timepicker-addon.js"></script>
There is also a small bit of css which you need to add along with the plugin.
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
The default usage is to use an <input> on your page which will open and be populated by the datetimepicker.
<input type="text" id="selectedDateTime" />
Then simply call the function once your document has loaded.
$(function() { $('#selectedDateTime').datetimepicker(); });
demo - Select Date/Time:
As with most good plugins, they have a load of options which you can change. So if you want to change the date and time format, then it is really easy to do.
$('#selectedDateTimeWithFormat').datetimepicker({ dateFormat: 'dd-mm-yy', timeFormat: 'hh:mm:ss' });
demo - Select Date/Time
With a extra styles to overwrite some existing jQuery UI styling, you can change the sizing to fit your needs. In my example I have just left it as is.
Want to make use the selected date and time from the datetimepicker plugin? Take a look at "Manipulating the selected date of the jQuery UI datepicker".
Please Comment!
I am always interested in hearing back from those who read my blog. Please leave a comment if you found this useful, want to suggest any changes to my code, or anything else! Thanks!
I have added this example to my github, check it out!
