无法使用 javascript 访问输入日期值答案

【问题标题】：Unable to access input date values with javascript无法使用 javascript 访问输入日期值
【发布时间】：2016-10-13 05:08:44
【问题描述】：

我一直在使用表单，它在提交时调用一个利用输入数据的函数。到目前为止，这对文本效果很好，但是切换到日期输入给我带来了麻烦。

我正在使用下面的代码，但是“startDate”、“endDate”的值为空。

<form onsubmit="myFunction()">
  Start Date:
  <input type="date" name="startDate" id="startDate">
  End Date:
  <input type="date" name="endDate" id="endDate">
  <input type="submit">
</form>

<!-- Form to process above date submit -->
<script>
  function myFunction() {

    var locationID = "1";
    var startDate = document.getElementById("startDate").value;
    var endDate = document.getElementById("endDate").value;
    var apiURL = "APIUrl" + locationID + "_" + startDate + "_" + endDate;
    alert("The form was submitted" + apiURL);

    $.get(apiURL, function( data ) {
      $( ".result" ).html( data );
    });
  }
</script>

警报返回 APIUrl，加上位置 ID，但日期为空白值。

有什么想法吗？

感谢您的帮助。

【问题讨论】：

这里运行良好：JS Fiddle demo;您的控制台中是否有任何报告的错误（大多数浏览器中的 F12）？
我在 jsfiddle 中运行了你的代码，它成功了：jsfiddle.net/k15sxbua
感谢您的回复，我正在使用 Chrome，我在控制台中没有看到任何明显的内容，但我有相当多的代码，所以我将删除任何不是的在上述问题中。
<form> 仍在处理提交本身。它将离开/卸载当前页面，这将自动中止 Ajax 请求。 Want html form submit to do nothing

标签： javascript jquery

【解决方案1】：

您的代码在 Chrome 中按预期工作，因为它支持 input date，但对于 IE、Firefox 和 Safari 则不是这样，您可以在此处看到：http://caniuse.com/#search=input%20date

如果你使用像 JQuery-UI 这样的库作为日期选择器可能会更好，这样所有浏览器都可以支持它

【讨论】：

【解决方案2】：

您没有指定您使用的浏览器。

由于您已经在使用 jQuery，我建议使用它来检索字段值，即

var startDate = $("#startDate").val();
var endDate   = $("#endDate").val();

这将解决可能导致您的问题的浏览器不一致。

【讨论】：

我能想象到的唯一不一致之处是浏览器无法实现<input type="date" />，但在这种情况下，它默认返回text的类型。使用HTMLInputElement 的value 属性的任何一种方式都是跨浏览器兼容的。
OP 没有指定他使用的浏览器。虽然我同意value 不应该有任何不一致的问题——如果没有问题，那么 OP 就不会首先发布他的问题。