Question

I have two text boxes which is loaded with jquery masked date input.

<input type="text" id="frm_date" name="frm_date" />

<input type="text" id="to_date" name="to_date" />

With the help of masked input, the values are being separated by ‘/’ and taken something like 02/03/2011 .

I want to validate accurately that the TO date shouldn’t be lower than the from date, From date shouldn’t be greater than the TO date and both TO date and FROM date shouldn’t be equal by just giving an alert box to inform the user to correct the values.

What is the best way to do this ?

Answer 1

Do you want a datepicker? jsFiddle

$('#to_date, #frm_date').datepicker({
    onSelect: function(dateText, inst) {
        var from, to, fromText, fromArray, toText, toArray;

        fromText = $('#frm_date').val();
        toText = $('#to_date').val();

        if(fromText && toText){
            fromArray = fromText.split('/');
            toArray = fromText.split('/');
            from = new Date(parseInt(fromArray[2], 10), parseInt(fromArray[0], 10), parseInt(fromArray[1], 10));
            to = new Date(parseInt(toArray[2], 10), parseInt(toArray[0], 10), parseInt(toArray[1], 10));

            if( from.getTime() >= to.getTime() ){
                alert('start after finish date!')
            }
        }
    }
});

Or with bare inputs:

$('#to_date, #frm_date').change(function() {
    var from, to, fromText, fromArray, toText, toArray;
    //same everything here
});

​