HTML日付ピッカー

Question

現在、HTMLフォームの日付入力を使用しています。

Expiry Date: <input type="date" name="expire" title="Please enter expiry date" required/> 

クライアントサイドのウェブサイトです。これから、ユーザーは現在の日付から数日後にしか選択できないようにするにはどうしたらいいですか？私は日付でコードする必要はありません、私は可能な場合、日付を検出することができるようにしたいですか？

Answer 1

<input type="date" />要素には、任意の最小および最大期間を指定するために使用できるminおよびmax属性があります。あなたは、サーバー側でどちらかの値を設定しなければならないので、そのよう"today"など魔法値があるようには思えない

<input type="date" min="2016-10-01" max="2017-01-01" /> 

：値は、ISO-8601形式（yyyy-MM-dd）で指定する必要がありますJavaScriptを使用して：

window.addEventListener('DOMContentLoaded', restrictDateInputs); 

function restrictDateInputs(e) { 
    var today = (new Date()).toISOString().substring(10); 
    var inputs = document.querySelectorAll('input[type=date].minToday'); 
    for(var i = 0; i < inputs.length; i++) { 
     inputs[i].min = today; 
    } 
} 

上記のコードはclass="minToday"持つすべての日付入力用のページ・ロードにmin属性値を設定します。要件に応じて調整します。

クライアント側のロジックでは、無効なデータがデータ処理コード（クライアント側またはサーバー側）に送信されないことを保証しないので、常にサニタイズ、検証、あなたがユーザーから受け取った入力。

<input type="date" />は、すべてのデスクトップブラウザ、特にInternet Explorer 11、さらに最近のバージョンのFirefoxでも完全にサポートされていないことに注意してください。