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

我正在尝试使用日期类型的表单输入并将其显示在页面上。当正由您的意见没有被正确格式化造成如何以日期格式收集表单输入并将其显示在页面上

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>

来源

2016-07-15 James McKenna

_what_时什么都不显示？ – wrldbt

的错误正在显示任何内容。 定义了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('-')，因为你可以从控制台中看到，该日期由-小号

来源

2016-07-15 19:38:23

输入元素没有结束标记。 P元素的结束标记是可选的，所以这些变化什么都不做。 – RobG

OP的主要问题是语法错误。你对输入是正确的，纠正。 –

对于解决您的问题，您可以分离使用该代码来源：

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

来源

2016-07-15 19:52:59

如果输入类型日期被支持时，它返回一个ISO 8601格式的值yyyy-mm-dd。请注意，没有与其关联的时区。如果使用Date构造函数进行分析，大多数现代浏览器都将返回基于UTC的午夜日期。

如果主机位于格林威治西部的时区，则其当地日期值将在时区内偏移，因此日期将为前一天。如果你想为本地处理的日期，则必须手动解析它：

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

然而，在使用支持输入型日期并非所有的浏览器，所以你应该面对这一切。

来源

2016-07-18 05:19:01 RobG

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

回答

相关问题