如何从javascript禁用引导日期选择器

时间:2015-10-07 10:04:09

标签: javascript jquery twitter-bootstrap bootstrap-datepicker

我想从javascript代码中禁用引导日期选择器。我正在使用asp.net应用程序。

//jquery script  
$("#datepicker").datepicker({
  autoclose: true,
  clearBtn: true,
  todayHighlight: true
}).datepicker('update', new Date());

var v1 = document.getElementById('<%=txtdatepicker.ClientID %>');
v1.setAttribute("readonly", "readonly"); //this code make textbox readonly:(  

//ive tried this
$(document).off('.datepicker.data-api');
<div id="datepicker" class="input-group date" data-date-format="dd-MM-yyy">
  <input class="form-control" id="txtdatepicker" type="text" runat="server" readonly="readonly" />
  <span class="input-group-addon"><i   class="glyphicon glyphicon-calendar"></i></span> 
</div>

我尝试了下面给出的解决方案,但日历仍然会弹出日期 在日期选择器文本框中更改。

3 个答案:

答案 0 :(得分:3)

试试这个: -

$('#datepicker').datepicker({ enableOnReadonly: false });

enableonreadonly

答案 1 :(得分:0)

...试

$('#your-element-id').datepicker("remove");

答案 2 :(得分:0)

试试这个。 可能不是一个好方法,但有效

$(".DatePicker").datepicker({
  Format: "m-dd-yy",
  autoclose: true,
}).on('show', function() {
  if ($(this).attr('readonly')) {
    $(this).datepicker('hide')
  }
})

$('#disable').click(function() {
  $(".DatePicker").attr('readonly', 'readonly')
});
$('#enable').click(function() {
  $(".DatePicker").removeAttr('readonly')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<div class='container'>
  <input type="text" placeholder="MM/DD/YYYY" class="DatePicker" />
</div>
<input type='button' value='Disable the Datepicker' id='disable' />
<input type='button' value='Enable the Datepicker' id='enable' />

相关问题