Chrome浏览器中bootstrapMaterialDatePicker自动弹出问题求助

我来帮你搞定这个Chrome专属的小bug——原本得点击才会弹出的日期选择器，现在页面一加载就自动冒出来，其他浏览器却好好的。这大概率是Chrome近期的更新或者它特有的自动聚焦行为搞的鬼，下面给你几个实用的解决方案：

方案1：延迟初始化选择器 #

Chrome的DOM加载速度可能比其他浏览器快一截，导致插件初始化时输入框的状态还不稳定，误触发了弹窗。给初始化加个短暂延迟就能避开这个问题：

$(document).ready(function() {
  // 延迟100毫秒初始化，给页面元素留足稳定时间
  setTimeout(function() {
    $('.js-calendar-future').bootstrapMaterialDatePicker({
      weekStart: 0,
      time: false,
      minDate: new Date(),
      format: 'MM/DD/Y',
      triggerEvent: 'click',
    });
  }, 100);
});

方案2：强制输入框失去焦点 #

Chrome有时候会自动聚焦页面里第一个带required属性的输入框，而某些版本的bootstrapMaterialDatePicker可能偷偷把focus事件也当成了触发条件（哪怕你指定了triggerEvent: 'click'）。初始化前先让输入框失去焦点就行：

$(document).ready(function() {
  // 先让目标输入框失去焦点，避免Chrome自动聚焦触发弹窗
  $('.js-calendar-future').blur();
  
  $('.js-calendar-future').bootstrapMaterialDatePicker({
    weekStart: 0,
    time: false,
    minDate: new Date(),
    format: 'MM/DD/Y',
    triggerEvent: 'click',
  });
});

方案3：手动绑定触发事件 #

如果上面的方法都不管用，咱们就彻底接管事件绑定，不让插件自己瞎搞：

$(document).ready(function() {
  // 初始化选择器，但禁用插件自带的事件绑定
  const datePicker = $('.js-calendar-future').bootstrapMaterialDatePicker({
    weekStart: 0,
    time: false,
    minDate: new Date(),
    format: 'MM/DD/Y',
    triggerEvent: null, // 取消默认事件绑定
  });
  
  // 手动给输入框绑定click事件，点击才唤起选择器
  $('.js-calendar-future').on('click', function() {
    datePicker.bootstrapMaterialDatePicker('show');
  });
});

另外你也可以检查一下bootstrapMaterialDatePicker的版本，看看有没有针对Chrome最新版本的修复补丁，必要时升级到最新版试试。

内容的提问来源于stack exchange，提问作者Fokrule