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

我有一个HTML日期输入类型，我想用JavaScript以编程方式操作它。我只是没有得到它。使用javascript在HTML输入（日期）类型中操作日期

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

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

我可以设置输入的日期：

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

我可以从输入获取日期：

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

以上是INVALID

我似乎亲近的时间，但我总是需要一个临时变量。

我想我有2个问题：

什么我不使用这些值，使他们不可转让（他们之间）理解？
什么是“干净的”代码，以从文档元素的值，通过增加一天，把它发回

来源

2017-08-30 Madivad

据我所知道的，[* HTML规范*]（https://www.w3.org/TR/html5/forms.html#dom-input-valueasdate）说你应该能够从一个* valueAsDate *直接指定给另一个。对日期输入的支持不强，可能很少有实现完全支持所有相关功能。你似乎已经有了“最干净的代码”，只是把它变成一个函数。 – RobG

@RobG我会*期待*你可以，但没有任何削减和改变它的周围会得到它的工作。最后，我采用了三线方法，但如果你能在一个非直觉的线上工作，我会很感激它......但我正尽我所能去做最好的ROFL – Madivad

复制使用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浏览器，火狐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'); 
}

来源

2017-08-31 00:39:24 RobG

备注，'valueAsDate'函数遵循[4.10.5.1.7]（https://www.w3.org/TR/）中的“将字符串转换为Date对象的算法（反之亦然）”下的规则。 html5/forms.html＃date-state-（type = date）） - 它特别使用UTC。因此，'setUTCDate' /'getUTCDate'会更合适。如果这一天通过DST转换，差异将会被注意到。 –

真棒链接！这正是我所寻找的东西。另外，我注意到'valueAsDate'，我忘记了简单的'value'。关于浏览器，这个项目并不重要，我正在写一些供个人使用的东西来操纵本地服务器上的一些简单的值（也就是说，只有我在Chrome中使用它）。谢谢！ – Madivad

@ MattJohnson-我明白你来自哪里，但是测试在不同位置（包括变化是在午夜的那些地方）进入和离开DST的日子显示了使用UTC或本地方法的相同结果。我可以设想一下，如果这个日子有25个小时的时间，它可能无法工作，但在实践中似乎并不重要。你知道一个失败的案例吗？我还没有通过* DateFromTime（LocalTime（t））*算法来处理。 – RobG

我不知道实际执行操作它，但我敢肯定valueAsDate返回一个新Date是元素的日期的一个副本，而不是直接引用。 valueAsDate是最有可能只是一个getter/setter方法，而不是实际属性，意味着之类的东西setDate，因为它是一个完全新的操作将不会发生变异的潜在价值，独立。所以，你需要检索日期，与setDate变异，然后重新分配元素的日期到这个新的突变日期。

我会那么做。写某种不错的功能就像

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

来源

2017-08-30 15:34:31

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

回答

相关问题