テキストボックス入力でjQuery Datepickerを使用するにはどうすればよいですか。
$("#my_txtbox").datepicker({
// options
});
ユーザーがテキストボックスにランダムなテキストを入力することはできません。テキストボックスがフォーカスを取得するか、ユーザーがクリックするとDatepickerがポップアップするようにしますが、キーボードを使用したユーザー入力(コピーアンドペーストなど)をテキストボックスで無視します。 Datepickerカレンダーからのみテキストボックスを埋めたい。
これは可能ですか?
jQuery 1.2.6
Datepicker 1.5.2
テキスト入力でreadonly属性を使用できますが、jQueryはその内容を編集できます。
<input type='text' id='foo' readonly='true'>
私の経験に基づいて、Adhip Guptaが提案するソリューションをお勧めします。
$("#my_txtbox").attr( 'readOnly' , 'true' );
次のコードでは、ユーザーが新しい文字を入力することはできませんが、willで文字を削除できます。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
さらに、これにより、JavaScriptが無効になっているユーザーにはフォームが役に立たなくなります。
<input type="text" readonly="true" />
試してみる
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
複数の場所で日付ピッカーを再利用する場合は、次のようなものを使用して、JavaScript経由でもテキストボックスを変更する傾向があります。
$("#my_txtbox").attr( 'readOnly' , 'true' );
日付ピッカーを初期化する場所の直後/前。
<input type="text" readonly="true" />
ポストバック後にテキストボックスの値が失われます。
むしろ、完璧に機能するBrad8118の提案を使用する必要があります。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
編集:IEで機能させるには、「keypress」ではなく「keydown」を使用します
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
jqueryにreadonly属性を追加します。
日付ピッカーを初期化した後:
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
ゲインフォーカスでポップアップする日付ピッカー:
$(".selector").datepicker({ showOn: 'both' })
ユーザー入力が必要ない場合は、これを入力フィールドに追加します
<input type="text" name="date" readonly="readonly" />
これを行うには、2つのオプションがあります。 (私の知る限りでは)
オプションA:テキストフィールドを読み取り専用にします。次のように実行できます。
オプションB:カーソルのフォーカスを変更します。 tiをぼかしに設定します。それは、属性onfocus="this.blur()"
を日付ピッカーテキストフィールドに設定することで実行できます。
例:<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
これに出会ったばかりなので、ここで共有しています。ここにオプションがあります
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
これがコードです。
HTML
<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
<input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
JS
$('#arrival_date_div').datetimepicker({
format: "YYYY-MM-DD",
ignoreReadonly: true
});
フィドルは次のとおりです。
http://jsfiddle.net/matbaric/wh1cb6cy/
Bootstrap-datetimepicker.jsの私のバージョンは4.17.45です
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input {
background-color: white;
cursor: pointer;
}
この demo は、カレンダーをテキストフィールドに重ねて入力できないようにすることで並べ替えを行います。入力フィールドをHTMLでのみ読み取るように設定することもできます。
<input type="text" readonly="true" />
私はこのスレッドが古いことを知っていますが、@ Brad8118ソリューションを実装する同じ問題に遭遇する他の人のために(入力を読み取り専用にすることを選択した場合、ユーザーはdatepickerから挿入された日付値を削除できないため彼が選択した場合)、ユーザーが値を貼り付けるのを防ぐ必要がある場合(@ErikPhilipsが必要であると示唆したように)、私はここでこの追加を許可しました、これは私のために働いた:ここから$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });
https://www.dotnettricks .com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript および私が使用する特定のスクリプト全体(代わりにfengyuanchen/datepickerプラグインを使用):
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
pick: function (e) {
e.preventDefault();
$(this).val($(this).datepicker('getDate', true));
}
}).keypress(function(event) {
event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
e.preventDefault()
}); //disable paste;
readonly を追加する代わりに、 onkeypress = "return false;" を使用することもできます。
$( "#my_txtbox")。prop( 'readonly'、true)
魅力のように働いた..
この質問には多くの古い答えがあり、読み取り専用が一般的に受け入れられている解決策のようです。最新のブラウザでのより良いアプローチは、HTML入力タグでinputmode="none"
を使用することだと思います。
<input type="text" ... inputmode="none" />
または、スクリプトで実行する場合:
$(selector).attr('inputmode', 'none');
広範囲にテストしたことはありませんが、Androidで使用したセットアップでうまく機能しています。
この質問にはすでに答えがあり、readonly
属性を使用することをお勧めします。
自分のシナリオを共有して答えたいだけです。
readonly
属性をHTML要素に追加した後、を作成できないという問題に直面しましたthis属性はrequired
として動的に。
HTML作成時にreadonly
とrequired
の両方を設定しようとしました。
したがって、readonly
としても設定する場合は、required
を使用しないことをお勧めします。
代わりに使用
$("#my_txtbox").datepicker({
// options
});
$("#my_txtbox").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
これにより、tab
キーのみを押すことができます。
バイパスしたいキーコードを追加できます。
readonly
とrequired
の両方を追加したので、以下のコードはフォームを送信します。readonly
を削除すると、正常に機能します。
https://jsfiddle.net/shantaram/hd9o7eor/
$(function() {
$('#id-checkbox').change( function(){
$('#id-input3').prop('required', $(this).is(':checked'));
});
$('#id-input3').datepicker();
$("#id-input3").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<form action='https://jsfiddle.net/'>
Name: <input type="text" name='xyz' id='id-input3' readonly='true' required='true'>
<input type='checkbox' id='id-checkbox'> Required <br>
<br>
<input type='submit' value='Submit'>
</form>
$('.date').each(function (e) {
if ($(this).attr('disabled') != 'disabled') {
$(this).attr('readOnly', 'true');
$(this).css('cursor', 'pointer');
$(this).css('color', '#5f5f5f');
}
});
タイムピッカーのID:IDofDatetimePickerをIDに置き換えます。
これにより、ユーザーはそれ以上キーボード入力を行えなくなりますが、それでもユーザーはタイムポップアップにアクセスできます。
$( "#my_txtbox")。keypress(function(event){event.preventDefault();});
このソースを試してください: https://github.com/jonthornton/jquery-timepicker/issues/109
テキストボックスコントロールのユーザー入力を制限したときにjqueryを使用したくない場合。
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
少なくとも私にとっては、jQuery Calendarプラグインは一般的に日付の選択に適していることがわかりました。