在 dateselect 之后使 Bootstrap DatePicker ReadOnly

Question

我需要在 selecting 日期后将 bootstrap 日期选择器设置为只读。但我没有得到同样的要求行为。我尝试使用 datepicker 的 change 事件和 changeDate 事件，但其中 none 正在工作。

 $('#txtBookingDate').on('change', function (event) {
        $('#txtBookingDate').attr('readonly','readonly');
    });

还有，

 $('#txtBookingDate').datepicker()
    .on('changeDate', function (e) {        
        $('#txtBookingDate').attr('readonly','readonly');
    });

我想要实现的是只允许用户一次 select 日期，即一旦用户第一次 select 日期然后将 datepicker 设置为只读，这样用户就不能更改日期！

如有任何帮助，我们将不胜感激！！

Answer 1

您可以在第一次选择日期后删除日期选择器并使用prop() instead of attr() like,

$('#txtBookingDate').datepicker().on('change', function (e) {        
     $(this).datepicker('remove')
            .prop('readonly',true);
});

片段，

$('#txtBookingDate').datepicker().on('change', function(e) {
  $(this).datepicker('remove')
    .prop('readonly', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<input id="txtBookingDate" />

您可以在不删除日期选择器的情况下使用 enableOnReadonly:false 选项。

Answer 2

您可以使用这些 attr('readonly',true) 或 prop('readonly',true) 将日期输入设置为只读。您可以 select 根据您的 jquery 版本选择其中之一。

// if jquery version > 1.9
$('#txtBookingDate').on('change', function (event) {
        $('#txtBookingDate').prop('readonly',true);
});

// if jquery version < 1.9
$('#txtBookingDate').on('change', function (event) {
        $('#txtBookingDate').attr('readonly',true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="txtBookingDate"></input>

Answer 3

试试这个代码片段：

$('#txtBookingDate').datepicker({
            weekStart: 1,
            startDate: '01/01/2010',
            autoclose: true,
            "setDate": new Date(),
        }).on('changeDate', function (selected) {
            $(this).attr("disabled","disabled");
        });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.min.css" integrity="sha256-V0Nho4sjvYsznAMBVSBq2YuaQ8CDXv4FRdoIy+Yf4zk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.min.js" integrity="sha256-FOV0q1Ks/eXoUwtkcN6OxWV4u9OSq7LDomNYnfF/0Ys=" crossorigin="anonymous"></script>
   
<input type="text" id="txtBookingDate"/>

在 dateselect 之后使 Bootstrap DatePicker ReadOnly

Make Bootstrap DatePicker ReadOnly after dateselect

asp.net-mvc

jquery

bootstrap-datepicker