SimpleDatePicker

jQuery SimpleDatePicker

Features

It is a really simple picker to select a date.

The plugin creates 3 selectors: day, month, year. After you select a date with these selectors, it puts the result date in an output field with the format you wish. You can send or serialize your form normally.

The following can be changed:

  • Output field
  • Order of the selectors
  • Date format for input and output
  • Name of the months
  • The default value name for every selector
  • The first and the last year can be selected
  • Callback when the selectors are changed

Examples

 

Basic: Various elements, the default values without output result.


        <p class="data"></p>


        <script src="js/jquery.simpledatepicker.js"><script>
        <script>
            $().ready(function(){
              $(".data").simpleDatePicker();
            });
        </script>
    

 

Intermediate: some features such as personalized format and output result in a hidden input.


        <span id="data"></span>
        <input id='data_hide' type="hidden" value="" />

        <script src="js/jquery.simpledatepicker.js"><script>
        <script>
            $().ready(function(){
              $("#data").simpleDatePicker(
                output:'#data2_hide',
                text: {
                    day:'Day',
                    month:'Month',
                    year:'Year'
                },
                css:'form-control',
                order:'d-m-y'
              );
            });
        </script>
    

 

Advanced: all features, preselected date, output result in text input, personalized formats, callback...

Result: 

        <span id="data"></span>
        <input id='data_hide' type="text" value="2014-02-28" />


        <script src="js/jquery.simpledatepicker.js"><script>
        <script>
            $().ready(function(){
                $("#data").simpleDatePicker({
                    output:'#data_hide',
                    text: {
                        day:'Day',
                        month:'Month',
                        year:'Year'
                    },
                    format:'dd/mm/yyyy',
                    order:'d-m-y',
                    year: {
                        start:1981,
                        end:new Date().getFullYear()
                    },
                    css:'form-control',
                    onSelect: function() {
                        $("#data_hide").css("background","#eee")
                    }
                });
            });
        </script>
    

 

Pro: Plugin callbacks and methods

Start:
End:


    <span id="data1"></span>
    <span id="data2"></span>


    <script src="js/jquery.simpledatepicker.js"><script>
    <script>
    $().ready(function(){
        $("#data2").simpleDatePicker({
            css:'form-control'
        });

        $("#data1").simpleDatePicker({
            css:'form-control',
            onSelect:function(date) {
                if (date) {
                    var parts=date.split("-");
                    var start=parseInt(parts[0],10);
                    var end=start+10;
                    $("#data2").simpleDatePicker("setYear",{
                        start:start,
                        end:end}
                    );
                    $("#data2").simpleDatePicker("setDate",start+'-01-01');
                }
            }
        });
    });
    </script>

Benefits

  • Simple It writes only 3 selectors, controls day of the month and leap years
  • Lightweight The JavaScript code is just 13.6KB minified
  • Non intrusive The result input (text or hidden) can be submitted or serialized
  • Customizable Put your CSS to make it pretty or responsive, it is simple
  • Cross Browser It works perfectly in most browsers like Chrome, Firefox, Safari, Explorer 7+

Package

It includes the documentation with some examples, the minified version to use in production and the unminified version that you can modify according to your needs.

Usage

 

You can pass options as key/value object.

Key Default value Description
output null Selector of the input field (text or hidden) to write the result date or load a date if you need it
text: {
    day:
    month:
    year:
}

null
null
null
Initial default text for every selector
months array months in english Name of the months
year: {
    start:
    end:
}

Current year
Current year-80
First and last year
format yyyy-mm-dd Output and input date format
order y-m-d Order of the selectors
css null Additional classes for every selector
onSelect null This function will be called after every selector changes
onSelect: function(date){ ... }

 

Some functions are available.

Key Description
setDate(date) Method allows you to change date
Example: $( ".selector" ).simpledatepicker("setDate", "2012-10-12");
setYear(object) Method allows you to change date
Example: $( ".selector" ).simpledatepicker("setYear", {start:2014, end:2020});
getDate() Method allows you get the date
Example: $( ".selector" ).simpledatepicker("getDate");
remove() Method allows you to remove the plugin
Example: $( ".selector" ).simpledatepicker("remove");