In the first post on customizing the jQuery UI Date Picker, I only discussed a few of the many, many options available.

Before we begin to go through some more of these options, please read the first post on How to customize the Date Picker to learn how to get the field ID and to create/add a new JS file to your theme.

Done?  Okay, let’s get started.

Display Month or Year dropdown menus

Add a month or year dropdown to make jumping backward or forward large periods much quicker.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

Displaying a month and a year dropdown menu

Translate to your language

To download the default translations in your language, you will need to go to the jQuery UI page and download the entire package. Once you unzip the file, go to the ui > i18n folder. Here, I’m localizing into German.

jQuery(document).ready(function($) {
    $.datepicker.regional['de'] = {
	closeText: 'schließen',
	prevText: '<zurück',
	nextText: 'Vor>',
	currentText: 'heute',
	monthNames: ['Januar','Februar','März','April','Mai','Juni',
	'Juli','August','September','Oktober','November','Dezember'],
	monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
	'Jul','Aug','Sep','Okt','Nov','Dez'],
	dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
	dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
	dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
	weekHeader: 'KW',
	dateFormat: 'dd.mm.yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''};

	$.datepicker.setDefaults($.datepicker.regional['de']);
});

Date picker text translated into German

Show Week Number

Adds a week number column.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        showWeek: true
    });
});

A week column is added to the date picker display

Default Date

Set the date to highlight when the date picker first appears.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        defaultDate: '+6w'
    });
});

Other sample date ranges to use here

  • 7 days in the future: +7
  • 6 months in the past: '-6m'
  • 1 month and 7 days in the future: '+1m +7d'

The default highlighted date is set for 6 weeks into the future

Change Animation

Change the type of animation performed when the date picker is opened or closed.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        showAnim: 'drop'
    });
});

List of animations to use here

  • show (default)
  • slideDown
  • fadeIn
  • blind
  • bounce
  • clip
  • drop
  • fold
  • slide
  • To disable, use empty quotes ''

Date Range

By adding two Date Picker fields to your form, you can create a date range to select from. In our example, we have a Start Date and an End Date and we don’t want the End Date to be selected before the Start Date.

jQuery(document).ready(function($) {
    $( '#vfb-start-date-318' ).datepicker({
	changeMonth: true,
	onSelect: function( selectedDate ) {
		$( '#vfb-end-date-622' ).datepicker( 'option', 'minDate', selectedDate );
	}
     });

     $( '#vfb-end-date-622' ).datepicker({
	changeMonth: true,
	onSelect: function( selectedDate ) {
		$( '#vfb-start-date-318' ).datepicker( 'option', 'maxDate', selectedDate );
	}
     });
});

Date Range

There’s lots of other things you can do with the Datepicker and for a complete list of options, check the documentation.