如何让Bootstrap 5.3中的日期选择器始终保持可见状态？

云上老周

2026-6-21

需求与问题

说明

我已在Bootstrap 5.3中成功将<input type="date">用作日期选择器，用于选择数据查看的日期。我希望它始终保持可见。

问题

正确实现该需求的方法是什么？

当前代码

<form id="Create" method="post" asp-page-handler="CreateDate" >
  <input class="btn btn-secondary " type="date" name='newdate' onchange='this.form.submit()' >
</form>

解决方案

要让日期选择器始终保持可见，可从以下几个方面调整：

修正样式类冲突：当前输入框使用了btn btn-secondary按钮类，这会让输入框呈现按钮样式，可能引发显示异常。建议替换为Bootstrap表单控件类form-control，既符合表单样式规范，也避免按钮相关的隐藏逻辑：
```
<form id="Create" method="post" asp-page-handler="CreateDate">
  <input class="form-control" type="date" name='newdate' onchange='this.form.submit()'>
</form>
```

确保布局稳定不被遮挡：将输入框放在Bootstrap的标准布局容器（如container、row/col）中，避免页面元素排版挤压导致它被隐藏。如果需要固定在页面某个位置（比如顶部），可以用固定定位类实现，同时给页面主体添加内边距避免内容被遮挡：

<!-- 固定在页面左上角的日期选择器 -->
<div class="position-fixed top-0 start-0 p-3 bg-white shadow-sm">
  <form id="Create" method="post" asp-page-handler="CreateDate">
    <input class="form-control" type="date" name='newdate' onchange='this.form.submit()'>
  </form>
</div>

<!-- 页面主体内容，添加顶部内边距避免被固定元素遮挡 -->
<div class="container pt-5">
  <!-- 你的页面内容 -->
</div>