web-dev-qa-db-ja.com

Bootstrap Datepicker（テキスト入力を避けるか手動入力を制限する）

これが私のウェブサイトです： http://splash.inting.org/wp/

現在、Call Dateフィールドに Bootstrap Datepicker（range branch） を使用していますが、それはすばらしいことです。

2の問題がありますが：

1）入力フィールドに文字列を手動で入力できます。 original by eyecon は、日付以外の値を入力するたびに現在の日付を入力することを許可しないため、これは奇妙です。 readonly属性を試してみましたが、日付を選択できないため機能しないようです。

2） another post の回答を変更して、日付入力の選択肢を火曜日と木曜日に制限しました。日付ピッカーをロードすると、選択されたデフォルトの日付は現在の日付であり、他の曜日でもかまいません。これは避けたいので、火曜日か木曜日のみを選択します。

javascriptwordpresstwitter-bootstrapdatepickeruser-input
20
AnimaSola

入力コントロールのキーイベントをオーバーライドします。

<input onkeydown="return false" ... />
106
ogborstad

Readonly属性を使用し、入力要素の後にアドオンを追加して、入力後に日付ピッカーをトリガーします。

<input type="text" name="CallDate" value="" id="CallDate" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-medium date date-pick" size="40" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>

それはうまくいくはずです。

2番目の問題については、ここから日付ピッカーの修正バージョンを使用できます： https://github.com/eternicode/bootstrap-datepicker オプションを使用 daysOfWeekDisabled

4
jmartsch

私は次のようにして許容できる解決策を得ることができました：

$(".date").datetimepicker({
    defaultDate: moment(),
    format: 'YYYY-MM-DD'
}).end().on('keypress paste', function (e) {
    e.preventDefault();
    return false;
});

それもあなたのために働くことを願っています！

4
Ye Yint

以下のようにonKeyDown属性を使用します。それは私のために働いています[datepickerの手動入力を制限するには]

  <input type="text" id="signedDate" name="signedDate" 
  onkeydown="event.preventDefault()" class="form-control input-med datepicker" 
  maxlength="10" placeholder="" />
3
krish007