jQuery UI – Adding a DatePicker to Make Calendar/Date Selector

Datepicker is a part of jQueryUI which allows you to include a calendar. This does two things:

• Makes it easier for the end user to pick a date
• Makes for more consistent and correctly formatted dates, so it will be easier to work with form processors that need to handle those dates.

You might wonder why you need consistency, but dates have so many different ways of being displayed. Consider 07-08-2013. Is that August 7th, or July 8th. Depending upon your geographic location, it will depend as to which is correct – to you. Additionally dates can have a year first, use dashes, slashes, and even dots to separate a date section. Consider the following dates for November 15th, 2013. Of course this is a very small section of the overall ways that you can possible write a date. So having something that will help you, will make processing much easier.

• 15 Nov 2013
• 15-11-2013
• 11-15-2013
• 11/15/2013
• 11.15.2013
• Nov 15, 2013
• November 15, 2013

HTML Code

The HTML for you datepicker is in most cases just an input tag of type text. No HTML5 elements are needed, just a normal form tag.

JavaScript Code

You will have a selector that needs to select your element. When the user clicks in the selected element, it will automatically display the calendar for you.

$('.calendar').datepicker();

With no properties it comes fairly robust, but simple. When a user clicks on a date in the calendar, it will put the date into the textbox for the user automatically.

Of course, there are a lot of properties you can apply to customize your calendar.

 Changing the Display Animation

By default the calendar just “pops” into existence. This can be sudden, and jarring for the user. So instead, you can set an animation type.

$('.calendar').datepicker({
  showAnim: 'slideDown'
});
// showAnim options include: show, slideDown, fadeIn, blind, bounce, 
// clip, drop, fold, slide
// The first 3 are the most common to use.

Display Additional Month(s)

By default you only see one month at a time. However, you can see more months by changing the numberOfMonths property.

// shows 2 months, current and next. To show additional months, change the number
$('.calendar').datepicker({
  numberOfMonths: 2
});

Watch on YouTube

 

More Advanced Parameters

There are other parameters that can be set to give additional functionality.

Changing the Date Format

As was mentioned, dates have many ways that can be formatted. While the default is US standard, mm/dd/yyyy, jQueryUI provides various others formats.

// change the format of the date to ISO 8601 - yy-mm-dd
$('.calendar').datepicker({
  dateFormat: 'yy-mm-dd'
});

You can also use, d M, y – as a short date format. DD, d MM, yy gives a full date format. Different formats can be created, based upon what is passed to the dateFormat parameter.

Trigger by Image

You can display an image beside the textbox. In addition to the image appearing, you can click on the image to make the calendar appear.

// Display an icon beside the textox
$('.calendar').datepicker({
  showOn: "button",
  buttonImage: "images/calendar.gif",
  buttonImageOnly: true
});

Specify a Date Range

jQuery also lets you specify a range of dates, updating the min and max for the two dates based upon what is selected. Assuming there are two input boxes with an id of to and from.

$( "#from" ).datepicker({
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
});
$( "#to" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  }
});

Watch on YouTube

jQuery UI – Adding a DatePicker to Make Calendar/Date Selector was originally found on Access 2 Learn