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

Question

如何将jQuery Datepicker与文本框输入结合使用：

$("#my_txtbox").datepicker({
  // options
});

不允许用户在文本框中输入随机文本。 我希望当文本框获得焦点或用户点击它时弹出Datepicker，但我希望文本框忽略使用键盘的任何用户输入（复制和粘贴，或任何其他）。我想从Datepicker日历中专门填充文本框。

这可能吗？

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

您应该能够在文本输入上使用 readonly 属性，jQuery仍然可以编辑其内容。

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

Answer 2

根据我的经验，我会推荐Adhip Gupta建议的解决方案：

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

以下代码不允许用户输入新字符，但将允许他们删除字符：

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

此外，这将使表单对禁用JavaScript的用户无效：

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

Answer 3

试

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

Answer 4

如果您在多个地方重复使用日期选择器，那么通过使用类似的东西也很容易通过JavaScript修改文本框：

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

在您初始化日期选择器的地方之前/之后。

Answer 5

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

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

你宁愿使用Brad8118的建议，这是完美的。

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

编辑： 让它适用于IE使用'keydown'代替'keypress'

Answer 6

初始化日期选择器后：

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

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

Answer 7

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

在jquery中添加readonly属性。

Answer 8

使用datepicker弹出增益焦点：

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

如果您不想要用户输入，请将其添加到输入字段

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

Answer 9

您可以通过两种方式完成此操作。 （据我所知）

1. 选项A：将您的文字字段设为只读。它可以如下完成。

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

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

Answer 10

我刚刚遇到这个，所以我在这里分享。这是选项

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

Answer 11

HTML

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

<强> CSS

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

Answer 12

除了添加readonly之外，您还可以使用onkeypress="return false;"

Answer 13

我知道此线程很旧，但是对于遇到相同问题的其他用户，可以实现@ 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;

Answer 14

这种demo类型可以通过将日历放在文本字段上来实现，因此您无法输入日历。您还可以将输入字段设置为仅在HTML中读取以确保。

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

Answer 15

以下是您的答案。您可以在限制文本框控件中的用户输入时使用jquery。

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

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

Answer 16

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

Answer 17

$（＆＃34;＃my_txtbox＆＃34;）。prop（＆＃39; readonly＆＃39;，true）

像魅力一样......

Answer 18

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

Answer 19

我知道这个问题已经得到解答，大多数建议使用 readonly attribure。
我只是想分享我的情景并回答。

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

Answer 20

替换时间选择器的ID： IDofDatetimePicker到你的id。

这将阻止用户输入任何进一步的键盘输入，但用户仍然可以访问时间弹出窗口。

$（“＃my_txtbox”）。keypress（function（event）{event.preventDefault（）;}）;

试试这个 资源： https://github.com/jonthornton/jquery-timepicker/issues/109

Answer 21

我发现jQuery Calendar插件，对我来说，至少对我来说，选择日期效果更好。

Answer 22

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

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

或者，如果您更喜欢用脚本来做：

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

我尚未对其进行广泛的测试，但是它在我使用过的Android设置上运行良好。

Answer 23

就我而言，我使用了 disableTextInput 属性

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

Answer 24

如果您希望用户从日期选择器中选择日期，但您不希望用户在文本框内输入，请使用以下代码：

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

});

Answer 25

或者，您可以使用隐藏字段来存储值...

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

和$（“＃my_txtbox”）。datepicker（{options：

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