there are two inputs

From:   <input id="from" type="date" placeholder="dd/mm/yy"><br>
To:   <input id="to" type="date" placeholder="dd/mm/yy">

I wanna pare these two inputs so as to ensure that the check out date is no earlier than the check in date. But how to pare? thx

there are two inputs

From:   <input id="from" type="date" placeholder="dd/mm/yy"><br>
To:   <input id="to" type="date" placeholder="dd/mm/yy">

I wanna pare these two inputs so as to ensure that the check out date is no earlier than the check in date. But how to pare? thx

• javascript
• html
• css
• date

• 1 The html5 date input should and shall always be formatted like yyyy-MM-dd If you try to set a value that input value that has the format dd/mm/yy then you would get a invalid value. Just thinking that you should change your placeholder... – Endless Commented Nov 26, 2016 at 15:27
• @Endless—not all implementations support date inputs. – RobG Commented Nov 26, 2016 at 21:09

6 Answers 6

This is how I would do it

HTML

<script>
    function pareDates() {
        //Get the text in the elements
        var from = document.getElementById('from').textContent;
        var to = document.getElementById('to').textContent;

        //Generate an array where the first element is the year, second is month and third is day
        var splitFrom = from.split('/');
        var splitTo = to.split('/');

        //Create a date object from the arrays
        var fromDate = Date.parse(splitFrom[0], splitFrom[1] - 1, splitFrom[2]);
        var toDate = Date.parse(splitTo[0], splitTo[1] - 1, splitTo[2]);

        //Return the result of the parison
        return fromDate < toDate;
    }
</script>

<input id="from" type="date" placeholder="dd/mm/yy"><br>
<input id="to" type="date" placeholder="dd/mm/yy">
<button onclick="pareDates()">Compare</button>

Let me know how you get on.

For Browsers which support the "date" input, the input value is a DOMString representing a date in YYYY-MM-DD format, or empty. So (if the input values are not empty) you can just pare the two strings:

const FROM = document.getElementById("from").value;
const TO = document.getElementById("to").value;
return FROM < TO;

If you want your date format to be dd/mm/yy, you can use the following function to convert the string to date :

function pareDate(str){
 // str format should be dd/mm/yyyy. Separator can be anything e.g. / or -. It wont effect
 var dt   = parseInt(str.substring(0,2));
 var mon  = parseInt(str.substring(3,5));
 var yr   = parseInt(str.substring(6,10));
 var date = new Date(yr, mon-1, dt);
 return date;
}

Then simply get the values from inputs and pare them as date

var input1 = pareDate(document.getElementById('from').value);
var input2 = pareDate(document.getElementById('to').value);

The Date object will do what you want - construct one for each date, then pare them using the >, <, <= or >=.

You can get the value of your inputs by using javascript:

var fromValue = document.getElementById('from').value;
var toValue = document.getElementById('to').value;

then use the javascript date object to convert them to dates:

var fromDate = new Date(fromValue);
var toDate = new Date(toValue);

and remove time since midnight:

fromDate.setHours(0,0,0,0);
toDate.setHours(0,0,0,0);

then pare fromDate to toDate:

if (fromDate === toDate) { ... }

You can use diff method in Moment.js

var today = new Date();
var diff = moment().diff(today, 'days');
console.log(diff); // 0

More: http://momentjs./docs/#/displaying/difference/

You can use valueAsDate and then use the parator:

 input1 = document.getElementById('from');
 input2 = document.getElementById('to');

 date1 = input1.valueAsDate;
 date2 = input2.valueAsDate;
 console.log(date1 < date2 ? 'valid' : 'invalid');