Q:

HTML fade out choose date and set current date

I have copied this code to practice:
<!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 would I close off the pickup date box and set the current date? and it cannot be adjustable. And also grey out number of days: so that also cannot be adjustable, but still functional for the result to return.

A:

You have to disable the input element pickup date first with disabled.
<input type="date" class="textbox" id="pick_date" name="pickup_date" disabled />

Next, get current date and assign it to pick_date
document.getElementById("pick_date").value = new Date().toISOString().slice(0,10);

To calculate date difference, you should first see the differences between their unix timestamps. And you get it using getTime()
function GetDays(){
            var dropdt = new 
Date(document.getElementById("drop_date").value).getTime();
            var pickdt = new 
Date(document.getElementById("pick_date").value).getTime();

            return parseInt((dropdt- pickdt) / (24 * 3600 * 1000));

}

https://jsfiddle.net/ktr7z024/2/

