day-month-year-calendar

It is a jQuery plugin that creates three select boxes (day, month, year) for one input field with date

Usages

Next example shows input and calendar. Changes on calendar affect input value.

$('#example_1 .example_input').dayMonthYearCalendar({
    container: $('#example_1 .selects_container')
    , hideInput: false
});

You can set month names.

$('#example_2 .example_input').dayMonthYearCalendar({
    container: $('#example_2 .selects_container')
    , hideInput: false
    , monthNames: $.datepicker._defaults.monthNames
});

You can set minimum and maximum values for date.

$('#example_3 .example_input').dayMonthYearCalendar({
    container: $('#example_3 .selects_container')
    , hideInput: false
    , monthNames: $.datepicker._defaults.monthNames
    , minDate: new Date(2010, 3, 15)
    , maxDate: new Date()
});

It is possible to change date format.
You must set two functions: convert String to Date and other function that convert Date to String. In this example "formatDate" function from jQuery UI Datepicker is used to convert Date to String. Moment.js is used to convert String to Date.

$('#example_4 .example_input').dayMonthYearCalendar({
    container: $('#example_4 .selects_container')
    , hideInput: false
    , monthNames: $.datepicker._defaults.monthNames
    , minDate: new Date(2010, 3, 15)
    , maxDate: new Date()
    , dateFormatFunction: function(date) {
      // date -> string
      return $.datepicker.formatDate('MM d, yy',date);
    }
    , dateParseFunction: function(dateString) {
      // string -> date
      return moment(dateString, 'MMM D, YYYY').toDate();
    }
});

Styles

Selects have css classes "dmy-cal-days", "dmy-cal-months", "dmy-cal-years". You can specify your class names. There are options: "daysClass", "monthsClass", "yearsClass".

Events

You should bind event "dmy:update" on selects, if you want to watch for each select changes.

$('#example_4 .selects_container select').bind('dmy:update', function(){...});

Options

Name	Default	Type	Description
minDate	today - 100 years	Date	Minimum date is enabled for choose
maxDate	today + 100 years	Date	Maximum date is enabled for choose
monthNames	1..12	Array of String	Array of months for options
daysClass	dmy-cal-days	String	Style class for day select
monthsClass	dmy-cal-months	String	Style class for month select
yearsClass	dmy-cal-years	String	Style class for year select
daysEmptyText	dd	String	Empty option text for day select
monthsEmptyText	mm	String	Empty option text for month select
yearsEmptyText	yyyy	String	Empty option text for year select
hideInput	true	Boolean	Hide input text field
dateFormatFunction	dd.mm.yyyy	Function (Date)	Function that convert Date to String
dateParseFunction	dd.mm.yyyy	Function (String)	Function that convert String to Date

Requirements

jQuery: >=1.7.0