Validate date range in javascript

Question

Date format is in "mm/dd/yyyy". It is not giving me proper result. It is only validating month.

    <input type="text" name="durationstart" id="durationstart" value="">
     <input type="text" name="durationend" id="durationend" value="" onclick="return chk_val12()" >

        <script>
        function chk_val12()
        {
            var durationstart   =   document.getElementById('durationstart').value;
            var durationend =   document.getElementById('durationend').value;

            if(durationstart>durationend)   
            {
                alert("Please enter proper duration range");
                return false;
            }   
            else
            {
                return true;
            }

        }
        </script>

Answer 1

You cannot compare validate date like this.

Text box contains the value of string dataType. So what the below code does is

if(durationstart>durationend)   // Invalid

Instead parse it to date object.

---

Updates:

Though it works, there are chances for browser compatibility so here I have written the full date parsing

function chk_val12() {
    var durationstart = document.getElementById('durationstart').value;
    var durationend = document.getElementById('durationend').value;
    var st = durationstart.split("/");
    var en = durationend.split("/");
    var startDate = new Date(st[2], (+st[0] - 1), st[1]);                                          
    var endDate = new Date(en[2], (+en[0] - 1), en[1]);
    if (startDate > endDate) {
        alert("Please enter proper duration range");
        return false;
    } else {
        return true;
    }
}

JSFiddle

FYI: Make sure user enters the right date format.

What it does?

1) Split the dateString you have like

var st = durationstart.split("/");

2) Parse it like new Date(YYYY, MM, DD)

var startDate = new Date(st[2], (+st[0] - 1), st[1]);

Answer 2

Extracting and comparing formatted date strings from text inputs

You'll need to use the Date object's parse method to convert the input strings into milliseconds, then compare the 2:

var durationstart = Date.parse( document.getElementById('durationstart').value );
var durationend   = Date.parse( document.getElementById('durationend').value   );

This depends upon the input being entered in a way the Date.parse method expects though — in formats following either the Wed, 3 Feb 2014 or 2014-02-03 standards.

Converting arbitrary formats into date objects

If the user is likely to use another input format, you may want to use a plugin such as Sugar to parse a wider range of possible formats. Sugar adds a Date.create( inputString ) method which accepts the following formats.

Using HTML5 @type=date inputs

An alternative for modern browsers is to use inputs of type date instead of text, which would allow you to extract the date values directly without fear of the user entering an unparseable format. Using this method you would change the HTML to:

<input type="date" name="durationstart" id="durationstart" value="">
<input type="date" name="durationend" id="durationend" value="" onclick="return chk_val12()" >

…and use the native valueAsDate method to extract the values as follows:

var durationstart = document.getElementById('durationstart').valueAsDate;
var durationend   = document.getElementById('durationend').valueAsDate;

Answer 3

Try this

function dateCheck() {

    fDate = Date.parse(document.getElementById("durationstart").value);
    lDate = Date.parse(document.getElementById("durationend").value);

    if(fDate >lDate )   
        {
            alert("Please enter proper duration range");
            return false;
        }   
        else
        {
            return true;
        }

}