TempusDominus Bootstrap4日期选择器禁用未来日期及选当前日期异常

嘿，我之前也碰到过这个坑！结合你的配置来看，问题大概率出在脚本冲突、重复ID或者配置兼容性上，给你一步步拆解解决：

1. 先解决最致命的问题：重复加载jQuery #

你布局里同时加载了jquery-1.11.3.min.js和jquery-2.2.0.min.js，这绝对会导致插件行为异常！jQuery不能重复引入，后面加载的版本会覆盖前面的，而TempusDominus初始化时可能绑定到了旧版本的jQuery上，后续交互又用了新版本，就会出现这种“第一次不行第二次行”的诡异情况。

解决方法：删掉其中一个jQuery引用，建议保留jquery-2.2.0.min.js（版本更贴合Bootstrap 4的要求），确保整个页面只有一个jQuery实例。

2. 修复HTML中的重复ID #

你的容器div和输入框都用了id="datetimepicker4"，这违反了HTML的ID唯一性规则！jQuery选择器会优先匹配第一个元素，导致日期选择器的事件绑定混乱，初始化不完整。

修改HTML结构，给输入框换个ID：

<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4" name="date" id="datePickerInput"/>
  <div class="input-group-append custom-datetimepicker" data-target="#datetimepicker4" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>

3. 调整日期配置，用Moment.js对象代替原生Date #

TempusDominus是基于Moment.js开发的，用原生new Date()可能会有兼容性问题，尤其是和useCurrent: false组合时，首次渲染可能没正确识别当前日期的可选状态。

把maxDate改成Moment对象：

$(function () {
  $('#datetimepicker4').datetimepicker({
    format: 'L',
    useCurrent: false,
    maxDate: moment() // 用moment()替代new Date()
  });
});

4. 排查掩码插件的冲突 #

你加载了jquery.inputmask.bundle.js和jquery.mask.js两个掩码插件，它们会修改输入框的输入行为，可能和日期选择器的事件触发冲突。

测试方法：暂时注释掉这两个插件的引用，看看日期选择器是否恢复正常。如果正常，那就是掩码插件的问题，你可以：

• 只给需要掩码的输入框应用掩码规则，排除日期选择器的输入框；
• 调整掩码配置，确保和日期选择器的格式'L'兼容（不同地区L对应的格式不同，比如美式是MM/DD/YYYY，欧式是DD/MM/YYYY）。

最后验证脚本加载顺序 #

确保所有依赖脚本的加载顺序正确，应该是：

• jQuery
• Moment.js
• Popper.js
• Bootstrap JS
• TempusDominus Bootstrap4 JS

按照上面的步骤调整后，应该就能解决首次无法选择当前日期的问题了！

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