JonathanLeighton.com — jQuery Date Input

jQuery Date Input

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

Small (about 250 lines of code)
Fast
Pretty by default

Demo

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

Download

Download Date Input from the jQuery plugins repository, or try the Subversion repository.

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.

Include jQuery (I am assuming you already know how to do that)

Include the Date Input plugin:

<script type="text/javascript" src="jquery.date_input.js"></script>

Include the CSS:

<link rel="stylesheet" href="date_input.css" type="text/css">

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:

Bulgarian, Bulgaria
Czech, Czech Republic – Jiri Melcak
Danish, Denmark – Jan Christensen
Dutch, The Netherlands – Edwin Martin
English, Great Britain – This is the default so there is no translation file
Estonian, Estonia – Taimar Teetlok
French, France – Jérôme TEISSEIRE
German, Germany – Stefan Rado
Hebrew, Israel
Hungarian, Hungary – Horváth Balázs
Indonesian, Indonesia
Italian, Italy
Norwegian, Norway
Polish, Poland – Adam Kozubowicz
Portuguese, Portugal – Jean Reis
Russian, Russia – Cyrill Udartcev
Slovak, Slovakia – Erik Márföldi
Spanish, Spain – Sebastian Romano
Swedish, Sweden – Christian Jarhult
Thai, Thailand – Tanongsak Yingpadungsab
Turkish, Turkey
Ukrainian, Ukraine

If you have made a translation for a language not listed here, it would be great if you could attach your translation file to a new ticket on the issue tracker. Please make sure your translation is in UTF-8 format.

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:

Firefox 2.0
IE 7
IE 6
Safari 3 (tested on Windows, probably works on Mac too)
Opera 9

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 ;)

Feedback

For bug/feature requests, translations, etc, please create a new ticket on the issue tracker. 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.

I have tried to make the CSS work fairly well when plugged into an already styled page (such as this one). The font styling is inherited but the rest should be dealt with explicitly. If, whilst using this plugin, you make any improvements to the default styling, please feel free to send them to me.

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.