jQuery UI: Date Picker

Date Picker

by mandarin6b0

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<input id="birthdate" type="text">
<div id="required_birthday" style="display: none;">Please select the date of birth</div>
<br>
<input id="joiningdate" type="text">
<div id="required_joiningdate" style="display: none;">Please add the date of joining</div>
<br>
<input id="leavingdate" type="text">
<div id="errormsg" style="display: none;">Invalid date</div>

JavaScript

$(function () {
    var validateData = function () {
        var bday = $('#birthdate').val();
        var jday = $('#joiningdate').val();
        var lday = $('#leavingdate').val();

        var errors = [];

        if (!bday) {
            errors.push('#required_birthday');
        }
        if (!jday) {
            errors.push('#required_joiningdate');
        }

        if (bday && jday && bday > jday) {
            errors.push('#errormsg');
        }
        if (bday && lday && bday > lday) {
            errors.push('#errormsg');
        }
        if (jday && lday && jday > lday) {
            errors.push('#errormsg');
        }

        return errors;
    };

    $("#birthdate, #joiningdate, #leavingdate").datepicker({
        textboxImageOnly: true,
        textboxImage: 'images/calendar.png',
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy / mm / dd",
        yearRange: "-40:+0",
        maxDate: new Date(),
        onClose: function () {
            var err = validateData();
            $('#errormsg, #required_birthday, #required_joiningdate').hide();
            if (err.length > 0) {
                $(err.join(',')).show()
            }
        }
    });
});