day-month-year-calendar

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

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