uView Next
4.0.105

外观

DateStrip 日期横条

约 1437 字大约 5 分钟

2025-10-31

日期横条组件，用于展示周日历或一组日历信息，支持多种展示模式和自定义样式。

使用场景

  • 在应用中展示日期选择器，如日历、日程安排等
  • 需要横向展示一周或多天日期信息
  • 支持日期范围限制和禁用特定日期
  • 可显示农历信息

平台差异说明

App（vue）App（nvue）H5小程序
√X√√

基本使用

通过 v-model 绑定选中的日期时间戳，组件会自动高亮当前选中的日期。

<template>
  <view>
    <u-date-strip v-model="selectedDate" @change="onChange" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date().getTime()
    };
  },
  methods: {
    onChange(timestamp) {
      console.log('选中日期:', new Date(timestamp));
    }
  }
};
</script>

切换模式

组件支持两种切换模式：

周模式（默认）

按周方式切换，使用 swiper 组件实现左右滑动切换。

<u-date-strip v-model="selectedDate" mode="week" />

平铺模式

平铺展示所有日期，不展示切换按钮，使用 scroll-view 实现横向滚动。

<u-date-strip v-model="selectedDate" mode="none" />

高亮模式

通过 activeMode 属性设置不同的高亮模式：

同时高亮（默认）

同时高亮星期和日期背景。

<u-date-strip v-model="selectedDate" active-mode="both" />

只高亮日期

只高亮日期部分的背景。

<u-date-strip v-model="selectedDate" active-mode="date" />

只高亮文本

只高亮文本颜色，不改变背景。

<u-date-strip v-model="selectedDate" active-mode="text" />

自定义样式

可以通过多个属性自定义组件的外观：

<u-date-strip 
  v-model="selectedDate"
  height="80px"
  item-width="45px"
  item-round="100px"
  bg-color="#f5f5f5"
  active-bg-color="#ff6b35"
  active-color="#fff"
  round="10px"
/>

日期范围限制

通过 minDate 和 maxDate 属性限制可选择的日期范围：

<template>
  <view>
    <u-date-strip 
      v-model="selectedDate"
      :min-date="minDate"
      :max-date="maxDate"
      mode="none"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date().getTime(),
      minDate: new Date(2025, 6, 10).getTime(),
      maxDate: new Date(2025, 7, 27).getTime()
    };
  }
};
</script>

禁用特定日期

通过 disabledDate 属性禁用特定日期，支持字符串数组或单个字符串：

<template>
  <view>
    <!-- 禁用单个日期 -->
    <u-date-strip :disabled-date="'2025-01-01'" />
    
    <!-- 禁用多个日期 -->
    <u-date-strip :disabled-date="['2025-01-01', '2025-02-14', '2025-05-01']" />
    
    <!-- 使用时间戳 -->
    <u-date-strip :disabled-date="[1640995200000, 1707868800000]" />
  </view>
</template>

禁用函数

通过 disabledFun 属性使用函数动态判断日期是否禁用，支持返回布尔值或数组：

<template>
  <view>
    <u-date-strip 
      v-model="selectedDate"
      :disabled-fun="disabledFun"
      mode="none"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date().getTime()
    };
  },
  methods: {
    // 方式一：返回布尔值
    disabledFun(day) {
      // 禁用所有星期二
      if (day.weekday === '二') {
        return true;
      }
      // 禁用所有周末
      if (day.weekday === '六' || day.weekday === '日') {
        return true;
      }
      // 禁用特定日期
      if (day.date === 15) {
        return true;
      }
      return false;
    }
  }
};
</script>

返回数组方式

disabledFun 也可以返回一个数组，第一个元素为是否禁用，第二个元素为自定义显示文本：

<template>
  <view>
    <u-date-strip 
      v-model="selectedDate"
      :disabled-fun="disabledFunWithText"
      mode="none"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date().getTime()
    };
  },
  methods: {
    // 方式二：返回数组 [是否禁用, 自定义文本]
    disabledFunWithText(day) {
      // 禁用星期二并显示自定义文本
      if (day.weekday === '二') {
        return [true, '休息日'];
      }
      // 禁用周末并显示自定义文本
      if (day.weekday === '六' || day.weekday === '日') {
        return [true, '周末'];
      }
      // 禁用特定日期
      if (day.date === 1) {
        return [true, '节假日'];
      }
      return false;
    }
  }
};
</script>

显示农历

通过 showLunar 属性显示农历信息：

<u-date-strip 
  v-model="selectedDate"
  :show-lunar="true"
  height="70px"
/>

数字补0显示

通过 padZero 属性控制小于10的数字是否补0显示：

<template>
  <view>
    <!-- 默认显示（不补0） -->
    <u-date-strip v-model="selectedDate" />
    
    <!-- 补0显示 -->
    <u-date-strip 
      v-model="selectedDate"
      :pad-zero="true"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date().getTime()
    };
  }
};
</script>

效果对比：

  • 不补0：1, 2, 3, ..., 9, 10, 11, 12, ..., 31
  • 补0：01, 02, 03, ..., 09, 10, 11, 12, ..., 31

自定义格式化

通过 formatter 属性自定义日期数据的格式化：

<template>
  <view>
    <u-date-strip 
      v-model="selectedDate"
      :formatter="customFormatter"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date().getTime()
    };
  },
  methods: {
    customFormatter(day) {
      // 自定义日期数据
      if (day.date === 1) {
        day.weekday = '初一';
      }
      return day;
    }
  }
};
</script>

页面源码地址

页面源码地址


 github  gitee

API

Props

参数说明类型默认值
v-model/modelValue选中的日期时间戳Number-
defaultDate默认选中的日期时间戳Number-
mode切换模式
Enum
week
activeMode高亮模式
Enum
both
minDate可选择的最小日期时间戳Number-
maxDate可选择的最大日期时间戳Number-
height组件高度String86px
itemWidth每格日期宽度String50px
itemRound每格日期圆角String6px
activeBgColor选中框背景色String-
activeColor选中框文本色String-
activeStyle选中框样式Object-
bgColor横条背景色String-
round选中框圆角String-
firstDayOfWeek第一天从星期几开始Number0
monthNum最多展示月份数量Number | String3
disabledDate禁止选择的日期Array | String-
disabledFun一个用来判断该日期是否被禁用的函数，接受一个 day 对象作为参数。应该返回一个 Boolean 值或数组 [Boolean, String]。返回数组时，第一个元素为是否禁用，第二个元素为自定义显示文本Function-
disabledColor禁用日期的文字颜色String-
showLunar是否显示农历Booleanfalse
padZero是否对小于10的数字补0Booleanfalse
formatter日期格式化函数Function-

Events

事件名说明回调参数
change点击日期时触发timestamp: 选中的时间戳

Methods

方法名说明参数
setFormatter设置格式化函数formatter: Function

Copyright © 2026 uView Next