DateStrip | Sard

介绍

以横条的方式展示范围内的日期，可以进行单选、多选、范围选择等操作。

代码演示

基础用法

使用 v-model 绑定当前值。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip v-model="value" @change="onChange" />
    </s-list-item>
    <s-list-item title="当前值：" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
    <s-list-item title="设置为今天" arrow hover @click="value = new Date()" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard'

const value = ref<Date | undefined>(new Date())

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip v-model="value" @change="onChange" />
    </s-list-item>
    <s-list-item title="当前值：" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
    <s-list-item title="设置为今天" arrow hover @click="value = new Date()" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const value = ref(new Date())
const onChange = (value) => {
  console.log('change', value)
}
</script>

类型

日期横条可以选择单个值、多个值以及进行范围选择。

vue tsvue js

vue

<template>
  <s-list card title="单选">
    <s-list-item>
      <s-date-strip v-model="singleValue" />
    </s-list-item>
    <s-list-item
      title="当前值"
      :value="singleValue ? formatDate(singleValue, 'YYYY-MM-DD') : 'undefined'"
    />
  </s-list>

  <s-list card title="多选">
    <s-list-item>
      <s-date-strip v-model="multipleValue" type="multiple" />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(multipleValue)" />
  </s-list>

  <s-list card title="范围选择">
    <s-list-item>
      <s-date-strip v-model="rangeValue" type="range" />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(rangeValue)" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard'

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>
  <s-list card title="单选">
    <s-list-item>
      <s-date-strip v-model="singleValue" />
    </s-list-item>
    <s-list-item
      title="当前值"
      :value="singleValue ? formatDate(singleValue, 'YYYY-MM-DD') : 'undefined'"
    />
  </s-list>

  <s-list card title="多选">
    <s-list-item>
      <s-date-strip v-model="multipleValue" type="multiple" />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(multipleValue)" />
  </s-list>

  <s-list card title="范围选择">
    <s-list-item>
      <s-date-strip v-model="rangeValue" type="range" />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(rangeValue)" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const singleValue = ref(new Date())
const multipleValue = ref([new Date()])
const rangeValue = ref([])
const formatValues = (value) => {
  return JSON.stringify(value.map((item) => formatDate(item, 'YYYY-MM-DD')))
}
</script>

自定义日期范围

可以使用 min 和 max 属性限制可以选择的日期范围。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip v-model="value" :min="new Date(2024, 0, 5)" :max="new Date(2024, 0, 19)" />
    </s-list-item>
    <s-list-item title="可选范围" value="2024-01-05 至 2024-01-19" />
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard'

const value = ref(new Date(2024, 0, 10))
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip v-model="value" :min="new Date(2024, 0, 5)" :max="new Date(2024, 0, 19)" />
    </s-list-item>
    <s-list-item title="可选范围" value="2024-01-05 至 2024-01-19" />
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const value = ref(new Date(2024, 0, 10))
</script>

最多选择天数

在多个值和范围选择中，使用 maxDays 属性可以限制最多可选的天数。超出允许选择的天数后会调用 overMaxDays 属性配置的函数。

vue tsvue js

vue

<template>
  <s-list card title="多选（最多3天）">
    <s-list-item>
      <s-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"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(multipleValue)" />
  </s-list>

  <s-list card title="范围（最多5天）">
    <s-list-item>
      <s-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"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(rangeValue)" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate, toast } from 'sard'

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 = () => {
  toast('已超过最大可选天数')
}
</script>

vue

<template>
  <s-list card title="多选（最多3天）">
    <s-list-item>
      <s-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"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(multipleValue)" />
  </s-list>

  <s-list card title="范围（最多5天）">
    <s-list-item>
      <s-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"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="formatValues(rangeValue)" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate, toast } from 'sard'
const multipleValue = ref([])
const rangeValue = ref([])
const formatValues = (value) => {
  return JSON.stringify(value.map((item) => formatDate(item, 'YYYY-MM-DD')))
}
const onOverMaxDays = () => {
  toast('已超过最大可选天数')
}
</script>

禁用日期

disabledDate 属性配置的函数接收一个日期对象，如果此函数返回真则禁用这个日期。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 0, 1)"
        :max="new Date(2024, 0, 15)"
        :disabled-date="disabledDate"
      />
    </s-list-item>
    <s-list-item title="说明" value="仅开放工作日" />
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard'

const value = ref<Date>()

const disabledDate = (date: Date) => {
  return [0, 6].includes(date.getDay())
}
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 0, 1)"
        :max="new Date(2024, 0, 15)"
        :disabled-date="disabledDate"
      />
    </s-list-item>
    <s-list-item title="说明" value="仅开放工作日" />
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const value = ref()
const disabledDate = (date) => {
  return [0, 6].includes(date.getDay())
}
</script>

过滤日期

filter 属性配置的函数可以过滤要展示的日期。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 0, 1)"
        :max="new Date(2024, 0, 15)"
        :filter="filterDate"
      />
    </s-list-item>
    <s-list-item title="说明" value="仅开放工作日" />
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard'

const value = ref<Date>()

const filterDate = (date: Date) => {
  const day = date.getDay()
  return day > 0 && day < 6
}
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 0, 1)"
        :max="new Date(2024, 0, 15)"
        :filter="filterDate"
      />
    </s-list-item>
    <s-list-item title="说明" value="仅开放工作日" />
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const value = ref()
const filterDate = (date) => {
  const day = date.getDay()
  return day > 0 && day < 6
}
</script>

格式化日期

formatter 属性可以配置一个接收 CalendarDay 类型对象的函数，通过此对象可以自定义当前日期展示的内容和样式。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 0, 1)"
        :max="new Date(2024, 0, 15)"
        :formatter="formatter"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate, type CalendarDay } from 'sard'

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(--s-color-warning-rgb), 0.08)',
            color: 'var(--s-color-warning)',
            borderColor: 'rgba(var(--s-color-warning-rgb), 0.2)',
          }
  }

  if (day.date.getDate() === 8) {
    day.top = '今天'
    day.bottom = '出发'
  }
}
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 0, 1)"
        :max="new Date(2024, 0, 15)"
        :formatter="formatter"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const value = ref(new Date(2024, 0, 6))
const formatter = (day) => {
  if ([0, 6].includes(day.date.getDay())) {
    day.bottom = '休'
    day.style =
      day.type === 'selected'
        ? null
        : {
            backgroundColor: 'rgba(var(--s-color-warning-rgb), 0.08)',
            color: 'var(--s-color-warning)',
            borderColor: 'rgba(var(--s-color-warning-rgb), 0.2)',
          }
  }
  if (day.date.getDate() === 8) {
    day.top = '今天'
    day.bottom = '出发'
  }
}
</script>

展示农历

可以设置 show-lunar 属性显示农历信息。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 1, 8)"
        :max="new Date(2024, 1, 16)"
        show-lunar
      />
    </s-list-item>
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard'

const value = ref(new Date(2024, 1, 10))
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        :min="new Date(2024, 1, 8)"
        :max="new Date(2024, 1, 16)"
        show-lunar
      />
    </s-list-item>
    <s-list-item title="当前值" :value="value ? formatDate(value, 'YYYY-MM-DD') : 'undefined'" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { formatDate } from 'sard'
const value = ref(new Date(2024, 1, 10))
</script>

自定义样式

可以设置 css 变量来改变默认样式。

vue tsvue js

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        style="
          --s-date-strip-column-gap: 0px;
          --s-date-strip-item-border-radius: 0px;
          --s-date-strip-item-bg-selected: var(--s-color-warning);
          --s-date-strip-item-color-today: var(--s-color-warning);
          --s-date-strip-item-bg-middle: rgba(var(--s-color-warning-rgb), 0.15);
          --s-date-strip-item-week-order: 3;
          background: var(--s-fill-color-tertiary);
        "
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="formatDate(value, 'YYYY-MM-DD')" />
  </s-list>
