如何在选择Air Datepicker日期后启用禁用的selectpicker下拉框？

看起来你遇到的核心问题是事件绑定方式不对，导致日期选择后的回调完全没触发，自然也无法启用时间下拉框。结合你用的Air Datepicker和Bootstrap Selectpicker，我给你两个可行的解决方案：

方案1：初始化Air Datepicker时使用onSelect回调 #

Air Datepicker的官方API里，日期选择后的回调是通过初始化配置里的onSelect参数实现的，而不是像jQuery UI Datepicker那样用datepicker("change", ...)的方式。同时，因为你用了selectpicker，移除disabled属性后必须刷新插件才能让界面生效。

修改后的JS代码：

// 先初始化datepicker，同时绑定选择事件
$("#date").datepicker({
  onSelect: function(formattedDate, date, inst) {
    alert("Test");
    // 移除disabled属性
    $("#time").removeAttr("disabled");
    // 刷新selectpicker，否则界面不会更新
    $("#time").selectpicker("refresh");
  }
});

方案2：监听input的change事件 #

Air Datepicker在用户选择日期后，会自动触发输入框的change事件，所以你也可以直接监听这个原生事件：

// 先初始化datepicker
$("#date").datepicker();

// 监听输入框的change事件
$("#date").on("change", function() {
  alert("Test");
  $("#time").removeAttr("disabled");
  $("#time").selectpicker("refresh");
});

为什么你的原代码不生效？ #

你用的$("#date").datepicker("change", function())是jQuery UI Datepicker的事件绑定语法，但你实际使用的是Air Datepicker，两个插件的API不一样，所以这个回调根本不会被触发，alert自然也弹不出来。

另外要注意：不管用哪种方式，修改selectpicker的disabled状态后，一定要调用selectpicker("refresh")，否则Bootstrap Selectpicker不会更新界面，就算属性移除了，下拉框还是显示禁用状态。

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