Date format - JQuery UI

by mundie

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/i18n/jquery-ui-i18n.min.js"></script>
<form id="itemAuthorForm" action="message.html" method="post">
    <ul>
        <li>
            <label for="dob" th:text="@{Date of Birth : }">Date of Birth :</label>
            <input type="text" autocomplete="on" required="required" name="dateOfBirth" id="dateOfBirth" th:field="*{dateOfBirth}" />
        </li>
        <li>
            <label for="doe" th:text="@{Died on Date  : }">Died on Date :</label>
            <input type="text" autocomplete="on" required="required" name="expiredDate" id="expiredDate" th:field="*{expiredDate}" />
        </li>
        <li>
            <input type="submit" value="Save" id="submitbtn" name="submitbtn" />
            <input type="reset" value="Reset " id="authorReset" name="authorReset" />
            <input id="authorCancel" type="button" value="Cancel" />
        </li>
    </ul>
</form>

CSS

ul li {
    display: block;
    float: left;
    width: 95%;
    margin: 0.01em 0.5em;
    border-top: #fff solid 1px;
    border-bottom: #aaa solid 1px;
    padding: 1em 0 0.5em;
}

JavaScript

var today = new Date();

function parseDMY(value) {
    var date = value.split("/");
    var d = parseInt(date[0], 10),
        m = parseInt(date[1], 10),
        y = parseInt(date[2], 10);
    return new Date(y, m - 1, d);
}
var authorValidator = $("#itemAuthorForm").validate({
    rules: {
        dateOfBirth: {
            required: false,
            dateITA: true,
            dateLessThan: '#expiredDate'
        },
        expiredDate: {
            required: false,
            dateITA: true,
            dateGreaterThan: "#dateOfBirth"
        }
    },
    onfocusout: function (element) {
        if ($(element).val()) {
            $(element).valid();
        }
    }
});

var dateOptionsDOE = {
    maxDate: today,
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    onClose: function (selectedDate) {
        $("#dateOfBirth").datepicker("option", "maxDate", selectedDate);
    }
};
var dateOptionsDOB = {
    maxDate: today,
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    onClose: function (selectedDate) {
        $("#expiredDate").datepicker("option", "minDate", selectedDate);
    }
};

jQuery.validator.addMethod("dateGreaterThan",

function (value, element, params) {
    var theDate = parseDMY(value);
    var paramDate = parseDMY($(params).val());
    if ($(params).val() === "") return true;

    if (!/Invalid|NaN/.test(theDate)) {
        return theDate > paramDate;
    }
    return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val()));
    }, 'Must be greater than {0}.');

jQuery.validator.addMethod("dateLessThan",

function (value, element, params) {
    var theDate = parseDMY(value);
    var paramDate = parseDMY($(params).val());
    if ($(params).val() === "") return true;

    if (!/Invalid|NaN/.test(theDate)) {
        return theDate < paramDate;
    }

    return isNaN(value) && isNaN($(params).val()) || (Number(value) < Number($(params).val()));
    }, 'Must be less...