Calculate number of days between two input type = "date" in html

Question

i have this piece of html code where i have two date pickers (input type="date") and a textfield with id="numdays". I want to calculate the number of days between the two selected dates and display the number in my textfield. I also want to restrict selection of a date earlier than today. i think this can be done throught javascript or jquery. Your help would be much appreciated. Thanks.

<div id="reserve_form">

<div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" </p></div>

<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date"/></p></div>

<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays" name="numdays"/></div>

</div>

For date-time management and processing I warmly suggest you existing libraries. Leverege on them to execute this kind of calculation. I usually work with [moment.js](http://momentjs.com/). — Alberto De Caro, Oct 06 '14 at 12:51
your markup is invalid, closing `>` is missing for `pick_date` — Bhushan Kawadkar, Oct 06 '14 at 12:52
Pravish, why did you undo Bhushan Kawadkar's edit making it possible for people to see your HTML (and not change anything else)? It was a good edit, there was a good reason for it. — T.J. Crowder, Oct 06 '14 at 12:52
@BhushanKawadkar: True, although browsers will happily produce the right result. (Doesn't mean he shouldn't fix it. :-) ) — T.J. Crowder, Oct 06 '14 at 12:53

score 3 · Accepted Answer · edited Oct 06 '14 at 14:03

You can do it like this.

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript">
        function GetDays(){
                var dropdt = new Date(document.getElementById("drop_date").value);
                var pickdt = new Date(document.getElementById("pick_date").value);
                return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
        }

        function cal(){
        if(document.getElementById("drop_date")){
            document.getElementById("numdays2").value=GetDays();
        }  
    }

    </script>
</head>
<body>
    <div id="reserve_form">

    <div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>

    <div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>

    <div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>

    </div>
</body>

how do i make it display the result automatically in the textfield when i select the two dates? thanks — Pravish, Oct 06 '14 at 13:16
Thanks for you help!!! i've edited part of my code and when i change the date, the difference in days is displayed in the textfield. — Pravish, Oct 06 '14 at 13:58

Calculate number of days between two input type = "date" in html

1 Answers1

Linked