日期选择器异常及日期输入框排版、遮挡问题求助

咱们来逐个搞定你遇到的三个问题：

1. 日期输入框无法并排显示 #

display:inline 没生效大概率是因为输入框默认是 inline-block，但被父元素布局或其他样式覆盖了。最稳妥的方式是用Flex布局控制父容器，轻松实现并排还能灵活调间距。

2. 仅一个Date Picker工作 #

这通常是初始化时用了ID选择器（比如$("#date1")），如果两个输入框ID重复或者只选中了一个元素就会出问题。改用类选择器初始化所有日期输入框就能解决。

3. Date Picker被遮挡 #

这是z-index层级问题，默认的datepicker容器层级不够，被其他元素压在下面了。给datepicker容器设置足够高的z-index值就行。

完整代码示例 #

HTML

<div class="date-container">
  <div class="date-field">
    <label for="start-date">起始日期:</label>
    <input type="text" id="start-date" class="date-input" placeholder="选择起始日期">
  </div>
  <div class="date-field">
    <label for="end-date">结束日期:</label>
    <input type="text" id="end-date" class="date-input" placeholder="选择结束日期">
  </div>
</div>

CSS

/* 父容器用Flex实现并排 */
.date-container {
  display: flex;
  gap: 2rem; /* 两个输入框的间距，可按需调整 */
  align-items: center; /* 垂直居中对齐 */
}

/* 单个日期字段的样式，可选优化 */
.date-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.date-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 150px;
}

/* 解决Date Picker被遮挡问题 */
.ui-datepicker {
  z-index: 9999 !important; /* 确保层级足够高，覆盖其他元素 */
}

jQuery

// 初始化所有带.date-input类的日期选择器
$(document).ready(function() {
  $(".date-input").datepicker({
    dateFormat: "yy-mm-dd", // 可选：自定义日期显示格式
    showOtherMonths: true,
    selectOtherMonths: true
  });
});

关键说明： #

• Flex布局的date-container确保两个日期字段稳定并排，gap属性比margin更灵活可控。
• 用类选择器.date-input批量初始化，避免重复ID或遗漏元素的问题。
• 给ui-datepicker设置高z-index，确保它在所有页面元素上方完整显示。

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