how can I collect form input in date format and di

2019-09-16 06:22发布

站内问答 / JavaScript
413 3 4

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>

3条回答
萌系小妹纸
2楼-- · 2019-09-16 07:02

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>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-09-16 07:02

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.

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
4楼-- · 2019-09-16 07:22

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)