如何隐藏 Bootstrap 日期选择器答案

【问题标题】：How to hide the Bootstrap datepicker如何隐藏 Bootstrap 日期选择器
【发布时间】：2014-11-15 10:36:41
【问题描述】：

我将日期字段设为只读，但我们仍然可以从 datepicker 中选择日期。我试过了

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

它们都不起作用。但下面的代码部分工作。就像点击一样，它显示日历并被隐藏。我无法从日历中选择任何日期。这很好，但即使它也不应该显示日历。

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

【问题讨论】：

.datepicker { display: none; } ??
$('#endDate').datepicker().attr("disabled", true);

标签： javascript jquery twitter-bootstrap date bootstrap-datepicker

【解决方案1】：

如果#date 是只读的，为什么要初始化日期选择器？以下代码应该足够了： $('#date').attr('readonly', true)

编辑包含以下解决方案，以在初始化日期选择器后删除它： $('#date').datepicker('remove');

【讨论】：

我无法使用此代码手动编辑该字段。但是可以从日期选择器中选择另一个日期值。这不是我想要的。不应显示日期选择器 @user1928896
那么，这可能会成功$('#date').datepicker('remove');

【解决方案2】：

你试过了吗

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

【讨论】：

这隐藏了整个日期字段。我只想隐藏日期选择器。我试过 $('#date').datepicker().attr("disabled", true);但它正在玩捉迷藏游戏。就像它显示日期选择器并被隐藏一样。
你也可以分享你的html吗？

【解决方案3】：

检查 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');
});
});

【讨论】：

我已经在下面提到的点击上尝试过这个 $('#date').on('click', function(){$('.datepicker').hide();});但它正在显示和隐藏日期选择器。不知何故，它部分工作，因为我无法从选择器中选择日期。但我希望日期选择器完全隐藏@Rushee
你想从datepicker中选择日期，但是日期的文本框应该是只读的？？
我无法从选择器中选择日期。但我希望日期选择器完全隐藏。你能解释一下吗？
我想完全删除日期选择器。但是在单击日期字段时，日期选择器日历首先显示然后连续隐藏（如翻转）。现在我希望它一次完全隐藏。它不应该显示和隐藏@Rushee
我的用例：日期选择器有两个日期字段 date1 和 date2。 onChange of date1 值，date2 值必须用 date1 值填充，并且应该是只读的并且它不应该是可编辑的。不知何故，我将 readonly 设为 true，现在试图隐藏 datepicker @Rushee