Question

我要求在选择日期后只读取引导日期选择器。但我没有得到相同的必要行为。我尝试过使用datepicker的change事件和changeDate事件但它们都没有工作。

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

而且，

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

我想要实现的是允许用户只有一次选择日期，即一旦用户首次选择日期，然后只读取日期选择器，这样用户就无法更改日期！

任何帮助都将不胜感激!!

Answer 1

您可以使用这些attr('readonly',true)或prop('readonly',true)进行只读日期输入。您可以根据您的jquery版本选择其中一个。

＆＃13;

// 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);
});

＆＃13;

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

＆＃13;

Answer 2

您可以在首次选择日期后删除日期选择器并使用prop()代替attr()，

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

代码段，

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: