带有不允许用户输入的文本输入的 jQuery Datepicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/153759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datepicker with text input that doesn't allow user input
提问by Elliot Vargas
How do I use the jQuery Datepicker with a textbox input:
如何将 jQuery Datepicker 与文本框输入一起使用：
$("#my_txtbox").datepicker({
// options
});
that doesn't allow the user to input random text in the textbox. I want the Datepicker to pop up when the textbox gains focus or the user clicks on it, but I want the textbox to ignore any user input using the keyboard (copy & paste, or any other). I want to fill the textbox exclusively from the Datepicker calendar.
这不允许用户在文本框中输入随机文本。我希望 Datepicker 在文本框获得焦点或用户单击它时弹出，但我希望文本框忽略使用键盘（复制和粘贴或任何其他）的任何用户输入。我想从 Datepicker 日历中专门填充文本框。
Is this possible?
这可能吗？
jQuery 1.2.6
Datepicker 1.5.2
jQuery 1.2.6
日期选择器 1.5.2
回答by Adam Bellaire
You should be able to use the readonlyattribute on the text input, and jQuery will still be able to edit its contents.
您应该能够在文本输入上使用readonly属性，并且 jQuery 仍然能够编辑其内容。
<input type='text' id='foo' readonly='true'>
回答by 2046
Based on my experience I would recommend the solution suggested by Adhip Gupta:
根据我的经验，我会推荐 Adhip Gupta 建议的解决方案：
$("#my_txtbox").attr( 'readOnly' , 'true' );
The following code won't let the user type new characters, but willallow them to delete characters:
以下代码不会让用户输入新字符，但会允许他们删除字符：
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Additionally, this will render the form useless to those who have JavaScript disabled:
此外，这将使表单对禁用 JavaScript 的人无用：
<input type="text" readonly="true" />
回答by Brad8118
try
尝试
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
回答by Adhip Gupta
If you are reusing the date-picker at multiple places then it would be apt to modify the textbox also via JavaScript by using something like:
如果您在多个地方重复使用日期选择器，那么也可以使用以下内容通过 JavaScript 修改文本框：
$("#my_txtbox").attr( 'readOnly' , 'true' );
right after/before the place where you initialize your datepicker.
就在您初始化日期选择器的位置之后/之前。
回答by Adhip Gupta
<input type="text" readonly="true" />
causes the textbox to lose its value after postback.
导致文本框在回发后失去其值。
You rather should use Brad8118's suggestion which is working perfectly.
你宁愿使用 Brad8118 的建议，它工作得很好。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
EDIT: to get it working for IE use 'keydown' instead of 'keypress'
编辑：要使其适用于 IE，请使用“keydown”而不是“keypress”
回答by user2182143
You have two options to get this done. (As far as i know)
您有两种选择来完成这项工作。（据我所知）
Option A:Make your text field read only. It can be done as follows.
Option B:Change the curser onfocus. Set ti to blur. it can be done by setting up the attribute
onfocus="this.blur()"to your date picker text field.
选项 A：使您的文本字段只读。可以按如下方式完成。
选项 B：将光标更改为焦点。将 ti 设置为模糊。可以通过将属性设置
onfocus="this.blur()"为日期选择器文本字段来完成。
Ex: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
前任： <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
回答by umutesen
After initialising the date picker:
初始化日期选择器后：
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
回答by Chenthil
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
add the readonly attribute in the jquery.
在 jquery 中添加 readonly 属性。
回答by Matija
I just came across this so I am sharing here. Here is the option
我刚刚遇到这个，所以我在这里分享。这是选项
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
Here is the code.
这是代码。
HTML
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
JS
$('#arrival_date_div').datetimepicker({
format: "YYYY-MM-DD",
ignoreReadonly: true
});
Here is the fiddle:
这是小提琴：
http://jsfiddle.net/matbaric/wh1cb6cy/
http://jsfiddle.net/matbaric/wh1cb6cy/
My version of bootstrap-datetimepicker.js is 4.17.45
我的 bootstrap-datetimepicker.js 版本是 4.17.45
回答by Eduardo Molteni
To datepicker to popup on gain focus:
到日期选择器弹出获得焦点：
$(".selector").datepicker({ showOn: 'both' })
If you don't want user input, add this to the input field
如果您不想要用户输入，请将其添加到输入字段
<input type="text" name="date" readonly="readonly" />
