Question

我使用带有文本字段的日历，我只希望日历选择值插入文本值，其他键盘手动值不插入文本框。

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

这是我的代码。当我单击此文本框时，打开日历并在文本值上插入选定的值。我想在这里只有日历选择值在这里用作文本值。此处未插入手动值。

我需要手动限制用户输入日期......

我将这个jquery代码用于我的日历或时间戳

<input type="text" name="date_to" value="<?php echo $date_to; ?>" placeholder="To" id="to" class="Original-datepicker" required />

我使用readonly ='true'，如： -

“$(document).ready(function () { $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "maxDate", selectedDate ); } }); }); $(document).ready(function () { $('#onselectExample').timepicker({ 'timeFormat': 'h:i A','minTime': '9:00am', 'maxTime': '9:00pm', }); $('#onselectTarget').timepicker({ 'timeFormat': 'h:i A','minTime': '9:00am', 'maxTime': '9:00pm', }); });

这有助于我在日历案例中

但在时间戳案例中我面临同样的问题..

timepicker作为下拉列表打开，我选择一个时间选项。当我使用readonly然后下拉列表没有打开..

Answer 1

您只需添加readonly属性

即可

<input readonly="readonly" type="text" name="date_to" value="<?php echo $date_to; ?>" placeholder="To" id="to" class="Original-datepicker" required />

对于timepicker，您可以直接阻止按键事件，请参阅Demo

$('#onselectExample,#onselectTarget').keypress(function(event){
    event.preventDefault();});
});

Answer 2

使用datepicker时禁用键盘输入，您可以这样做：

<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - No keyboard input</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript">
    $(function () {
        $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
        $("#datepicker").readonlyDatepicker(true);
    });
  </script>
</head>
<body>
  <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

限制用户在文本字段中手动输入日期

2 个答案: