带有不允许用户输入的文本输入的 jQuery Datepicker

您应该能够对文本输入使用 只读属性，并且 jQuery 仍然能够编辑其内容。

<input type='text' id='foo' readonly='true'>

要想获得焦点，可以弹出日期提取器:

$(".selector").datepicker({ showOn: 'both' })

如果您不希望用户输入，请将此添加到输入字段

<input type="text" name="date" readonly="readonly" />

试试看

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

这个 小样可以通过将日历放在文本字段上来实现这一点，这样你就不能输入日历了。还可以将输入字段设置为只能在 HTML 中读取，以确保。

<input type="text" readonly="true" />

我发现 jQuery 日历插件，至少对我来说，总的来说在选择日期方面效果更好。

如果你在多个地方重复使用日期选择器，那么也可以通过 JavaScript 修改文本框，比如:

$("#my_txtbox").attr( 'readOnly' , 'true' );

就在你初始化数据采集器的地方之后/之前。

<input type="text" readonly="true" />

导致文本框在回发后失去其值。

您应该使用 Brad8118的建议，这是完美的工作。

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

编辑: 使用“ keydown”而不是“ keypress”可以让它在 IE 下工作

根据我的经验，我建议采用阿迪普•古普塔(Adhip Gupta)提出的解决方案:

$("#my_txtbox").attr( 'readOnly' , 'true' );

下面的代码不允许用户键入新字符，但是 威尔允许用户删除字符:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

此外，对于那些禁用了 JavaScript 的用户来说，这会使表单变得毫无用处:

<input type="text" readonly="true" />

或者，例如，您可以使用一个隐藏字段来存储值..。

        <asp:HiddenField ID="hfDay" runat="server" />

在 $(“ # my _ txtbox”) . datepicker ({选项:

        onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}

如果你想让用户从数据采集器中选择一个日期，但是你不想让用户在文本框中输入，那么使用下面的代码:

<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);


});

$('.date').each(function (e) {
if ($(this).attr('disabled') != 'disabled') {
$(this).attr('readOnly', 'true');
$(this).css('cursor', 'pointer');
$(this).css('color', '#5f5f5f');
}
});

要完成这件事，你有两个选择。(据我所知)

1. 选项 A: 让你的文本字段只读。

2. 选项 B: 更改光标的焦点。设置时间模糊。可以通过将属性 onfocus="this.blur()"设置为您的日期选择器文本字段来完成。

例句: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
background-color: white;
cursor: pointer;
}

这就是你要解决的问题的答案。在文本框控件中限制用户输入时，不希望使用 jquery。

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->


<input type="text" id="my_txtbox" readonly="true"/>

$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');

在 jquery 中添加 readonly 属性。

$(“ # my _ txtbox”) . prop (‘ readonly’，true)

非常有效。

你也可以使用按钮代替文本框。最适合我，我不希望用户手动写日期。

初始化日期选择器后:

$(".project-date").datepicker({
dateFormat: 'd M yy'
});


$(".project-date").keydown(false);

我只是偶然发现这个，所以我在这里分享。这里是选项

Https://eonasdan.github.io/bootstrap-datetimepicker/options/#ignorereadonly

这是密码。

超文本标示语言

<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

我知道这个问题已经得到了回答，大多数人建议使用 readonly属性。
我只是想分享一下我的想法和答案。

在将 readonly属性添加到我的 HTML 元素之后，我遇到了一个问题，我无法将 这个属性动态地设置为 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。

This will prevent the user from entering any further keyboard inputs but still, the user will be able to access the time popup.

$(“ # my _ txtbox”) . keypress (function (event){ event.preentDefault () ; }) ;

试试这个 来源: Https://github.com/jonthornton/jquery-timepicker/issues/109

我知道这个线程已经很老了，但是对于其他遇到同样问题的人来说，这个线程实现了@Brad8118解决方案(我更喜欢这个方案，因为如果你选择只读输入，那么用户将无法删除从数据采集器中插入的日期值，如果他选择这样做的话) ，并且还需要防止用户粘贴一个值(就像@ErikPhilips 建议的那样) ，我在这里添加了这个，它对我很有用: 从这里开始 以及我使用的整个特定脚本(使用风源程/数据接收器插件代替) :

$('[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;

这个问题有很多旧的答案，只读似乎是普遍接受的解决方案。我相信在现代浏览器中更好的方法是在 HTML 输入标签中使用 inputmode="none":

<input type="text" ... inputmode="none" />

或者，如果你喜欢按照剧本来做:

$(selector).attr('inputmode', 'none');

我还没有对它进行过广泛的测试，但它在我使用过的 Android 设置中表现良好。

您也可以使用 Onkeypress = “ return false;”来代替添加 只读

在我的例子中，我使用了 disableTextInput属性

$( ".datepicker" ).datepicker({'dateFormat' : 'd-m-y', 'disableTextInput':true });