DatePicker 日期选择器
v2.0.5+

日期选择器支持多种模式：日期、日期+时间、纯时间、年月、年份选择，以及两个输入框联动的时间区间。

日期模式

  • Preview
  • Code
<input class="bny-input" data-picker="date" placeholder="选择日期">

日期 + 时间

  • Preview
  • Code
<input class="bny-input" data-picker="datetime" placeholder="选择日期时间">

纯时间

  • Preview
  • Code
<input class="bny-input" data-picker="time" placeholder="选择时间">

年月选择

  • Preview
  • Code
<input class="bny-input" data-picker="year-month" placeholder="选择年月">

时间区间

  • Preview
  • Code

两个输入框联动，开始时间不会晚于结束时间。

至 
<div>
    <input class="bny-input" id="range-start"
        data-picker="date" data-picker-range="#range-end"
        placeholder="开始日期">
    <span>至</span>
    <input class="bny-input" id="range-end"
        data-picker="date" data-picker-range="#range-start"
        placeholder="结束日期">
</div>

配合 HTMX 使用

  • Preview
  • Code

通过 HTMX 动态加载日期选择器，验证 htmx.onLoad 自动初始化。

点击按钮加载日期选择器… 
<button class="bny-btn" hx-get="/test/data/datepicker-demo.html"
    hx-target="#demo" hx-swap="innerHTML">
    加载表单
</button>
<div id="demo"></div>

键盘交互

  • Preview
  • Code
打开日期面板后：
  • ←/→：前一/后一日（月份视图下切换月份）
  • ↑/↓：上一周/下一周（月份视图下切换年份）
  • Enter：确认选择
  • Escape：取消并关闭
关闭面板后自动触发 input 的 change 事件，便于配合 hx-trigger="change" 提交。 
<input class="bny-input" data-picker="date">
<input class="bny-input" data-picker="range" data-picker-mode="datetime">

API

属性

属性 值 说明
data-picker date 日期选择（默认）
data-picker datetime 日期 + 时分秒
data-picker time 纯时间选择
data-picker year-month 年月选择
data-picker-range #other-id 区间联动，指向另一个 input 的 CSS 选择器
点击标题可在日历 → 月份 → 年份面板之间切换。点击"今天"快捷填充当前时间，💜 确认生效，取消关闭。