web-dev-qa-db-ja.com

html5 datepickerの特定の日付を無効にします

使用するときに日付を無効にすることは可能ですか？あるシナリオでは現在の日付を無効にし、他のシナリオでは将来の日付を無効にします。日付を無効にするにはどうすればよいですか？

html5datedatepicker
22
Seeya K

minまたはmax属性をinput type=dateに追加できます 。日付はISO形式（yyyy-mm-dd）である必要があります。これは多くのモバイルブラウザーとChromeの現在のバージョンでサポートされていますが、ユーザーは日付ピッカーを使用せずに無効な日付を手動で入力できます。

<input name="somedate" type="date" min="2013-12-25">

minおよびmax属性は完全な日付でなければなりません。 「今日」または「+0」を指定する方法はありません。そのためには、JavaScriptまたはサーバー側言語を使用する必要があります。

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

http://jsfiddle.net/mblase75/kz7d2/

過去または将来の日付を許可しながら、今日のみを除外することは、ここでは選択肢ではありません。ただし、明日をmin日付にしたい場合（今日と過去のすべての日付を削除）、 この質問 を参照してtodayを1日増やします。

HTMLフォームに関連する他のすべての場合と同様に、クライアント側での制約方法に関係なく、常にサーバー側でフィールドを検証する必要があります。

51
Blazemonger

HTML日付ピッカー（<input type=date>）はmin/max属性をサポートしますが、 広くサポートされていません です。

それまでの間、 bootstrap-datepicker の使用を検討してください。v1.2.0は github です。

参照：

W3C仕様

4
leesei

純粋なHTMLでは、日付に設定できる唯一の制限は、minおよびmax属性を使用した下限と上限です。以下の例では、この質問を投稿している曜日のみが許可され、その他はグレー表示され、それらをクリックしても入力値は更新されません。

<input type="date" min="2019-06-02" max="2019-06-08"/>

JavaScriptの数行を使用して無効な日付を無効にすることもできますが、これはグレー表示された日付などのすべてのネイティブ<input type="date">機能とともに出荷されません。無効な日付の場合、日付値を''に設定すると、エラーメッセージが表示される場合があります。週末の日付を受け入れない入力の例を次に示します。

// Everything except weekend days
const validate = dateString => {
  const day = (new Date(dateString)).getDay();
  if (day==0 || day==6) {
    return false;
  }
  return true;
}

// Sets the value to '' in case of an invalid date
document.querySelector('input').onchange = evt => {
  if (!validate(evt.target.value)) {
    evt.target.value = '';
  }
}
<input type="date"/>
2
Nino Filiu

これを使用して、将来の日付を無効にすることができます。
あなたの中 document.ready関数、場所

//Display Only Date till today //

var dtToday = new Date();
var month = dtToday.getMonth() + 1;     // getMonth() is zero-based
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

var maxDate = year + '-' + month + '-' + day;
$('#dateID').attr('max', maxDate);

そして形で

<input id="dateID" type="date"/>

これが動作です jFiddle Demo

1
Sreejith BS