Hey I would love to know what you think while reading my posts. Please comment!.

jQuery UI Datetimepicker plugin

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!

About Me

Tim James I'm Tim, a web applications developer from Glasgow, Scotland. Currently working for Kingfisher Systems Ltd, building bespoke systems within the Car Auction industry.

  • C#
  • VB.NET
  • .NET MVC
  • Web API
  • Razor
  • HTML5
  • CSS3
  • jQuery
  • WCF
  • SQL
  • knockout.js
  • Angularjs
  • AJAX
  • APIs
  • SignalR
Why not follow me on twitter? Follow me on Twitter