I am trying to take form input of type date and display it on page. Nothing is being displayed when
function checkin(){
var date = document.getElementById("cInDate").value;
var dateArray = date.split("/");<!-- puts date into dateArray->
var s = document.getElementById("dateI");
s.textContent = dateArray[1]"th of July";<!-- shows 2nd index of dateArray on page->
}
<form id="myForm">
<!-- collects checkin date form input -->
Check In Date: <input type="date" name="checkin" id="cInDate">
<button onclick="checkin()" >Submit</button>
</form>
<h1 class="al">Hotel Room Availability</h1>
<p class="al">You want to check in on
<span id="dateI"></span> <!-- shows checkin date -->
</p>
For solve your problem you can use this code source :
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a date with this template: 17/06/1982</p>
<input id="cInDate">
<button type="button" onclick="myFunction()">Submit</button>
<p id="dateI"></p>
<script>
function myFunction() {
var date = document.getElementById("cInDate").value;
var dateArray = date.split("/");
var s = document.getElementById("dateI");
s.textContent = dateArray[1]+"th of July";
}
</script>
</body>
</html>
If input type date is supported, it returns a value in ISO 8601 format yyyy-mm-dd. Note that there is no time zone associated with it. If parsed by the Date constructor, most modern browsers will return a Date for date based on midnight, UTC.
If the host is in a timezone west of Greenwich, its local date values be offset for the time zone so the date will be for the previous day. If you want the date treated as local, you must manually parse it:
/* Parse date string in ISO 8601 format as local
** @param {string} s - Date string like 2016-04-01
** @returns {Date} If values are invalid, returns an invalid Date
*/
function parseISODate(s) {
var b = s.split(/\D/);
var d = new Date(b[0], b[1]? b[1] - 1 : 0, b[2] || 1);
return d && d.getMonth() == b[1] - 1? d : new Date(NaN);
}
<form onsubmit="
this.dateString.value = parseISODate(this.inDate.value);
return false;
">
<input type="date" name="inDate" value="2016-07-18"><br>
<input type="text" name="dateString" size="70"><br>
<button>Convert date</button>
</form>
However, not all browsers in use support input type date, so you should deal with that.
The errors were being caused by your comments not being formatted properly. <!-- content --> define an HTML comment, but doesn't work in Javascript. For JS, use //Content or /* Content */.
Also be careful about your JS syntax. Note the + I added in the last line of your function, as well as the closing </input> and</p> tags in your HTML. *As RobG has noted this isn't strictly necessary, but it helps me at least.
//this is a javascript comment
checkin = function(){
var date = document.getElementById("cInDate").value;
var dateArray = date.split("-");
console.log(dateArray);
var s = document.getElementById("dateI");
s.textContent = dateArray[1]+"th of July";
}
<form id="myForm">
Check In Date: <input type="date" id="cInDate">
<button onclick="checkin()">Submit</button>
</form>
<h1 class="al">Hotel Room Availability</h1>
<p class="al">You want to check in on
<span id="dateI"></span></p> <!-- shows checkin date -->
Edit: You also need to change .split('/') to .split('-'), because as you can see from the console, the date is separated by -s
