如何在单个input控件中实现双日历面板的日期选择功能

原生<input type="date">本身仅支持单个日期选择，无法直接实现单输入框触发双日历面板的范围选择效果，你要的功能可以通过以下两种方案实现：

方案一：使用成熟的第三方日期选择组件（推荐） #

目前主流的前端UI库都已经封装好了对应的双面板日期范围选择器，不用自己写复杂的日期逻辑，直接调用即可：

• Vue技术栈：使用Element Plus的ElDatePicker组件，配置type="daterange" + panels=2参数，即可直接实现双面板选择效果，绑定值为选中的[起始日期, 结束日期]数组。
• React技术栈：使用Ant Design的RangePicker组件，默认就是双面板展示，支持自定义日期格式、禁用日期等配置。
• 原生JS开发：使用layui的laydate组件，设置type: 'range'参数，引入资源后几行代码就能实现需求。

方案二：手动封装实现 #

如果不想引入第三方依赖，也可以自己手写组件，核心实现逻辑如下：

1. 把原有的type="date"的input改为普通文本输入框，设置readonly禁止手动输入，绑定点击事件触发双日历面板的显示/隐藏。
2. 开发双日历面板逻辑，同时渲染相邻两个月份的日期，处理月份/年份切换、日期选中态、范围校验等逻辑。
3. 用户选中起止日期后，将格式化后的日期范围（如2024-01-01 - 2024-01-10）回填到input中，表单提交时可以直接拆分字符串获取起止日期，也可以新增两个隐藏的input分别存储起止日期值，跟随表单一起提交，参考代码如下：

<form action="/check_calendar.php">
  <label>Calendar :</label>
  <!-- 展示用输入框 -->
  <input type="text" name="calendar" id="calendarInput" placeholder="选择日期范围" readonly>
  <!-- 隐藏域存储实际值，也可后端自行解析calendar字段 -->
  <input type="hidden" name="start_date" id="startDate">
  <input type="hidden" name="end_date" id="endDate">
  <input type="submit" value="SEND">
</form>

你需要的双日历选择效果参考：

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