DateStrip 日期横条 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# DateStrip 日期横条新

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

# 使用场景

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

# 平台差异说明

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>
✅ Copy success!

# 切换模式

组件支持两种切换模式：

# 周模式（默认）

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

<u-date-strip v-model="selectedDate" mode="week" />
✅ Copy success!

# 平铺模式

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

<u-date-strip v-model="selectedDate" mode="none" />
✅ Copy success!

# 高亮模式

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

# 同时高亮（默认）

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

<u-date-strip v-model="selectedDate" active-mode="both" />
✅ Copy success!

# 只高亮日期

只高亮日期部分的背景。

<u-date-strip v-model="selectedDate" active-mode="date" />
✅ Copy success!

# 只高亮文本

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

<u-date-strip v-model="selectedDate" active-mode="text" />
✅ Copy success!

# 自定义样式

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

<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"
/>
✅ Copy success!

# 日期范围限制

通过 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>
✅ Copy success!

# 禁用特定日期

通过 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>
✅ Copy success!

# 禁用函数

通过 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>
✅ Copy success!

# 返回数组方式

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>
✅ Copy success!

# 显示农历

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

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

# 数字补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>
✅ Copy success!

效果对比：

不补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>
✅ Copy success!

# 页面源码地址

页面源码地址

github

gitee

# API

# Props

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

# Events

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

# Methods

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

← Sidebar 侧边栏 Barcode 条形码 →