Question

我有一个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

上述内容为无效

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

我想我有两个问题：

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

Answer 1

使用 valueAsDate 复制值在HTML specification（latest editor's draft）内，并且可以在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');
}

Answer 2

我不知道实际的实现，但我非常确定valueAsDate会返回一个新的Date，它是元素日期的副本，不是直接引用。 valueAsDate很可能只是一个getter / setter而不是一个实际的属性，这意味着像setDate这样的东西不会改变底层值，因为它在一个全新的，独立的上运行。因此，您需要检索日期，使用setDate对其进行变更，然后将元素的日期重新分配给此新变异的日期。

我会这样做。写一些像

这样的好功能

function addDaysToDateElement(element, daysToAdd) {
  var date = element.valueAsDate;
  date.setDate(date.getDate() + 1)
  element.valueAsDate = date;
}

使用javascript

2 个答案: