jQuery plugin – split MySql date format value of a form element into select form elements

Here is a simple and quick jQuery plugin that will split the MySql date format values of an form element into select form elements.

Html element:

<input type="hidden" name="birth_date" id="birth_date" value="1985-03-25" />

Call the plugin:

$(function() {
    $('#birth_date').birthDate();
});

And the plugin:

/**
 * Simple plugin that converts an hidden html element
 * that has a MySql date format value into select elements
 *
 * @author Calin Rada <[email protected]>
 */
$.fn.birthDate = function( options ) {

    if($(this).length == 0) {
        return false;
    }

    var settings = $.extend({
        dateFormat: "d-m-Y"
    }, options );

    var currentDate = new Date();
    var minYear = currentDate.getFullYear() - 110;

    $('<span id="birthDatePlugin"></span>').insertAfter($(this));

    if($('#birthDatePlugin').length > 0) {

        var dates = $('#birth_date').val().split('-');
        var year  = dates[0];
        var month = dates[1];
        var day   = dates[2];

        var content      = '';
        var yearContent  = '<select id="birth_year" class="form-control">';
        var monthContent = '<select id="birth_month" class="form-control">';
        var dayContent   = '<select id="birth_day" class="form-control">';
        var endSelect    = '</select>';

        for (i=minYear; i<=currentDate.getFullYear(); i++) {
            if(i == year) {
                yearContent += '<option value="'+i+'" selected>'+i+'</option>';
            } else {
                yearContent += '<option value="'+i+'">'+i+'</option>';
            }
        }
        yearContent += endSelect;

        for (i=1; i<=12; i++) {
            if(i == month) {
                monthContent += '<option value="'+i+'" selected>'+i+'</option>';
            } else {
                monthContent += '<option value="'+i+'">'+i+'</option>';
            }
        }
        monthContent += endSelect;

        for (i=1; i<=31; i++) {
            if(i == day) {
                dayContent += '<option value="'+i+'" selected>'+i+'</option>';
            } else {
                dayContent += '<option value="'+i+'">'+i+'</option>';
            }
        }
        dayContent += endSelect;

        switch(settings.dateFormat) {
            case 'd-m-Y':
                content = '<div class="col-lg-2">' +
                dayContent + '</div> <div class="col-lg-2">' +
                monthContent + '</div> <div class="col-lg-2">' +
                yearContent + '</div>';
                break;
        }

        $('#birthDatePlugin').html(content);

        $('#birth_year, #birth_day, #birth_month').on('change', function(){
            var newVal = $('#birth_year').val()+'-'+$('#birth_month').val()+'-'+$('#birth_day').val();
            $('#birth_date').val(newVal);
        })
    }
}

And the result:

If this helped you, i’m glad :)

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Leave a Reply

Your email address will not be published. Required fields are marked *

*


7 + eight =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>