Question

我正在尝试输入日期类型的表单并在页面上显示它。

时没有显示任何内容

＆＃13;

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->
}

＆＃13;

       
<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>

＆＃13;

Answer 1

错误是由于您的评论格式不正确造成的。 定义HTML注释，但在Javascript中不起作用。对于JS，请使用//Content或/* Content */。

还要小心你的JS语法。请注意我在函数的最后一行添加的+，以及HTML中的结束 ~~</input>和~~ </p>标记。 *正如RobG所说，这不是绝对必要的，但它至少对我有帮助。

//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 -->

修改：您还需要将.split('/')更改为.split('-')，因为正如您在控制台中看到的那样，日期以- s

分隔

Answer 2

要解决您的问题，您可以使用以下代码来源：

<!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>

Answer 3

如果支持输入类型日期，则返回ISO 8601格式的值yyyy-mm-dd。请注意，没有与之关联的时区。如果由Date构造函数解析，大多数现代浏览器将根据午夜UTC返回日期日期。

如果主持人位于格林威治以西的时区，则其当地日期值将偏移为时区，因此日期将为前一天。如果您希望将日期视为本地，则必须手动解析它：

＆＃13;

/* 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);
}

＆＃13;

<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>

＆＃13;

但是，并非所有使用的浏览器都支持输入类型日期，因此您应该处理它。

如何收集日期格式的表单输入并在页面上显示

3 个答案: