介绍
以横条的方式展示范围内的日期,可以进行单选、多选、范围选择等操作。
引入
js
import DateStrip from 'sard-uniapp/components/date-strip/date-strip.vue'代码演示
基础用法
使用 v-model 绑定当前值。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip v-model="value" @change="onChange" />
</sar-list-item>
<sar-list-item
title="当前值:"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
<sar-list-item title="设置为今天" arrow hover @click="value = new Date()" />
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const value = ref<Date | undefined>(new Date())
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip v-model="value" @change="onChange" />
</sar-list-item>
<sar-list-item
title="当前值:"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
<sar-list-item title="设置为今天" arrow hover @click="value = new Date()" />
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(/* @__PURE__ */ new Date());
const onChange = (value2) => {
console.log("change", value2);
};
</script>类型
日期横条可以选择单个值、多个值以及进行范围选择。
vue
<template>
<sar-list card title="单选">
<sar-list-item>
<sar-date-strip v-model="singleValue" />
</sar-list-item>
<sar-list-item
title="当前值"
:value="singleValue ? formatDate(singleValue, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
<sar-list card title="多选">
<sar-list-item>
<sar-date-strip v-model="multipleValue" type="multiple" />
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(multipleValue)" />
</sar-list>
<sar-list card title="范围选择">
<sar-list-item>
<sar-date-strip v-model="rangeValue" type="range" />
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(rangeValue)" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const singleValue = ref<Date | undefined>(new Date())
const multipleValue = ref<Date[]>([new Date()])
const rangeValue = ref<Date[]>([])
const formatValues = (value: Date[]) => {
return JSON.stringify(value.map((item) => formatDate(item, 'YYYY-MM-DD')))
}
</script>vue
<template>
<sar-list card title="单选">
<sar-list-item>
<sar-date-strip v-model="singleValue" />
</sar-list-item>
<sar-list-item
title="当前值"
:value="singleValue ? formatDate(singleValue, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
<sar-list card title="多选">
<sar-list-item>
<sar-date-strip v-model="multipleValue" type="multiple" />
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(multipleValue)" />
</sar-list>
<sar-list card title="范围选择">
<sar-list-item>
<sar-date-strip v-model="rangeValue" type="range" />
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(rangeValue)" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
import { formatDate } from "sard-uniapp";
const singleValue = ref(/* @__PURE__ */ new Date());
const multipleValue = ref([/* @__PURE__ */ new Date()]);
const rangeValue = ref([]);
const formatValues = (value) => {
return JSON.stringify(value.map((item) => formatDate(item, "YYYY-MM-DD")));
};
</script>自定义日期范围
可以使用 min 和 max 属性限制可以选择的日期范围。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 0, 5)"
:max="new Date(2024, 0, 19)"
/>
</sar-list-item>
<sar-list-item title="可选范围" value="2024-01-05 至 2024-01-19" />
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const value = ref(new Date(2024, 0, 10))
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 0, 5)"
:max="new Date(2024, 0, 19)"
/>
</sar-list-item>
<sar-list-item title="可选范围" value="2024-01-05 至 2024-01-19" />
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(new Date(2024, 0, 10));
</script>最多选择天数
在多个值和范围选择中,使用 maxDays 属性可以限制最多可选的天数。超出允许选择的天数后会调用 overMaxDays 属性配置的函数。
vue
<template>
<sar-list card title="多选(最多3天)">
<sar-list-item>
<sar-date-strip
v-model="multipleValue"
type="multiple"
:min="new Date(2024, 0, 1)"
:max="new Date(2024, 0, 15)"
:max-days="3"
:over-max-days="onOverMaxDays"
/>
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(multipleValue)" />
</sar-list>
<sar-list card title="范围(最多5天)">
<sar-list-item>
<sar-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"
/>
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(rangeValue)" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const multipleValue = ref<Date[]>([])
const rangeValue = ref<Date[]>([])
const formatValues = (value: Date[]) => {
return JSON.stringify(value.map((item) => formatDate(item, 'YYYY-MM-DD')))
}
const onOverMaxDays = () => {
uni.showToast({
title: '已超过最大可选天数',
icon: 'none',
})
}
</script>vue
<template>
<sar-list card title="多选(最多3天)">
<sar-list-item>
<sar-date-strip
v-model="multipleValue"
type="multiple"
:min="new Date(2024, 0, 1)"
:max="new Date(2024, 0, 15)"
:max-days="3"
:over-max-days="onOverMaxDays"
/>
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(multipleValue)" />
</sar-list>
<sar-list card title="范围(最多5天)">
<sar-list-item>
<sar-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"
/>
</sar-list-item>
<sar-list-item title="当前值" :value="formatValues(rangeValue)" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
import { formatDate } from "sard-uniapp";
const multipleValue = ref([]);
const rangeValue = ref([]);
const formatValues = (value) => {
return JSON.stringify(value.map((item) => formatDate(item, "YYYY-MM-DD")));
};
const onOverMaxDays = () => {
uni.showToast({
title: "\u5DF2\u8D85\u8FC7\u6700\u5927\u53EF\u9009\u5929\u6570",
icon: "none"
});
};
</script>禁用日期
disabledDate 属性配置的函数接收一个日期对象,如果此函数返回真则禁用这个日期。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 0, 1)"
:max="new Date(2024, 0, 15)"
:disabled-date="disabledDate"
/>
</sar-list-item>
<sar-list-item title="说明" value="仅开放工作日" />
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const value = ref<Date>()
const disabledDate = (date: Date) => {
return [0, 6].includes(date.getDay())
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 0, 1)"
:max="new Date(2024, 0, 15)"
:disabled-date="disabledDate"
/>
</sar-list-item>
<sar-list-item title="说明" value="仅开放工作日" />
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref();
const disabledDate = (date) => {
return [0, 6].includes(date.getDay());
};
</script>过滤日期
filter 属性配置的函数可以过滤要展示的日期。
<<< @demo/date-strip/demo/Filter.vue
格式化日期
formatter 属性可以配置一个接收 CalendarDay 类型对象的函数,通过此对象可以自定义当前日期展示的内容和样式。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 0, 1)"
:max="new Date(2024, 0, 15)"
:formatter="formatter"
/>
</sar-list-item>
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate, type CalendarDay } from 'sard-uniapp'
const value = ref(new Date(2024, 0, 6))
const formatter = (day: CalendarDay) => {
if ([0, 6].includes(day.date.getDay())) {
day.bottom = '休'
day.style =
day.type === 'selected'
? null
: {
backgroundColor: 'rgba(var(--sar-orange-rgb), 0.08)',
color: 'var(--sar-warning)',
borderColor: 'rgba(var(--sar-orange-rgb), 0.2)',
}
}
if (day.date.getDate() === 8) {
day.top = '今天'
day.bottom = '出发'
}
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 0, 1)"
:max="new Date(2024, 0, 15)"
:formatter="formatter"
/>
</sar-list-item>
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(new Date(2024, 0, 6));
const formatter = (day) => {
if ([0, 6].includes(day.date.getDay())) {
day.bottom = "\u4F11";
day.style = day.type === "selected" ? null : {
backgroundColor: "rgba(var(--sar-orange-rgb), 0.08)",
color: "var(--sar-warning)",
borderColor: "rgba(var(--sar-orange-rgb), 0.2)"
};
}
if (day.date.getDate() === 8) {
day.top = "\u4ECA\u5929";
day.bottom = "\u51FA\u53D1";
}
};
</script>展示农历
可以设置 show-lunar 属性显示农历信息。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 1, 8)"
:max="new Date(2024, 1, 16)"
show-lunar
/>
</sar-list-item>
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const value = ref(new Date(2024, 1, 10))
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
:min="new Date(2024, 1, 8)"
:max="new Date(2024, 1, 16)"
show-lunar
/>
</sar-list-item>
<sar-list-item
title="当前值"
:value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(new Date(2024, 1, 10));
</script>自定义样式
可以设置 css 变量来改变默认样式。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
style="
--sar-date-strip-column-gap: 0px;
--sar-date-strip-item-border-radius: 0px;
--sar-date-strip-item-selected-bg: var(--sar-warning);
--sar-date-strip-item-today-color: var(--sar-warning);
--sar-date-strip-item-middle-bg: rgba(var(--sar-warning-rgb), 0.15);
--sar-date-strip-item-week-order: 3;
background: var(--sar-body-bg);
"
@change="onChange"
/>
</sar-list-item>
<sar-list-item title="当前值" :value="formatDate(value, 'YYYY-MM-DD')" />
</sar-list>
</template>
<script setup lang="ts">
import { formatDate } from 'sard-uniapp'
import { ref } from 'vue'
const value = ref<Date>(new Date())
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-date-strip
v-model="value"
style="
--sar-date-strip-column-gap: 0px;
--sar-date-strip-item-border-radius: 0px;
--sar-date-strip-item-selected-bg: var(--sar-warning);
--sar-date-strip-item-today-color: var(--sar-warning);
--sar-date-strip-item-middle-bg: rgba(var(--sar-warning-rgb), 0.15);
--sar-date-strip-item-week-order: 3;
background: var(--sar-body-bg);
"
@change="onChange"
/>
</sar-list-item>
<sar-list-item title="当前值" :value="formatDate(value, 'YYYY-MM-DD')" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(/* @__PURE__ */ new Date());
const onChange = (value2) => {
console.log("change", value2);
};
</script>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 详见特殊符号 | - |
| 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 组件 中的 CalendarDay 一致。
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-date-strip-column-gap: 16rpx;
--sar-date-strip-item-width: 128rpx;
--sar-date-strip-item-padding-y: 18rpx;
--sar-date-strip-item-padding-x: 12rpx;
--sar-date-strip-item-border-radius: var(--sar-rounded);
--sar-date-strip-item-border-color: transparent;
--sar-date-strip-item-bg: transparent;
--sar-date-strip-item-week-font-size: var(--sar-text-sm);
--sar-date-strip-item-week-color: var(--sar-secondary-color);
--sar-date-strip-item-week-order: 1;
--sar-date-strip-item-day-font-size: var(--sar-text-base);
--sar-date-strip-item-day-color: inherit;
--sar-date-strip-item-day-order: 2;
--sar-date-strip-item-info-font-size: var(--sar-text-xs);
--sar-date-strip-item-info-color: var(--sar-tertiary-color);
--sar-date-strip-item-info-order: 3;
--sar-date-strip-item-selected-color: var(--sar-white);
--sar-date-strip-item-selected-bg: var(--sar-primary);
--sar-date-strip-item-middle-bg: rgba(var(--sar-blue-rgb), 0.1);
--sar-date-strip-item-today-color: var(--sar-primary);
}