Java Ninja Chronicles By Norris Shelton

Things I learned in the pursuit of code

There are two date pickers. jQuery has one, but it is simplified. The one that I like to use is by Keith Wood. His datepicker plugin formed the basis of the jQuery datepicker plugin. Keith’s plugin is available here.

Here is an example of the calendar.  The calendar will have the following features:

  • default date (defaultDate)
  • maximum date (maxDate)
  • triggering icon

Here is the script for the calendar

$(document).ready(function() {
     $('#recentDate').datepick({
          defaultDate: -1,
          maxDate: -1,
          showTrigger: '#recentDateImg'
     });
});

Here is what the html looks like:

<label for="recentDate">
     Recent <input type="text" id="recentDate" name="recentDate" size="10" value="${yesterday}">
     <div style="display:none">
          <img id="recentDateImg"
               src="/intranet-templating/bhsi/js/images/calendar.gif"
               alt="Recent Date"
               class="trigger">
     </div>
</label>

Notice that the triggering icon is surrounded by a DIV that is set to not display. If this is not done, then 2 icons will be displayed.

This is what the screen will look like:

Here is what the calendar looks like when it is open.  Notice that the dates after yesterday are greyed-out and are not selectable.  This is the maxDate at work.

 

In this case, maxDate was specified as -1.  That means today’s date minus 1 day or yesterday.  You can specify a date that is relative to today by using d for days, w for weeks, m for months, y for years or just specify a date as a string or as javascript.  If you are using a relative date, you can string them together.  -1d -1m is a month from yesterday.  Positive and negative numbers are allowed.

December 8th, 2010

Posted In: javascript, JQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

WP to LinkedIn Auto Publish Powered By : XYZScripts.com