How to hide the Bootstrap datepicker

Question

I made the date field readonly but still we are able to select the date from datepicker. I tried

$('#date').datepicker("None");
$('#date').datepicker("disable");
$('#date').datepicker("destroy");

None of them works. But the below code worked partially. Like on click it is showing the calendar and getting hidden. I'm not able to select any date from the calendar. This is fine but even it should not show the calendar.

$('#date').on('click', function(){
    $('.datepicker').hide();
});

Answer 1

If the #date is readonly, why initialize the datepicker? The following code should be enough: $('#date').attr('readonly', true)

EDITED to include the following solution to remove datepicker once it was initialized: $('#date').datepicker('remove');

Answer 2

你有没有尝试过

$('#date').hide();

Answer 3

Check the JSFiddle :- JSFiddle

$('.myDatepicker').each(function() {
var $picker = $(this);
$picker.datepicker();

var pickerObject = $picker.data('datepicker');

//HIDE THE CALENDER
$picker.on('changeDate', function(ev){
    $picker.datepicker('hide');
});
});