使用 javascript 操作 HTML 输入（日期）类型中的日期

debugcn 发表于 Dev

麦迪瓦

我有一个 HTML 日期输入类型，我想在 javascript 中以编程方式操作它。我只是不明白。

我看到最普遍接受的操纵日期的方式是这样的：

var c = new Date();
c.setDate(c.getDate() + 1);

我可以从输入中获取日期：

c = document.getElementById("date1").valueAsDate

我可以设置输入的日期：

document.getElementById("date2").valueAsDate = c

我可以操纵日期c：

c.setDate(c.getDate()+1)

使用c作为临时值，我能够相对于其他操纵一个日期对象的值：

c = document.getElementById("date1").valueAsDate
c.setDate(c.getDate()+1)
document.getElementById("date2").valueAsDate = c

但是，我无法在不使用临时变量的情况下将日期从一个对象传输到另一个对象，而对其本身进行的任何操作都无法进行。

例如，虽然：

c = document.getElementById("date1").valueAsDate

和

document.getElementById("date2").valueAsDate = c

都是有效的，它们不能直接操作：

document.getElementById("date1").valueAsDate 
        = document.getElementById("date2").valueAsDate

以上无效

我有时似乎很接近，但我总是需要那个临时变量。

我想我有两个问题：

我对这些使它们不可转让（在它们之间）的价值有什么不理解？
从文档元素中获取值、通过添加一天并将其发回来操作它的“最干净”代码是什么？

罗布

使用valueAsDate复制值符合HTML 规范（最新编辑器草案），并且可以在 Chrome 中使用。但是，日期输入还没有得到很好的支持，因此您应该包括功能测试以避免错误并在不支持您要使用的功能的情况下提供回退。

“干净”的代码不一定是最短或最少的代码。我的目标是健壮性、可读性和可维护性，而不是“干净”。

为此，无需使用valueAsDate将值从一个输入复制到另一个输入，只需分配该值。这在任何地方都有效。

// Copy using value from one input to another
// Supported everywhere
function copyValue() {
  document.getElementById('i1').value = document.getElementById('i0').value;
}

// Copy using valueAsDate from one input to another
// Throws errors where valueAsDate is not supported
function copyDate(){
  document.getElementById('i1').valueAsDate = document.getElementById('i0').valueAsDate;
}

// Copy using valueAsDate and add a day
// Include simple feature test, no fallback
function copyAddDate(){
  var d = document.getElementById('i0').valueAsDate;
  // If valueAsDate not supported, return
  if (d === null) {
    // Provide fallback
    console.log('valueAsDate not supported');
    return;
  }
  d.setDate(d.getDate() + 1);
  document.getElementById('i1').valueAsDate = d;
}

Date: <input type="date" id="i0" value="2017-08-20"><br>
Date: <input type="date" id="i1" readonly>
<button onclick="copyValue()">Copy value</button>
<button onclick="copyDate()">Copy date</button>
<button onclick="copyAddDate()">Copy and add 1 day</button>

然而，输入类型日期并没有得到很好的支持（例如 Safari、Firefox 49），所以虽然这在最新的 Chrome 浏览器中有效，但在其他浏览器中却没有。

所以回答你的问题：

我对这些使它们不可转让（在它们之间）的价值有什么不理解？

没什么，他们应该在一个合规的实现中。然而，这样的人并不多。

从文档元素中获取值、通过添加一天并将其发回来操作它的“最干净”代码是什么？

我想你已经知道了，但你应该包括一些功能测试：

var c = document.getElementById("date1").valueAsDate;
// Check that a Date was returned
if (Object.prototype.toString.call(c) == '[object Date]') {
  c.setDate(c.getDate()+1);
  document.getElementById("date2").valueAsDate = c;
} else {
  console.log('Didn\'t get a Date');
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。