Easy jQuery

In this post I would like to tell about jQuery Date Input plugin, which allow user to pick up date from calendar in a couple of clicks. This plugin has a lot of advantages:

• very simple to implement;
• small;
• fast;
• pretty by default;
• already localized on more than 20 languages;
• easy customizable.

To use this plugin you should include jQuery library and plugin file:

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

Include CSS file:

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

Now you should initialize plugin. There are two ways to do it.

• you can give class “date_input” to all your date input controls and call this function:

  $($.date_input.initialize);

• or you can call date_input function like this:

  $("#input_control").date_input();

  where “input_control” is id of your input control.

You can change first day of the week:

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

where 0 is Sunday, 1 is Monday etc.

From plugin home page you can download include files with localization for your language and include it too. If there is no localization for your language you can easy translate month names, short month names and short day names, put it in separate file and include it in your page. For example, localization for Spanish language looks like this:

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"]
});

You can also change default date format. If you want to do this - you should replace two plugin functions by your own: stringToDate, which takes a string and returns a Javascript Date object, and dateToString which takes a Javascript Date object and returns a string.
On plugin home page you can find how to replace function to present date in format YYYY-MM-DD.
But I’ll show you how present date in format DD/MM/YYYY:

$.extend(DateInput.DEFAULT_OPTS, {
  stringToDate: function(string) {
    var matches;
    if (matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/)) {
      return new Date(matches[3], matches[2] - 1, matches[1]);
    } 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 dom + "/" + month + "/" + date.getFullYear();
  }
});

And, finally:

Open this example in new window and view source code.