• Flowplayer
• jQuery Tools
• Login
• Logout

Demos

• Minimal setup for dateinput
• A large skin for Dateinput
• Customizing Dateinput behavior
• Prompting for start and end dates
• Calendar that is always available
• Localizing the Dateinput (french)

Configuration

Input attributes

You can also configure the dateinput by supplying attributes for the input field. For example:

<input type="date" class="date" data-value="2004-03-20" min="2004-02-20"/>

Here are all attributes supported by this tool. They are all are valid HTML5 attributes.

Supplying date values

This tool accepts date values from various places: configuration, JavaScript API and from input attributes.

  // supply date values from the configuration
  $(":date").dateinput({ value: new Date(2010, 3, 3), min: -10, max: 30 });
 
  // supply date values from the API
  var api = $(":date").data("dateinput");
 
  api.setValue('2012-10-10');
 
  // set as JavaScript Date object
  api.setValue(date);
 
  // an empty argument moves the calendar to currently selected month
  api.setValue();
 
  // chaining is possible
  api.setValue(date).setMax(10);

  <!-- supply a date value from an input attribute -->
  <input type="date" min="-20" max="2013-03-10" />

You can supply the value in three different ways.

1. A rfc3339 formatted string such as 2015-11-25
2. A number such as 20. this is the number of days from the present date. A positive value moves forward (to the future) and a negative value goes backward (to the past)
3. A JavaScript Date object

Formatting

Formatting specifies how the dates are displayed for the user. The formatting pattern can be set in the format configuration variable or fed as argument to the getDate() function in the API. Here are a few examples:

$(".date").dateinput({
 
  // this is displayed to the user
  format: 'You selected: dddd / dd.mm.yyyy',
 
  // a different format is sent to the server
  change: function() {
  var isoDate = this.getValue('yyyy-mm-dd');
 
  $("#backendValue").val(isoDate);
  }
  });

Formatting characters can be mixed with other characters and you can specify as many as you like.

List of formatting characters

Skinning

Skinning is the same as writing CSS against the dateinput HTML layout. Here is an example CSS file and the default HTML layout. This tool allows you to customize the id and class names with the css configuration option. For example:

$(".date").dateinput({
  css: {
    prefix: null,
    root: 'dateinput',
    head: 'datehead'
  }
});

Prefix

All ids and class names are prefixed by the value specified in the prefix property, allowing you to give them one common "namespace". This avoids potential clashes with other CSS names in your web application. By setting this value to null the prefix is not used, allowing you to use shorter names. The following table lists all properties supported by the css configuration option. By default the tool uses a prefix "cal" which is colored blue in the default value column.

CSS names

Scripting API

First make sure you have familiarized yourself with jQuery Tools scripting.

Events

First make sure you have read about Events in jQuery Tools. All event listeners receive the Event Object as the first argument. Here is an example:

// select an input field and assign an event listener to it.
$(":input.date").change(function(event, date) {
  console.info("a date was selected", date);
});

Localization

You can localize the dateinput to your language with a static $.tools.dateinput.localize call, after which you can use the dateinput with another language. The tool uses the following call internally to enable English localization:

  // built-in localization
  $.tools.dateinput.localize("en", {
  months: 'January,February,March,April,May,June,July,August,September,October,November,December',
  shortMonths:  'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec',
  days:         'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
  shortDays:    'Sun,Mon,Tue,Wed,Thu,Fri,Sat'
  });

To add the French localization you should do the following:

  // example French localization
  $.tools.dateinput.localize("fr",  {
  months:      'janvier,février,mars,avril,mai,juin,juillet,août,' +
  'septembre,octobre,novembre,décembre',
  shortMonths: 'jan,fév,mar,avr,mai,jun,jul,aoû,sep,oct,nov,déc',
  days:        'dimanche,lundi,mardi,mercredi,jeudi,vendredi,samedi',
  shortDays:   'dim,lun,mar,mer,jeu,ven,sam'
  });

Note: the '+' above is only to indicate the list of months is shown on two lines.

Notice that all special characters need to be escaped. I used this list to find the special entities for French characters. After the localization is in place you can use the French language by supplying lang: 'fr' in your configuration. Or you can make French the default language by editing the global configuration as follows: $.tools.dateinput.conf.lang = 'fr';

• report a bug »
• 
• What's new in v1.2.6 »