content top

The Missing Date-Time Selector for jQuery UI

Posted by legacye in Web Development on 09 17th, 2009 | 2 responses

timepicker

Today I began work on a new UI for a client and I thought I’d share this neat Date-Time selection component that I think might be useful to some other developers. Rather than requiring you to go for separate Date or Time components, it’s got everything built into the interface quiet neatly. All you need to do to attach the component to a text field is setup a new datepicker (as shown in the example below). The component supports multiple instances and hopefully it’ll be as helpful to your projects as it was to mine. Btw, here’s the download.

  1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  2. <!– core, slider, datepicker –>  
  3. <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>  
  4. <script type="text/javascript" src="js/timepicker.js"></script>  
  5.   
  6. <script type="text/javascript">  
  7. $(function() {  
  8.     $(‘#datetime’).datepicker({  
  9.         duration: ”,  
  10.         showTime: true,  
  11.         constrainInput: false,  
  12.         stepMinutes: 1,  
  13.         stepHours: 1,  
  14.         altTimeField: ”,  
  15.         time24h: false  
  16.      });  
  17. });  
  18. </script>  
  19.   
  20. <input type="text" name="datetime" id="datetime" value="01.06.2009 00:00">  
  21.     

 

Bookmark and Share
Share

Related posts:

  1. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...
  2. How to add custom missing image holders using jQuery We’ve all experienced the dreaded "red cross in a box"...
  3. jQuery Colour Selector plug-in with support for graceful degradation Hey guys. Here’s another entry on jQuery that someone...
  4. How to easily add a Google Map using jQuery and an address in less than 5 minutes   Hi guys. Today I thought we’d take a look...
  5. How to create a Facebook Friend Selector using jQuery and PHP or Grails (without FBML) When I first attempting to code up a pure PHP...

Related posts brought to you by Yet Another Related Posts Plugin.

2 Comments »

  1. avatar comment-top

    [...] The Missing Date-Time Selector for jQuery UI Einem externen Dienst hinzufügen: [...]

    comment-bottom
  2. avatar comment-top

    [...] Here you can find my latest tutorials, blog posts or you can hire me to help your business grow. Enjoy your visit.     [...] The Missing Date-Time Selector for jQuery UI Einem externen Dienst hinzuf?gen: [...] Download Free Article Spinner Thanks. [...]

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment