更新记录

0.1.0（2026-09-05） 下载此版本

• 初版 nax-date-strip
• 横向日期选择条：单选 / 多选 / 范围选择（v-model + change）
• 支持 min / max 可选范围（默认以当前周为中心三周）
• 支持 disabledDate 禁用、filter 过滤展示、maxDays + overMaxDays 最多可选天数
• 支持 formatter 自定义日期文案与样式、allowSameDay、起止文案
• 支持 value-format 绑定字符串、show-lunar 农历展示
• 主题通过 --nax-date-strip-* CSS 变量定制

平台兼容性

uni-app x(4.25)

其他

nax-date-strip

nax-ui 日期横条（uni-app x / uvue）。以横向滚动条方式展示一段连续日期，支持单选、多选与范围选择。

依赖

基础用法

<nax-date-strip v-model="value" @change="onChange"></nax-date-strip>

value 为 Date | null。

类型

<!-- 多选 -->
<nax-date-strip v-model="multipleValue" type="multiple"></nax-date-strip>
<!-- 范围选择 -->
<nax-date-strip v-model="rangeValue" type="range"></nax-date-strip>

多选与范围的 v-model 为 Date[]；范围选中后为 [开始, 结束]。

范围 / 最大天数

<nax-date-strip
  v-model="rangeValue"
  type="range"
  :min="new Date(2024, 0, 1)"
  :max="new Date(2024, 0, 20)"
  :max-days="5"
  :over-max-days="onOverMaxDays"
  :allow-same-day="false"
></nax-date-strip>

min / max 默认分别为当前周上一周的周一与下一周的周日；不传时默认展示以当前周为中心的三周。

禁用与过滤

<!-- 禁用周末 -->
<nax-date-strip v-model="value" :min="minDate" :max="maxDate" :disabled-date="disabledWeekend"></nax-date-strip>

<!-- 仅展示工作日 -->
<nax-date-strip v-model="value" :min="minDate" :max="maxDate" :filter="onlyWorkday"></nax-date-strip>

disabledDate(date) 返回 true 禁选；filter(date) 返回 true 才展示该日期。

格式化日期

<nax-date-strip v-model="value" :formatter="formatter"></nax-date-strip>

const formatter = (day: any) => {
  if (day.date.getDay() == 0 || day.date.getDay() == 6) {
    day.bottom = '休'
    if (day.type != 'selected') {
      day.style = 'background-color:#fdf3e4;color:#c97c10;border-color:#fcefda;'
    }
  }
}

formatter 接收 CalendarDay 对象，可改写：

• day.top：第一行文案（默认显示周几）
• day.bottom：第三行文案（默认显示范围标记或农历）
• day.style：内联样式字符串，应用到格子与日期数字
• day.className：附加 class

CalendarDay 结构：

展示农历

<nax-date-strip v-model="value" :min="minDate" :max="maxDate" show-lunar></nax-date-strip>

值格式化

默认绑定值为 Date 对象；设置 value-format 后绑定字符串：

<nax-date-strip v-model="strValue" value-format="YYYY-MM-DD"></nax-date-strip>

支持标记：YYYY YY MM M DD D HH H mm ss。

Props

Events

主题定制

通过 CSS 变量覆盖：

示例：通过 order 变量把周几移到日期下方，去掉间距改成直角：

<nax-date-strip
  v-model="value"
  style="--nax-date-strip-column-gap:0px;--nax-date-strip-item-border-radius:0px;--nax-date-strip-item-week-order:3;"
></nax-date-strip>

注意

• 农历计算覆盖 1900 - 2100 年。
• 组件默认展示以当前周为中心的 3 周（min/max 可自定义）。
• 蒸汽模式仅组合式 API；样式仅 class 选择器。