Bootstrap5+JSP移动端日期选择器不显示默认文本dd/mm/yyyy求助

问题概述 #

使用Bootstrap 5开发的JSP项目中，type="date"的输入框在桌面端能正常显示"DD-MM-YYYY"默认提示，但实际移动设备上该提示消失，仅浏览器开发者工具模拟移动端时显示正常。

相关代码 #

表单HTML代码 #

<form action="" method="GET" class="row g-1 mb-3 ">
<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="date" class="form-control" name="startDate" style="font-size:.9rem">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="date" class="form-control" name="endDate" style="font-size:.9rem">
</div> 
</div>

Bootstrap引入方式 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 其他业务代码 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>

显示效果 #

• 桌面端显示：
  

• 移动端显示：
  

已尝试方案 #

曾参考过相关技术问答方案，但认为实用性不足。

可行解决办法 #

方案一：CSS伪元素模拟提示文本（保留原生控件功能） #

移动端原生date控件会被替换为系统自带的日期选择器，原生占位符无法显示，可通过CSS伪元素模拟提示文本，同时保留原生选择功能：

/* 自定义日期输入框样式 */
input[type="date"].form-control {
  position: relative;
}

/* 扩大日历选择器点击区域 */
input[type="date"].form-control::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

/* 输入框为空时显示提示文本 */
input[type="date"].form-control:placeholder-shown::before {
  content: "DD-MM-YYYY";
  position: absolute;
  color: #6c757d; /* 匹配Bootstrap默认占位符颜色 */
  padding: 0.375rem 0.75rem;
}

/* 输入有内容时隐藏提示 */
input[type="date"].form-control:not(:placeholder-shown)::before {
  display: none;
}

方案二：改用文本框+第三方日期选择器（更灵活） #

如果原生控件限制过多，可使用普通文本输入框搭配适配Bootstrap风格的第三方日期选择器（如flatpickr）：

1. 引入flatpickr资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

2. 修改HTML结构：

<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="text" class="form-control date-picker" name="startDate" placeholder="DD-MM-YYYY" style="font-size:.9rem">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-2">
    <input type="text" class="form-control date-picker" name="endDate" placeholder="DD-MM-YYYY" style="font-size:.9rem">
</div>

3. 初始化日期选择器：

document.addEventListener('DOMContentLoaded', function() {
    flatpickr('.date-picker', {
        dateFormat: "d-m-Y",
        placeholder: "DD-MM-YYYY",
        clickOpens: true,
        allowInput: true
    });
});

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