使用日期选择器控件停止用户在输入中键入日期

Question

我创建了一个 jquery 日期选择器。我希望用户 select 到大于或等于当前日期的日期，所以我使用了 mindate: 0。这将禁用所有以前的日期。

但是，用户可以通过输入字段键入以前的日期。如何禁用输入字段但不禁用日期选择器？

$('#DateFrom1').datepicker('setDate', 'today');
$("#DateFrom1").datepicker({
    minDate: 0
});

Answer 1

将输入字段设置为readonly，这样用户就无法直接编辑它。另请注意，您目前正在尝试在实例化日期选择器控件之前设置它的日期；交换这些语句的顺序。

$("#DateFrom1").datepicker({
    minDate: 0
}).datepicker('setDate', 'today');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

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

使用日期选择器控件停止用户在输入中键入日期

Stop user typing date in input with datepicker control

jquery

jquery-ui

jquery-ui-datepicker