Components · Date picker
下载

组件

Date picker 日期选择

日期选择器；data-pvs-datepicker 挂载 JS，点击输入框展开月历并写回 YYYY-MM-DD。

Interactive

需加载 pivcss.min.js；面板格子由 JS 渲染，Esc 或点外关闭。

一二三四五六日
<div class="pvs-datepicker" data-pvs-datepicker style="max-width:14rem">
  <input class="pvs-input pvs-datepicker__input" type="text" readonly placeholder="选择日期" aria-label="选择日期" />
  <div class="pvs-datepicker__panel">
    <div class="pvs-datepicker__header">
      <button type="button" class="pvs-datepicker__nav" data-pvs-datepicker-prev aria-label="上月">‹</button>
      <span class="pvs-datepicker__title">
      </span>
      <button type="button" class="pvs-datepicker__nav" data-pvs-datepicker-next aria-label="下月">›</button>
    </div>
    <div class="pvs-datepicker__weekdays">
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
      <span>日</span>
    </div>
    <div class="pvs-datepicker__grid">
    </div>
  </div>
</div>

Panel markup

文档预览静态展开面板；实页由 JS 填充 __grid 与 __title。

2026 年 6 月
一二三四五六日
261515
<div class="pvs-datepicker is-open" data-pvs-datepicker style="max-width:16rem">
  <input class="pvs-input pvs-datepicker__input" type="text" readonly value="2026-06-15" />
  <div class="pvs-datepicker__panel">
    <div class="pvs-datepicker__header">
      <button type="button" class="pvs-datepicker__nav">‹</button>
      <span class="pvs-datepicker__title">2026 年 6 月</span>
      <button type="button" class="pvs-datepicker__nav">›</button>
    </div>
    <div class="pvs-datepicker__weekdays">
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
      <span>日</span>
    </div>
    <div class="pvs-datepicker__grid pvs-cluster pvs-gap-1" style="flex-wrap:wrap">
      <span class="pvs-datepicker__day is-muted">26</span>
      <span class="pvs-datepicker__day is-selected">15</span>
      <span class="pvs-datepicker__day is-today">15</span>
    </div>
  </div>
</div>

数据属性

类名说明
data-pvs-datepicker初始化月历；输出 YYYY-MM-DD

类名速查

类名说明
pvs-datepicker根容器（需 data-pvs-datepicker）
pvs-datepicker__panel下拉面板
pvs-datepicker__grid / __day7 列日期格（JS 渲染）
is-today / is-selected / is-muted今日 / 选中 / 非本月
pvs-datepicker--up面板向上展开