测试元素是不是已经有 Bootstrap 日期选择器

Posted 2023-05-07

【中文标题】测试元素是不是已经有 Bootstrap 日期选择器

【英文标题】：Test if element already has Bootstrap datepicker测试元素是否已经有 Bootstrap 日期选择器

【发布时间】：2015-06-27 12:06:44

【问题描述】：

我正在开发一个具有多个实现的相当大的软件平台。以前有一个使用 jQueryUI 日期选择器的实现，我现在正在对使用 Bootstrap 日期选择器的界面进行改造。

有没有办法让我测试 Bootstrap 日期选择器是否已经附加到某个元素，比如说这个

<input type="text" id="user-date" class="datepicker"/>

请注意，我不是在询问 Bootstrap 日期选择器是否像 this qestion 中那样加载。我宁愿要求一个测试，类似于this one for jQueryUI datepicker。

【参考方案1】：

当您在元素上使用 bootstrap-datepicker 时，它会在 .data("datepicker") 中添加一个对象，因此您可以检查它是否存在并检查 datepicker 是否可见，您可以使用 .data("datepicker" ).picker 对象像这样

html

<input type="text" id="user-date" class="datepicker"/>     

JS

if(!$('#user-date').data('datepicker'))// or $('#user-date').data('datepicker')==null
    console.log('datepicker is not attached');
   
$('#user-date').datepicker();
$('#user-date').focus();//set focus to display datepicker
if($('#user-date').data('datepicker'))
    console.log('datepicker is already attached');
    if($('#user-date').data('datepicker').picker.is(":visible"))
        console.log("datepicker is visible");
    

https://jsfiddle.net/weso8a96/

【讨论】：

.data('datepicker') 总是满的，无论输入是否使用 datepicker 初始化，所以测试总是正确的