11

は私のウェブサイトである:http://splash.inting.org/wp/ブートストラップ日付ピッカー(テキスト入力を回避または手動入力を制限する)

私は現在、私のコール日付フィールドにBootstrap Datepicker (range branch)を使用し、それは素晴らしいことです。

私は2の問題持っていますが:

1)あなたが入力フィールドに文字列を手動で入力することができます。 original by eyeconは日付以外の値を入力するたびに現在の日付を入力することができないため、これは奇妙です。私はreadonly属性を試しましたが、それはあなたが任意の日付を選択することができませんので、動作していないようです。

2)入力の選択肢を火曜日と木曜日に限定した回答をanother postに変更しました。 datepickerをロードすると、選択されたデフォルトの日付が現在の日付になります。これは、他の曜日でもかまいません。私はこれを避け、火曜日か木曜日のどちらかしか選びません。

+0

サイトがダウンしています – Trevor

答えて

2

は、入力した後、日付ピッカーをトリガーする入力要素の後に読み取り専用属性を使用してアドオンを追加します。

<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> 

働くべきです。

は、第二の問題について、あなたはここから日付ピッカーの修正版を使用することができます https://github.com/eternicode/bootstrap-datepickerとオプション daysOfWeekDisabled

65

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

<input onkeydown="return false" ... /> 
+1

パーフェクトアンサー:) –

+0

すべての同様の質問のベストアンサー。読み取り専用または無効にすると、新しいHTML入力タイプの日付にブラウザの組み込み日付選択が表示されなくなります。このメソッドは、デフォルトのブラウザーエクスペリエンスを許可しますが、手動入力を禁止します。 –

+0

ありがとうたくさん...それは働く..... –

1

は、私は次のように受け入れ可能な解決策を得ることができた:

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

は、それはあまりにもあなたのために働くことを望みます!

+0

'keypress'はdeleteキーを考慮していません...代わりに' keydown'を使用し、tab(keycode = 9 )キーとreturn(keycode = 13)キーを押します。 – Pablo

関連する問題