2017-10-31 9 views
0

私はHTMLページにtype="date"を入力しました。JavaScriptで特定の日付を無効にしたいと思います。どうやってやるの?JavaScriptから入力タイプ= "日付"の特定の日付を無効にするには

私はgetElementByIdを使用して無効にしようとしましたが、完全な日付入力を無効にしました。

+0

あなたは特定の日付を選択できないようにしたいのですか? –

+1

特定の日付または日付の範囲を無効にしたいですか? –

+0

https://stackoverflow.com/a/17182584/1961144 – Sylwek

答えて

0

入力タイプ=日付に最小または最大属性を追加できます。日付はISO形式(yyyy-mm-dd)でなければなりません。これは、多くのモバイルブラウザやChromeの現在のバージョンでサポートされていますが、日付ピッカーを使用せずに手動で無効な日付を入力することもできます。

<input name="somedate" type="date" min="2017-11-25"> 

最小および最大属性は完全な日付でなければなりません。 「今日」または「+0」を指定する方法はありません。そのためには、JavaScriptやサーバサイドの言語を使用する必要があります:私たちはまだできないことは何

var today = new Date().toISOString().split('T')[0]; 
document.getElementsByName("somedate")[0].setAttribute('min', today); 

は、しかし、私たちの入力からの日のクラスを排除しています。たとえば、週末の選択を妨げたり、マークアップだけで月曜日を禁止することはできません。代わりに、HTML5検証APIとネイティブJavaScript Dateオブジェクトを使用してもう少し作業を行う必要があります。

選択した日付が月曜日の場合はエラーを表示するコードです。

var date = document.querySelector('[type=date]'); 

function noMondays(e){ 

    var day = new Date(e.target.value).getUTCDay(); 

    // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday 

    if(day == 1){ 

     e.target.setCustomValidity('OH NOES! We hate Mondays! Please pick any day but Monday.'); 

    } else { 

     e.target.setCustomValidity(''); 

    } 

} 

date.addEventListener('input',noMondays); 
+0

特定の日付を強調する方法はありますか?入力全体ではなく、一部の日付のみを強調表示する方法です。 – chandu

+0

jqueryを使用しますui datepicker –

0

こっちに示すようにあなたの日付属性の最大値/最小値を設定することができます:https://www.w3schools.com/tags/att_input_min.asp

これは、しかし、あなたが特定の日付を無効にすることはできません。あなたが本当にこれを望むなら、選択した日付がフォームの投稿時に許可されているかどうかチェックします。私たちは、IDと日付要素「日付入力」と「提出」idを持つボタンを持っている。この例では

$('#submit').on('click', function(){ 
     var date = new Date($('#date-input').val()); 

     day = date.getDate(); 
     month = date.getMonth() + 1; 
     year = date.getFullYear(); 

     //Check here if date, month and year combination is allowed 
}); 

あなたはjQueryの中で次のように提出する上で選択した日付の値を得ることができます。

サーバー側で日付が許可されているかどうかも確認する必要があります。

関連する問題