在 dateselect 之后使 Bootstrap DatePicker 只读答案

【问题标题】：Make Bootstrap DatePicker ReadOnly after dateselect在 dateselect 之后使 Bootstrap DatePicker 只读
【发布时间】：2017-06-19 06:37:52
【问题描述】：

我需要在选择日期后将引导日期选择器设为只读。但我没有得到同样的行为。我尝试过使用 datepicker 的 change 事件和 changeDate 事件，但它们都不起作用。

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

还有，

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： jquery asp.net-mvc bootstrap-datepicker

【解决方案1】：

您可以在第一次选择日期后删除日期选择器并使用prop() 而不是attr() 之类的，

$('#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 选项而不删除日期选择器。

【讨论】：

在选择日期之前删除日期选择器，即当我点击日期选择器时，它会弹出并关闭，日期选择器变为只读！ :(
太棒了！！它可以按我的意愿正常工作！谢谢！！

【解决方案2】：

您可以使用这些attr('readonly',true) 或prop('readonly',true) 将日期输入设为只读。您可以根据自己的 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>

【讨论】：

感谢您的帮助，但我无法将其禁用，因为我需要 Post 中的日期值，并且在表单提交时不会发布禁用的元素！ :(
@Nikunj 你用的是哪个版本的jquery
您应该检查您的 jquery 版本以选择 .prop() 或 .attr()

【解决方案3】：

试试这个代码 sn-p：

$('#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"/>

【讨论】：