如何使用带有文本框输入的 jQuery Datepicker：
$("#my_txtbox").datepicker({
// options
});
不允许用户在文本框中输入随机文本。 我希望在文本框获得焦点或用户单击它时弹出 Datepicker，但我希望文本框忽略使用键盘的任何用户输入（复制和粘贴或任何其他）。我想专门从 Datepicker 日历中填充文本框。
这可能吗？
jQuery 1.2.6
日期选择器 1.5.2
【问题讨论】：
标签： jquery datepicker
您应该可以在文本输入上使用 readonly 属性，并且 jQuery 仍然可以编辑其内容。
<input type='text' id='foo' readonly='true'>
【讨论】：
$("#my_txtbox").prop('readonly', true)
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
根据我的经验，我会推荐 Adhip Gupta 建议的解决方案：
$("#my_txtbox").attr( 'readOnly' , 'true' );
以下代码不允许用户输入新字符，但将允许他们删除字符：
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
此外，这将使表单对禁用 JavaScript 的人无用：
<input type="text" readonly="true" />
【讨论】：
readonly 属性添加到该字段，您可以确保如果他们禁用了 JavaScript（因此将无法使用日期选择器），他们仍然可以使用通过标准手动输入表单。
$("#my_txtbox").prop('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 上工作，请使用“keydown”而不是“keypress”
【讨论】：
初始化日期选择器后：
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
【讨论】：
$(".project-date").datepicker().keydown(false);
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
在 jquery 中添加 readonly 属性。
【讨论】：
您有两种选择来完成这项工作。 （据我所知）
选项 A： 将您的文本字段设为只读。可以按如下方式进行。
选项 B： 更改光标焦点。将 ti 设置为模糊。可以通过将属性onfocus="this.blur()" 设置到您的日期选择器文本字段来完成。
例如：<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
【讨论】：
在获取焦点时弹出日期选择器：
$(".selector").datepicker({ showOn: 'both' })
如果您不希望用户输入，请将其添加到输入字段
<input type="text" name="date" readonly="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
【讨论】：
我知道这个线程很旧，但是对于遇到相同问题的其他人，实现@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;"
【讨论】：
这个demo 是通过将日历放在文本字段上来实现的，这样您就无法输入它。您还可以将输入字段设置为只读 HTML 以确保。
<input type="text" readonly="true" />
【讨论】：
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input {
background-color: white;
cursor: pointer;
}
【讨论】：
我发现 jQuery 日历插件，至少对我来说，一般来说更适合选择日期。
【讨论】：
$('.date').each(function (e) {
if ($(this).attr('disabled') != 'disabled') {
$(this).attr('readOnly', 'true');
$(this).css('cursor', 'pointer');
$(this).css('color', '#5f5f5f');
}
});
【讨论】：
这是您的答案，可以解决。当您在文本框控件中限制用户输入时，您不想使用 jquery。
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
【讨论】：
$("#my_txtbox").prop('readonly', true)
工作就像一个魅力..
【讨论】：
我知道这个问题已经得到解答，大多数人建议使用 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>【讨论】：
替换时间选择器的ID： IDofDatetimePicker 到你的 id。
这将阻止用户输入任何进一步的键盘输入，但用户仍然可以访问时间弹出窗口。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
试试这个 资源： https://github.com/jonthornton/jquery-timepicker/issues/109
【讨论】：
这个问题有很多较旧的答案，并且 readonly 似乎是普遍接受的解决方案。我相信现代浏览器中更好的方法是在 HTML 输入标签中使用inputmode="none"：
<input type="text" ... inputmode="none" />
或者，如果您更喜欢在脚本中执行此操作：
$(selector).attr('inputmode', 'none');
我没有对它进行广泛的测试，但它在我使用的 Android 设置上运行良好。
【讨论】：
就我而言，我使用了disableTextInput 属性
$( ".datepicker" ).datepicker({'dateFormat' : 'd-m-y', 'disableTextInput':true });
【讨论】：
或者，例如，您可以使用隐藏字段来存储值...
<asp:HiddenField ID="hfDay" runat="server" />
在 $("#my_txtbox").datepicker({ options:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}
【讨论】：
如果您希望用户从日期选择器中选择一个日期，但您不希望用户在文本框中输入，请使用以下代码：
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});
【讨论】：