使用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輸入（日期）類型中操作日期

回答

相關問題