Jon Leighton

jQuery Date Input

Date Input is a no frills date picker plugin for jQuery. It is:

Due to lack of time, I am no longer actively developing this plugin. Sorry, but I will not be able to look at patches or bug reports. If anyone would like to take over as maintainer please get in touch.

Demo

The field below is a date input, click on it and have a play:

See also

There are a number of other date pickers for jQuery. In particular, Paul Da Silva is maintaining a fork of Date Input called jdPicker, which implements a number of additional options and features which don’t appear in the original.

Contents

Download

Download Date Input from the jQuery plugins repository, or check out the code on GitHub.

How to use it

Note: If you are using a jQuery version less than 1.2.6, you will also need to install the Dimensions plugin.

  1. Include jQuery (I am assuming you already know how to do that)
  2. Include the Date Input plugin:

    <script type="text/javascript" src="jquery.date_input.js"></script>
  3. Include the CSS:

    <link rel="stylesheet" href="date_input.css" type="text/css">
  4. Fields are turned into date inputs by getting a jQuery object of the fields you want, and calling date_input() on then.
    I find it convenient to give all my date inputs a class of date_input and transform them automatically on DOM load.
    There is an initialize method which can do this for you, like so:

    $($.date_input.initialize);

    If you want to get a bit more specific, you can do it like this:

    $(function() {
      $("#my_specific_input").date_input();
    });

Customisation

There is support for simple customisation without completely bloating the plugin. This works by letting you specify options when you call $(el).date_input({my: opts}). The options essentially replace keys in the DateInput.prototype object so you can replace any internal method like this if you want. However, there are a few “recommended” customisations you can make and I can’t promise that other customisations won’t break in future versions.

Instead of specifying options for every new date input, you can specify global defaults by overwriting or modifying DateInput.DEFAULT_OPTS. These will then be used automatically.

Internationalisation

The only strings used by Date Input are month names (January, February, etc..), short month names (Jan, Feb, etc…) and short day names (Sun, Mon, etc…). The usual way to specify a new language is to change the default options. For example the Spanish translation is:

jQuery.extend(DateInput.DEFAULT_OPTS, {
  month_names: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  short_month_names: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
  short_day_names: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sab"]
});

It’s recommended to place this in a separate file called (using the example of a Spanish translation) jquery.date_input.es_ES.js. The currently available translations are:

If you have made a translation for a language not listed here, please see the section on contributing for instructions on how to get it uploaded.

First day of the week

The day names are listed from Sunday to Saturday, as this corresponds with Javascript’s representation of days of the week being between 0 for Sunday and 6 for Saturday. The default first day of the week is 1 for Monday. You can change this in the options like so:

$(el).date_input({ start_of_week: 0 });

or:

$.extend(DateInput.DEFAULT_OPTS, { start_of_week: 0 });

Date formatting

Date formatting is done by two methods: stringToDate, which takes a string and returns a Javascript Date object, and dateToString which takes a Javascript Date object and returns a string. You can replace these two functions in the options to format the date differently. For example, the following formats dates as YYYY-MM-DD:

$.extend(DateInput.DEFAULT_OPTS, {
  stringToDate: function(string) {
    var matches;
    if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
      return new Date(matches[1], matches[2] - 1, matches[3]);
    } else {
      return null;
    };
  },

  dateToString: function(date) {
    var month = (date.getMonth() + 1).toString();
    var dom = date.getDate().toString();
    if (month.length == 1) month = "0" + month;
    if (dom.length == 1) dom = "0" + dom;
    return date.getFullYear() + "-" + month + "-" + dom;
  }
});

Browser Compatibility

Date input is known to work with the following browsers:

I only have access to Windows and Linux. If you find Date Input to work or not with the various Mac browsers, please let me know. Better still, send me a patch ;)

Contributing

Feedback

For bugs, feature requests, patches and translations, see above.

If you have something specific to ask, see my contact page. Please note that I am unable to provide individual support – if you think you’ve found a bug then by all means create a ticket, but if your question is “how can I do x?” then I probably can’t help you out. Sorry.

License

Date Input was written by me, mostly while working at Torchbox. It is released under the MIT license:

Copyright (c) 2007-2008 Jonathan Leighton & Torchbox Ltd

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.