带有不允许用户输入的文本输入的jQuery日期选择器

您应该能够使用 只读

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

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

下面的代码不允许用户键入新字符,但是

$("#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工作,请使用“按键”而不是“按键”

初始化日期选择器后:

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

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

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

1. 备选方案A: 将文本字段设置为只读。可以按如下方式进行。

2. 备选案文B: 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>

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

这是小提琴:

http://jsfiddle.net/matbaric/wh1cb6cy/

我的bootstrap-datetimepicker.js版本是4.17.45

$("#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');
    }
});

下面是您的答案,这是解决问题的方法。当您在textbox控件中限制用户输入时,您不想使用jquery。

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

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

$(“#我的txtbox”).prop('readonly',true)

工作得很有魅力。。

除了使用文本框,您还可以使用按钮。最适合我,我不希望用户手动写入日期。

readonly 属性。
我只想分享我的情景和答案。

添加后 归因于我的 HTML元素 ,我面临着我无法解决的问题 这 required 动态地。
甚至尝试设置为两者都有 只读 和 必修的

所以我建议不要使用 只读 必修的 而且

改用

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

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

这允许按 tab 只有钥匙。
您可以添加更多 键控代码

我在下面添加了代码,因为我已经添加了这两个代码 只读 和 必修的 它仍然提交表格。
移除后 只读 它工作正常。

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。

$(“#我的txtbox”).keypress(函数(事件){event.preventDefault();});

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

inputmode="none" 在HTML输入标记中:

<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" />

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

如果希望用户从日期选择器中选择日期,但不希望用户在文本框中键入日期,请使用以下代码:

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

});