I want to disable bootstrap date picker from the javascript code. I am using asp application.

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

I tried the solutions give below but the calender still pops up and the date in the date picker text box changes.

I want to disable bootstrap date picker from the javascript code. I am using asp application.

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

I tried the solutions give below but the calender still pops up and the date in the date picker text box changes.

• javascript
• jquery
• twitter-bootstrap
• bootstrap-datepicker

Share Improve this question Follow edited Jan 10, 2018 at 20:06 Ed Bayiates 11.2k44 gold badges4646 silver badges6363 bronze badges asked Oct 7, 2015 at 10:04 AlbertAlbert 2111 silver badge55 bronze badges 6

• 2 Try v1.setAttribute("disabled", "disabled"); or v1.setAttribute("disabled", true); – Guruprasad J Rao Commented Oct 7, 2015 at 10:08
• what datepicker are you using? show how you initializer it: - $('#datetimepicker1').datetimepicker() ?? – BenG Commented Oct 7, 2015 at 10:14
• v1.setAttribute("data-provide", "") will kill it for good :) to turn it back v1.setAttribute("data-provide", "datepicker") – davidkonrad Commented Oct 7, 2015 at 10:14
• @BG101 im using $('#datepicker').datepicker() – Albert Commented Oct 7, 2015 at 10:17
• @GuruprasadRao v1.setAttribute("readonly", "readonly"); using this code i can disable text box only not the calender popup.i need to prevent calender – Albert Commented Oct 7, 2015 at 10:18

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

try this:-

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

enableonreadonly

Try...

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

try this . May not be a good approach but works

$(".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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./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' />