限制用户在文本字段中手动输入日期 - Restrict user to enter date manually in text field

Restrict user to enter date manually in text field

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

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

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

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

我使用这个jquery代码的日历或时间选择器

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

i use readonly='true' like:——

" placeholder="To" id="to" class="Original-datepicker" required readonly='true' />

这有助于我在日历的情况下

但在时间选择器的情况下，我面临同样的问题。

timepicker作为下拉菜单打开，我选择了一个时间选项。当我使用只读时，下拉菜单是不打开的。

您可以简单地添加readonly属性

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

和时间选择器，您可以简单地防止按键事件，参见演示

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

在使用日期选择器时禁用键盘输入，您可以这样做:

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