Using the jQuery UI Datepicker

I have really been into learning and using jQuery the last few weeks.  I keep coming across some very simple functions that provide a much nicer UI experience.  One of these is the Datepicker widget that is a part of the jQuery UI package.  The widget is super fast and is customizable in a variety of ways.  It takes only a couple of lines of code to add into your page.  To place the widget into your code with the default setup is simply this:

<code lang="javascript[lines]"><script type="text/javascript">
$(function() { $("#datepicker").datepicker(); }); </script>

I am not going to post any demos, as the jQuery UI page for this widget has all you need.  It also lists out all the options you can pass in to control the widget as well.  Some of the cool features I like are:

  • You can easily set the date format it returns
  • You can restrict the selectable date range
  • You can display more than 1 month at a time
  • You can display the widget inline


comments powered by Disqus