Sard Uniapp

Appearance

在新窗口打开⤴

DateStrip日期横条1.29+

介绍 ​

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

引入 ​

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最多可选天数，用于多选和范围numberNumber.MAX_SAFE_INTEGER
over-max-days超出最多可选天数时触发() => void-
formatter通过修改 CalendarDay 对象属性值，自定义日期文案和样式(day: CalendarDay) => void-
allow-same-day范围选择中，是否允许起始和结束为同一天booleanfalse
value-format绑定值的格式，不指定则绑定值为 Date 对象string 详见特殊符号-
start-date-text开始日期文字string'开始'
end-date-text结束日期文字string'结束'
same-date-text选择同一天日期文字string'开始/结束'
show-lunar是否显示农历信息booleanfalse

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);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao