日期选择器显示在模态框后方，如何使其显示在模态框上方？

这个问题挺常见的，核心原因是浏览器原生的<input type="date">弹出的选择器属于浏览器内置控件，它的DOM结构并不在你的模态框内部，当模态框的z-index层级较高时，就会把这个日期选择器盖在下面，导致无法操作。下面给你两种可行的解决方案：

方案一：使用自定义日期选择器插件（推荐） #

原生日期选择器的层级很难通过CSS直接控制，换成自定义插件就能完全掌控它的显示层级。比如用jQuery UI Datepicker：

1. 先确保你引入了jQuery和jQuery UI的样式、脚本
2. 修改你的代码，把type="date"改成普通文本输入框，然后初始化日期选择器时设置更高的z-index：

// 替换原有HTML插入代码
$('#modal_div_res').html("<div><input class='form-control datepicker_input' type='text' id='date' name='date'></div>");

// 初始化自定义日期选择器，设置更高的层级
$('#date').datepicker({
  dateFormat: 'yy-mm-dd', // 匹配原生date控件的格式
  beforeShow: function(input, inst) {
    // 设置一个比模态框更高的z-index（比如Bootstrap模态框默认是1050）
    inst.dpDiv.css('z-index', 99999);
  }
});

这样自定义的日期选择器会直接显示在模态框上方，完全不会被遮挡。

方案二：尝试调整模态框的相关CSS（仅部分场景有效） #

如果你不想换插件，可以试试调整模态框的样式：

• 检查模态框的overflow属性，如果设置了overflow: hidden或overflow: auto，改成overflow: visible（但可能导致模态框内容溢出，需要权衡）
• 降低模态框的z-index值，让它低于浏览器原生日期选择器的层级（但这种方法兼容性差，不同浏览器原生控件的z-index规则不一样，不推荐）

小提示 #

如果你用的是Bootstrap模态框，它默认的z-index是1050，所以自定义日期选择器的z-index只要比这个值大就行，比如99999就很稳妥。

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