Combodate dropdown date and time picker

Intro

This plugin replaces <input type="text"> with dropdown elements to pick day, month, year, hour, minutes and seconds.
You can submit form as usual because dropdowns don't have name attribute and not submitted.

• support date, time, datetime
• 12h / 24h format
• based on momentjs
• i18n

Demo

Date

Source

Datetime 24h format

Source

Datetime 12h format

Source

Time

Source

Docs

Get started

1. Include jquery, moment.js and combodate.js on your page

<script src="js/jquery.js"></script> 
<script src="js/moment.min.js"></script> 
<script src="js/combodate.js"></script> 

2. Markup input elements to be used for date and time values

<input name="date_of_birth" value="15-05-1984" data-format="DD-MM-YYYY" data-template="D MMM YYYY"> 

3. Apply $().combodate() method with required options

$('input').combodate({
    minYear: 1975,
    maxYear: 2013,
    minuteStep: 10
});   

Options

All options can be defined via javascript or as data-* attributes.

Name	Type	Default	Description
format	string	DD-MM-YYYY HH:mm	In this format date is stored in original input. List of tokens.
template	string	D / MMM / YYYY H : mm	In this format dropdowns are displayed. Spaces are converted to   for layout tuning.
value	mixed	null	Initial value. Used as default value if not defined in <input>.
minYear	int	1970	Minimum value in years dropdown.
maxYear	int	2015	Maximum value in years dropdown.
yearDescending	bool	true	Years order.
minuteStep	int	5	Step of values in minutes dropdown.
secondStep	int	1	Step of values in seconds dropdown.
firstItem	string	'empty'	What is shown in first item of all dropdown. Can be empty|name|none.
errorClass	string	null	Css class applied if date is incorrect, e.g. Feb, 31. If null dropdowns appears in red border.
customClass	string	null	Css class applied to each dropdown.
roundTime	bool	true	Whether to round minutes and seconds if step > 1. E.g. if minuteStep = 5 date 2013-05-04 12:21 will be shown as 2013-05-04 12:20.
smartDays	bool	false	If false - number of days in dropdown is always 31. If true - number of days depends on selected month and year.

Methods

All methods can be called as $(element).combodate('method', parameters).

Method	Parameters	Description
getValue	format	Returns current value. If format is omitted, options.format is used. If format is null, returned value is Momentjs object.
setValue	value	Sets new value. Value can be javascript Date() object or string in options.format.

i18n

For i18n include corresponding file for momentjs: https://github.com/timrwood/moment/tree/master/lang.