nextwebgen.com

The Next Generation Web Now

DatePicker using Prototype and Scriptaculous

Filed under: Web 2.0 News — Dion Almaer at 8:47 am on Friday, August 31, 2007

Until we get <input type="date" /> into the browsers, we will need to create data pickers.

DatePicker is a simple one that users Prototype and Script.aculo.us, and does the basics well (although the fade can be a touch annoying to me).

It is very simple to use too:

HTML:

  1.  
  2. <script type=“text/javascript” src=“/prototype.js”></script>
  3. <script type=“text/javascript” src=“/scriptaculous.js”></script>
  4. <script type=“text/javascript” src=“/datepicker.js”></script>
  5. <style type=“text/css”>
  6. @import("/css/datepicker.css");
  7. </style>
  8.   <input type=“text” id=“date-from” name=“date-from” />
  9. </form>
  10. <script type=“text/javascript”>
  11.      var dpck   = new DatePicker({
  12.       relative  : ‘date-from’,
  13.       language  : ‘en’
  14.       });
  15. </script>
  16.  

Of course, you could easily wrap this in a microformat so you can just do class=”date”.

Prototype Date Picker

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blogmarks
  • del.icio.us
  • De.lirio.us
  • digg
  • NewsVine
  • YahooMyWeb

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>