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

Question

I have an HTML date input type and I'd like to manipulate it programatically in javascript. I'm just not getting it.

I see the most commonly accepted way of manipulating the date itself is like:

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

I can get the date from the input:

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

I can set the date of the input:

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

I can manipulate the date in c :

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

Using c as an interim value, I can manipulate the value of one date object with respect to the other:

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

but no amount of manipulating the elements themselves am I able to transfer the date from one object to the other without using an interim variable.

For example, although:

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

and

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

are both valid, they are not directly manipulatable:

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

The above is INVALID

I seem to get close at times but I always need that interim variable.

I suppose I have 2 questions:

1. What am I not understanding with these values that make them non transferable (between themselves)?

2. What is the "cleanest" code to take the value from the document element, manipulate it by adding one day and sending it back

Answer 1

Copying the value using valueAsDate is within the HTML specification ( latest editor's draft ) and is possible in Chrome. However, Date inputs are not well supported yet so you should include feature testing to avoid errors and provide a fallback where features you want to use aren't supported.

"Clean" code is not necessarily the shortest or least code. I would aim for robustness, readability and maintainability over "clean".

To that end, there is no need to to use valueAsDate to copy the value from one input to another, just assign the value. That works everywhere.

 // 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> 

However, input type date is not well supported (eg Safari, Firefox 49), so while this works in the latest Chrome browser, it doesn't in others.

So to answer your questions:

What am I not understanding with these values that make them non transferable (between themselves)?

Nothing, they should be in a compliant implementation. However, there aren't many of those.

What is the "cleanest" code to take the value from the document element, manipulate it by adding one day and sending it back

I think you already know that, but you should include some feature testing:

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

1. I don't know the actual implementation, but I'm pretty sure valueAsDate returns a new Date that is a copy of the element's date and isn't a direct reference. valueAsDate is most likely just a getter/setter and not an actual property, meaning things like setDate won't mutate the underlying value as it's operating on a completely new, independent. So you need to retrieve the date, mutate it with setDate , then reassign the element's date to this newly mutated date.

2. I would do exactly that. Write some kind of nice function like

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