</template>

<script setup lang="ts">
import { formatDate } from 'sard'
import { ref } from 'vue'

const value = ref<Date>(new Date())

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue

<template>
  <s-list card>
    <s-list-item>
      <s-date-strip
        v-model="value"
        style="
          --s-date-strip-column-gap: 0px;
          --s-date-strip-item-border-radius: 0px;
          --s-date-strip-item-bg-selected: var(--s-color-warning);
          --s-date-strip-item-color-today: var(--s-color-warning);
          --s-date-strip-item-bg-middle: rgba(var(--s-color-warning-rgb), 0.15);
          --s-date-strip-item-week-order: 3;
          background: var(--s-fill-color-tertiary);
        "
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值" :value="formatDate(value, 'YYYY-MM-DD')" />
  </s-list>
</template>

<script setup lang="js">
import { formatDate } from 'sard'
import { ref } from 'vue'
const value = ref(new Date())
const onChange = (value) => {
  console.log('change', value)
}
</script>

API

DateStripProps

属性	描述	类型	默认值
type	日期横条类型	CalendarType	'single'
model-value	选中的日期，单选时为单个日期，多选和范围时为日期数组	Date \| Date[] \| string \| string[]	-
min	可选择的最小日期	Date	前七天
max	可选择的最大日期	Date	后七天
current-date	当前日期	Date	new 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:modelValue	点击并选中任意日期时触发	`(value: Date \| Date[] \| string \| string[]) => void`
change	点击并选中任意日期时触发	`(value: Date \| Date[] \| string \| string[]) => void`

CalendarType

type CalendarType = 'single' | 'multiple' | 'range'

CalendarDay

与 Calendar 组件中的 CalendarDay 一致。

主题定制

样式变量

CSS 变量	值
`--s-date-strip-column-gap`	`8px`
`--s-date-strip-item-width`	`64px`
`--s-date-strip-item-padding-y`	`9px`
`--s-date-strip-item-padding-x`	`6px`
`--s-date-strip-item-border-radius`	`var(--s-border-radius)`
`--s-date-strip-item-border-color`	`transparent`
`--s-date-strip-item-bg`	`transparent`
`--s-date-strip-item-week-font-size`	`var(--s-font-size-sm)`
`--s-date-strip-item-week-color`	`var(--s-text-color-secondary)`
`--s-date-strip-item-week-order`	`1`
`--s-date-strip-item-day-font-size`	`var(--s-font-size)`
`--s-date-strip-item-day-color`	`inherit`
`--s-date-strip-item-day-order`	`2`
`--s-date-strip-item-info-font-size`	`var(--s-font-size-xs)`
`--s-date-strip-item-info-color`	`var(--s-text-color-tertiary)`
`--s-date-strip-item-info-order`	`3`
`--s-date-strip-item-color-selected`	`var(--s-white)`
`--s-date-strip-item-bg-selected`	`var(--s-color-primary)`
`--s-date-strip-item-bg-middle`	`rgba(var(--s-color-primary-rgb), 0.1)`
`--s-date-strip-item-color-today`	`var(--s-color-primary)`

介绍 ​

代码演示 ​

基础用法 ​

类型 ​

自定义日期范围 ​

最多选择天数 ​

禁用日期 ​

过滤日期 ​

格式化日期 ​

展示农历 ​

自定义样式 ​

API ​

DateStripProps ​

DateStripEmits ​

CalendarType ​

CalendarDay ​

主题定制 ​

样式变量 ​

介绍

代码演示

基础用法

类型

自定义日期范围

最多选择天数

禁用日期

过滤日期

格式化日期

展示农历

自定义样式

API

DateStripProps

DateStripEmits

CalendarType

CalendarDay

主题定制

样式变量