home details pricing about/help feedback
     




jQuery.calendarPicker

by Roberto Bicchierai

A free ultra-light calendar

About the component

This component is a light-weight calendar/date-picker.
It is described on detail here on my blog.

Some features:

  • supports internationalization (supports do not necessary means it is implemented:-) )
  • supports changing current date
  • supports mouse wheel scrolling
  • supporting (deferred) callback on date selection
  • supports variable number of years, months and days
  • supports next/prev arrows


Try it

selected date:
today today
wheel enabled, no arrows wheel disabled, show arrows, larger

Usage

The basic usage will looks like: $("#calendarFilterBox").calendarPicker();

Of course you will probably need to do something with selected date.
In this case the callback function will help you:

var dateSelector;
$(function(){
  dateSelector=$("#calendarFilterBox").calendarPicker({callback:function(cal){
    alert(cal.currentDate);
  }});
});

A function will allow to change the current date. For instance to set date to today:

dateSelector.changeDate(new Date());

A more comprehensive example with names customization will looks like:

$(function(){
  dateSelector=$("#calendarFilterBox").calendarPicker({
    monthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    useWheel:true,
    callbackDelay:500,
    years:1,
    months:3,
    days:4,
    showDayArrows:false,
    callback:function(cal){
       $("#mydate").html(cal.currentDate+"");
  }});
});

Sources

Download sources and examples here.

This component is released under MIT license. Enjoy it!. For feedback or question use my blog: http://roberto.open-lab.com.
See also jquery plugin page and vote me!.