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 &nbsp; 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.


If you have any questions or ideas feel free to open issue on github. Thank you!
Back on top