如何使用HTML5來驗證日期範圍？

或者，是否可以使用html5驗證其他字段的值？如何使用HTML5來驗證日期範圍？

一個常見的例子是選擇日期範圍，其中「從」日期應該小於或等於「到」日期。下面將介紹的值之間所需的關係，只要你能在語法使用的元素引用：

<input type="date" name="from" max="to"> //todo: populate with ~to.value 
<input type="date" name="to" min="from"> //todo: populate with ~from.value

來源

2013-10-08 o.v.

'min'和'max' attrs是'日期'格式，而不是元素\ –

@EL：我知道限制（或者說，規範將值限制爲ISO格式）用作顯示值之間所需關係的僞標記。我已經更新到[希望]刪除含糊之處，謝謝！ –

簡單的做法是有一個日期選擇器和一個'天數'控制。 – robertc

它可以利用HTML5的驗證機制與一些JavaScript動態更新min/max屬性：

//in this case a single input restriction is sufficient to validate the form: 

$('#from, #to').on('change', function(){ 
    $('#to').attr('min', $('#from').val()); 
});

Fiddled。無論min如果的日期選擇器方面的瀏覽器執行範圍限制（以超出期望範圍禁用日期）

來源

2013-10-08 04:50:02

這是另一個完整的例子使用polyfill：http://jsfiddle.net/trixta/SWQme/ –

-1

我擔心，有沒有機會如何驗證max可以應用到各個領域，增強UX基於其他輸入值的輸入值。只有好的舊javascript。

但也許你可以使用<input type="range" …>並設置一些最小步驟（1天/ 1小時/ ...）。然後，您可以使用相同名稱的屬性值min和max值。

來源

2013-10-29 13:42:15 iiic

人應該如何使用['']（http://diveintohtml5.info/examples/input-type-range.html）來選擇日期？ –

在這裏，Web Components是非常有用的，但他們並沒有完全支持所有瀏覽器。

的想法是創建一個簡單的HTML元素，有兩個孩子（來和去），如下所示：

<div id="fromToDate"> 
    <div></div> 
    <div></div> 
</div>

然後創建一個模板，它定義了日期選擇器應該是什麼樣子：

<template id="fromToDateTemplate"> 
    <label for="fromDate">from</label> 
    <input type="date" class="fromDate" select=":first" required="" /> 
    <label for="toDate">to</label> 
    <input type="date" class="toDate" select=":last" required="" /> 
</template>

select參數定義，其中值取自所以第一個輸入字段採用「#fromToDate」中的第一個div。

最後，我們有填充「影子根」和定義的邏輯：

var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(), 
    template = document.querySelector('#fromToDateTemplate'); 
shadow.appendChild(template.content); 


shadow.querySelector(".fromDate").addEventListener("change", function (e) { 
    var to = this.value; 

    shadow.querySelector(".toDate").setAttribute("min", this.value); 
}); 

template.remove();

在端兩個輸入字段renderd並且在第一日期選擇器選擇日期時，第二日期選擇器不能選擇較低的數據。

提琴手例如：http://jsfiddle.net/cMS9A/

優點：

構建小窗口
易reause
不會打破頁面
可以獨立風格的

總排行GES：

在所有的瀏覽器不支持尚未

未來閱讀：

來源

2013-10-29 14:47:14 Stefan

有趣的方向，但恕我直言，這不是我的情況下，因爲相同的邏輯可以複製沒有影子DOM或它所帶來的跨瀏覽器限制。看起來影子DOM更適用於中介邏輯，例如如果你有日期/月/年的單獨傳統輸入，這些輸入可以「包裝」到一個'input [type = date]'中（擾流警報：如果你檢查樣本jsfiddle，它會顯示「原始」標記）。 –

我不得不同意你的看法。所有瀏覽器都不支持這一事實並不能使它成爲生產的好選擇，但影子DOM的概念尚未廣爲人知，所以現在使用jQuery解決方案的解決方案可能會更好。我認爲內置的HTML5功能並不存在，因爲HTML會獨立處理每個DOM元素，建立它們之間的連接，所以您擁有JavaScript。使用我的解決方案，您不依賴任何第三方庫並可以重用它，因此我必須分享它。 – Stefan

如果你想避免與別人盜號/崩潰尤爾網站的問題 - 與驗證輸入的數據：發送表單之前

（可選）的JavaScript（使用JavaScript，輸入不正確一個針對malforming數據保護，降低流量）
（服務器端強制性）（保護免受可能malform使用例如拉琴）輸入數據

這是唯一的（至少第二點）的應用更聰明人蟑螂保護你和你的網站。

來源

2013-11-04 11:41:06 Artur

我不知道爲什麼會出現這種情況，因此在討論客戶端驗證時，指出是否需要進行服務器端驗證是一個不錯的主意。然而，我的意圖是改善真正（非惡意）用戶的用戶體驗。如果你從[我的原始答案]（http://stackoverflow.com/a/19239320/1081234）看[小提琴]（http://jsfiddle.net/ovfiddle/GS98P/2/），你會注意到選擇「起始」日期後，您不能再選擇之前的「之後」日期 - 本地日期選擇器元素會尊重「最小」限制並禁用之前的日期。 –

很高興看到事物轉向純粹的HTML解決方案...但爲什麼不看看使用moment.js來填補現在的空白？

http://momentjs.com/

有很多很好的例子，並有很多有用的實用方法。

來源

2013-11-04 16:42:19 backdesk

我已經使用了一些事情（因爲日期操作和沒有框架的格式化在JS中很糟糕），但我沒有看到這將如何幫助datepickers的最小/最大值。 –

很酷。我指着使用這樣的東西：https：//github.com/gf3/moment-range – backdesk

如何使用HTML5來驗證日期範圍？

回答

相關問題