Posted on

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:

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 
 */
$.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;

    $('').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  = '';
        var dayContent   = '';

        for (i=minYear; i<=currentDate.getFullYear(); i++) {
            if(i == year) {
                yearContent += '';
            } else {
                yearContent += '';
            }
        }
        yearContent += endSelect;

        for (i=1; i<=12; i++) {
            if(i == month) {
                monthContent += '';
            } else {
                monthContent += '';
            }
        }
        monthContent += endSelect;

        for (i=1; i<=31; i++) {
            if(i == day) {
                dayContent += '';
            } else {
                dayContent += '';
            }
        }
        dayContent += endSelect;

        switch(settings.dateFormat) {
            case 'd-m-Y':
                content = '
' +
                dayContent + '
 
' +
                monthContent + '
 
' +
                yearContent + '
';
                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 🙂