使用javascript处理HTML输入(日期)类型中的日期

使用javascript处理HTML输入(日期)类型中的日期,javascript,html,date,dom,Javascript,Html,Date,Dom,我有一个HTML日期输入类型,我想用javascript编程处理它。我就是不明白 我认为最普遍接受的操纵日期的方式是: var c = new Date(); c.setDate(c.getDate() + 1); 我可以从输入中获取日期: c = document.getElementById("date1").valueAsDate document.getElementById("date2").valueAsDate = c 我可以设置输入的日期: c = document.get

我有一个HTML日期输入类型,我想用javascript编程处理它。我就是不明白

我认为最普遍接受的操纵日期的方式是:

var c = new Date();
c.setDate(c.getDate() + 1);
我可以从输入中获取日期:

c = document.getElementById("date1").valueAsDate
document.getElementById("date2").valueAsDate = c
我可以设置输入的日期:

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("date1").valueAsDate 
        = document.getElementById("date2").valueAsDate  
以上内容无效

有时我似乎很接近,但我总是需要那个过渡变量

我想我有两个问题:

  • 我对这些价值观有什么不理解,这些价值观使它们(在它们之间)不可转移

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

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

  • 我会这么做的。写一些很好的函数,比如

    function addDaysToDateElement(element, daysToAdd) {
      var date = element.valueAsDate;
      date.setDate(date.getDate() + 1)
      element.valueAsDate = date;
    }
    
  • 使用valueAsDate复制值在()范围内,并且可以在Chrome中进行复制。然而,日期输入还没有得到很好的支持,所以您应该包括功能测试,以避免错误,并在您想要使用的功能不受支持的地方提供回退

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

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

    //使用值从一个输入复制到另一个输入
    //到处支持
    函数copyValue(){
    document.getElementById('i1')。value=document.getElementById('i0')。value;
    }
    //使用valueAsDate从一个输入复制到另一个输入
    //抛出不支持valueAsDate的错误
    函数copyDate(){
    document.getElementById('i1').valueAsDate=document.getElementById('i0').valueAsDate;
    }
    //使用valueAsDate复制并添加一天
    //包括简单的功能测试,无回退
    函数copyaddate(){
    var d=document.getElementById('i0').valueAsDate;
    //如果不支持valueAsDate,则返回
    如果(d==null){
    //提供退路
    console.log('valueAsDate不受支持');
    返回;
    }
    d、 设置日期(d.getDate()+1);
    document.getElementById('i1')。valueAsDate=d;
    }
    日期:
    日期: 复制值 复印日期
    据我所知,复制并添加1天
    ,上面说您应该能够直接从一个值ASDATE分配到另一个值ASDATE。对日期输入的支持不强,可能很少有实现完全支持所有相关功能。你似乎已经有了“最干净的代码”,只要把它变成一个函数就行了。@RobG我希望你能做到,但再多的修改也不能让它工作。最后,我采用了三行方法,但如果你能让它在一行(未统一)中工作,这是直观的,我将不胜感激。。。但是我在ROFLNote上尽了最大的努力,
    valueAsDate
    函数遵循中“将字符串转换为
    Date
    对象的算法”(反之亦然)下的规则,该规则专门使用UTC。因此,
    setUTCDate
    /
    getUTCDate
    更合适。如果这一天过了DST过渡期,就会注意到不同之处。真棒的链接!那正是我要找的那种东西。另外,我一直专注于
    valueAsDate
    ,忘记了简单的
    值。关于浏览器,这个项目并不重要,我正在写一些个人使用的东西来操作本地服务器上的一些简单值(即,只有我在chrome中使用它)。谢谢@MattJohnson—我了解您来自何处,但在不同地点(包括午夜发生变化的地点)进行为期几天的测试,无论使用UTC还是本地方法,结果都是相同的。我可以想象,在一天25小时的DST之外,它怎么可能不起作用,但在实践中似乎并不重要。你知道有一个失败的案例吗?我还没有直接使用DateFromTime(LocalTime(t))算法。