sard-uniapp

--- title: DateStrip subtitle: 日期横条 group: 表单组件 version: 1.29+ --- ## 介绍以横条的方式展示范围内的日期，可以进行单选、多选、范围选择等操作。 ## 引入 ```js import DateStrip from 'sard-uniapp/components/date-strip/date-strip.vue' ``` ## 代码演示 ### 基础用法使用 `v-model` 绑定当前值。 <<< @demo/date-strip/demo/Basic.vue ### 类型日期横条可以选择单个值、多个值以及进行范围选择。 <<< @demo/date-strip/demo/Type.vue ### 自定义日期范围可以使用 `min` 和 `max` 属性限制可以选择的日期范围。 <<< @demo/date-strip/demo/MinMax.vue ### 最多选择天数在多个值和范围选择中，使用 `maxDays` 属性可以限制最多可选的天数。超出允许选择的天数后会调用 `overMaxDays` 属性配置的函数。 <<< @demo/date-strip/demo/MaxDays.vue ### 禁用日期 `disabledDate` 属性配置的函数接收一个日期对象，如果此函数返回真则禁用这个日期。 <<< @demo/date-strip/demo/DisabledDate.vue ### 过滤日期 `filter` 属性配置的函数可以过滤要展示的日期。 <<< @demo/date-strip/demo/Filter.vue ### 格式化日期 `formatter` 属性可以配置一个接收 `CalendarDay` 类型对象的函数，通过此对象可以自定义当前日期展示的内容和样式。 <<< @demo/date-strip/demo/Formatter.vue ### 展示农历可以设置 `show-lunar` 属性显示农历信息。 <<< @demo/date-strip/demo/ShowLunar.vue ### 自定义样式可以设置 css 变量来改变默认样式。 <<< @demo/date-strip/demo/Style.vue ## API ### DateStripProps | 属性 | 描述 | 类型 | 默认值 | | --------------- | ------------------------------------------------------- | --------------------------------------------------------- | ----------------------- | | root-class | 组件根元素类名 | string | - | | root-style | 组件根元素样式 | StyleValue | - | | type | 日期横条类型 | CalendarType | 'single' | | model-value | 选中的日期，单选时为单个日期，多选和范围时为日期数组 | Date \| Date[] \| string \| string[] | - | | min | 可选择的最小日期 | Date | 当前周上一周的起始日 | | max | 可选择的最大日期 | Date | 当前周下一周的结束日 | | disabled-date | 指定禁选日期，返回 `true` 表示禁选 | `(date: Date) => boolean` | - | | filter | 只展示通过过滤的日期 | `(date: Date) => boolean` | - | | max-days | 最多可选天数，用于多选和范围 | number | Number.MAX_SAFE_INTEGER | | over-max-days | 超出最多可选天数时触发 | `() => void` | - | | formatter | 通过修改 `CalendarDay` 对象属性值，自定义日期文案和样式 | `(day: CalendarDay) => void` | - | | allow-same-day | 范围选择中，是否允许起始和结束为同一天 | boolean | false | | value-format | 绑定值的格式，不指定则绑定值为 Date 对象 | string [详见特殊符号](../utilities/date#日期格式特殊符号) | - | | start-date-text | 开始日期文字 | string | '开始' | | end-date-text | 结束日期文字 | string | '结束' | | same-date-text | 选择同一天日期文字 | string | '开始/结束' | | show-lunar | 是否显示农历信息 | boolean | false | ### DateStripEmits | 事件 | 描述 | 类型 | | ------------------ | ------------------------ | ------------------------------------------------------- | | update:model-value | 点击并选中任意日期时触发 | `(value: Date \| Date[] \| string \| string[]) => void` | | change | 点击并选中任意日期时触发 | `(value: Date \| Date[] \| string \| string[]) => void` | ### CalendarType ```ts type CalendarType = 'single' | 'multiple' | 'range' ``` ### CalendarDay 与 [Calendar 组件](./calendar#CalendarDay) 中的 `CalendarDay` 一致。 ## 主题定制 ### CSS 变量 <<< @comp/date-strip/variables.scss#variables