WU-UI

中文

English

中文

English

Appearance

Calendar 最全日历 ​

由于插件市场上提供的日历插件不是不能满足滑动需求，就是不能满足动态滑动计算需求等问题。

所以我们提供了目前插件市场上唯一支持动态滑动计算的日历插件，多滑动切换模式（纵、横、不滑动）、多日历类型(周、月日历)、多日期选择模式(日期单选、日期多选、日期范围选择)、多日历起始周几(周日、周一)、自定义主题颜色、自定义文案、农历显示，可以让您纵享丝滑的使用日历。

为了开发者更便捷的使用日历，我们已在旁边的演示手机内集成了日历动态代码复制功能，可以直接在上面进行任何操作然后点击标题即可复制目前操作下的日历代码(完全的动态代码，粘贴即可使用)。

平台兼容性 ​

App(vue)App(nvue)H5小程序VUE2VUE3
√√√√√√

基本使用(插入模式) ​

通过设置 insert 属性为 true，日历会直接显示在页面中，选择时会触发 change 事件

vue
<template>
	<view class="index">
		<wu-calendar :insert="true" @change="calendarChange"></wu-calendar>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarChange(e) {
				console.log(e);
			}
		}
	}
</script>
<template>
	<view class="index">
		<wu-calendar :insert="true" @change="calendarChange"></wu-calendar>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarChange(e) {
				console.log(e);
			}
		}
	}
</script>

弹窗模式 ​

通过设置 insert 属性为 false，并通过日历的 ref 触发 open 方法来使用弹窗模式下的日历，点击确定时会触发 confirm 事件

vue
<template>
	<view class="index">
		<wu-calendar ref="calendar" @confirm="calendarConfirm" :insert="false"></wu-calendar>
		<button @click="open">打开日历</button>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // 打开日历
            open() {
                this.$refs.calendar.open();
            }
		}
	}
</script>
<template>
	<view class="index">
		<wu-calendar ref="calendar" @confirm="calendarConfirm" :insert="false"></wu-calendar>
		<button @click="open">打开日历</button>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // 打开日历
            open() {
                this.$refs.calendar.open();
            }
		}
	}
</script>

滑动切换模式 ​

我们实现了动态的滑动切换计算过程，可以在您切换完成时，动态计算前后两个月份。

通过设置 slideSwitchMode 属性来指定滑动切换的模式，默认为 horizontal。

  • horizontal 横向滑动切换
  • vertical 纵向滑动切换
  • none 不使用滑动切换
vue
<wu-calendar slideSwitchMode="vertical"></wu-calendar>
<wu-calendar slideSwitchMode="vertical"></wu-calendar>

日历类型 ​

通过设置 type 属性来指定日历类型，默认为 month。

  • month 月日历
  • week 周日历

这两种日历类型都支持折叠效果, 也可以通过 fold 来指定是否支持折叠。

  • month 的 fold 默认为 false
  • week 的 fold 默认为 true
vue
<wu-calendar type="month" :fold="false"></wu-calendar>
<wu-calendar type="month" :fold="false"></wu-calendar>

日历以周几开始 ​

通过设置 startWeek 属性来指定日历以周几开始，默认为 sun。

  • sun 周日
  • mon 周一
vue
<wu-calendar type="month" :fold="true" startWeek="mon"></wu-calendar>
<wu-calendar type="month" :fold="true" startWeek="mon"></wu-calendar>

日期单选 ​

  • mode 属性为 single , 启用日期单选(默认即是日期单选)。
  • 此模式下默认值通过 date 来设置，格式为字符。
vue
<wu-calendar date="2024-05-06"></wu-calendar>
<wu-calendar date="2024-05-06"></wu-calendar>

日期多选 ​

  • 需要通过设置 mode 属性为 multiple, 来启用日期多选。
  • 此模式下默认值通过 date 来设置，格式为数组。
vue
<wu-calendar mode="multiple" :date="['2024-05-06', '2024-05-10', '2024-05-13']"></wu-calendar>
<wu-calendar mode="multiple" :date="['2024-05-06', '2024-05-10', '2024-05-13']"></wu-calendar>

日期范围选择 ​

  • 需要通过设置 mode 属性为 range, 来启用日期范围选择。
  • 此模式下默认值通过 date 来设置，格式为数组。
vue
<wu-calendar mode="range" :date="['2024-05-08', '2024-05-28']"></wu-calendar>
<wu-calendar mode="range" :date="['2024-05-08', '2024-05-28']"></wu-calendar>

默认日期 ​

useToday 默认为 true ，在不传入 date 时，会使用今天来作为默认日期。

mode 为不同模式时会有不同的效果.

  • single(单选) 模式会选中今天的日期
  • multiple(多选) 模式会将数组第一个变为今天的日期
  • range(范围选择) 模式会将开始日期变为今天的日期

如果不想使用默认日期可以将 useToday 设置为 false。

vue
<wu-calendar mode="single" :useToday="false"></wu-calendar>
<wu-calendar mode="single" :useToday="false"></wu-calendar>

设置日期可选范围 ​

可以通过 startDate 与 endDate 来设置日期可选范围。

  • startDate 开始日期
  • endDate 结束日期
vue
<wu-calendar startDate="2024-05-08" endDate="2024-06-08"></wu-calendar>
<wu-calendar startDate="2024-05-08" endDate="2024-06-08"></wu-calendar>

日期范围同一天 ​

需要通过设置 rangeSameDay 属性为 true , 来允许日期选择范围起始为同一天(需要开启日期范围选择)。

vue
<wu-calendar mode="range" :rangeSameDay="true"></wu-calendar>
<wu-calendar mode="range" :rangeSameDay="true"></wu-calendar>

选择范围内重选结束日期 ​

需要通过设置 rangeEndRepick 属性为 true , 来启用选择完成后点击选择范围的日期内来重选结束日期(需要开启日期范围选择)。

vue
<wu-calendar mode="range" :rangeEndRepick="true"></wu-calendar>
<wu-calendar mode="range" :rangeEndRepick="true"></wu-calendar>

选择范围内遇到打点禁用日期进行截断 ​

需要通过设置 rangeHaveDisableTruncation 属性为 true , 来启用选择范围内遇到打点禁用日期进行截断(需要开启日期范围选择)。

如果允许进行截断的话，会以第一个打点禁用日期的前一个日期作为选择范围的结束日期

vue
<wu-calendar mode="range" :rangeHaveDisableTruncation="true"></wu-calendar>
<wu-calendar mode="range" :rangeHaveDisableTruncation="true"></wu-calendar>

农历显示 ​

需要通过设置 lunar属性为 true, 来启用日历的农历显示。

vue
<wu-calendar :lunar="true"></wu-calendar>
<wu-calendar :lunar="true"></wu-calendar>

每月是否仅展示当月数据 ​

需要通过设置 monthShowCurrentMonth 属性为 true, 来启用每月仅展示当月数据。

vue
<wu-calendar :monthShowCurrentMonth="true"></wu-calendar>
<wu-calendar :monthShowCurrentMonth="true"></wu-calendar>

自定义主题颜色 ​

通过设置 color 属性来指定自定义主题颜色，会通过 wu-ui 的 Color API 自动生成自定义主题色的其余配色，让您可以随意设置主题色，且不会显得突兀。

vue
<wu-calendar color="#6ac695"></wu-calendar>
<wu-calendar color="#6ac695"></wu-calendar>

自定义文案 ​

通过 selected 属性来实现自定义日期

自定义日期全部属性

vue
<template>
	<view class="index">
		<wu-calendar 
            :selected="selected" 
            ref="calendar" 
            @confirm="calendarConfirm" 
            :insert="false"
        ></wu-calendar>
		<button @click="open">打开日历</button>
	</view>
</template>

<script>
	export default {
        data() {
            return {
                // 指定三个日期的自定义文案 昨天、后两天、后五天的自定义文案
                // 除了变量声明，函数 计算属性方式只要返回格式正确都可以使用自定义文案
				selected: [
                    {
                        date: '2024-05-07',
                        info: '￥850',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red',
                        disable: true // 禁用
                    },
                    {
                        date: '2024-05-10',
                        info: '￥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red'
                    },
                    {
                        date: '2024-05-13',
                        info: '￥900',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red' 
                    },
                ]
			}
        },
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // 打开日历
            open() {
                this.$refs.calendar.open();
            },
		}
	}
</script>
<template>
	<view class="index">
		<wu-calendar 
            :selected="selected" 
            ref="calendar" 
            @confirm="calendarConfirm" 
            :insert="false"
        ></wu-calendar>
		<button @click="open">打开日历</button>
	</view>
</template>

<script>
	export default {
        data() {
            return {
                // 指定三个日期的自定义文案 昨天、后两天、后五天的自定义文案
                // 除了变量声明，函数 计算属性方式只要返回格式正确都可以使用自定义文案
				selected: [
                    {
                        date: '2024-05-07',
                        info: '￥850',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red',
                        disable: true // 禁用
                    },
                    {
                        date: '2024-05-10',
                        info: '￥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red'
                    },
                    {
                        date: '2024-05-13',
                        info: '￥900',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red' 
                    },
                ]
			}
        },
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // 打开日历
            open() {
                this.$refs.calendar.open();
            },
		}
	}
</script>

API ​

Selected Options ​

自定义日期内容属性，可以设置多个日期，类型为 Array[Object]。

属性名说明类型默认值可选值
date日期，格式: YYYY-mm-ddString--
info下方文案String--
infoColor下方文案颜色String#e43d33-
topInfo上方文案String--
topInfoColor上方文案颜色String#e43d33-
badge是否显示圆点Booleanfalsetrue / false
badgeColor 1.4.5圆点颜色String#e43d33-
badgeSize 1.3.0圆点大小String16rpx-
badgePosition圆点显示的位置Stringtop-righttop-left / top-center / top-right / bottom-left / bottom-center / bottom-right
disable是否禁用Booleanfalsetrue / false

Calendar Props ​

属性名说明类型默认值可选值
date自定义默认选中时间，默认为今天，mode="multiple"或"range"时，该值需为数组，mode="single"，该值为字符串String今天的日期-
mode日期选择类型Stringsinglesingle-单日期 / multiple-多日期 / range-日期范围选择
type 1.3.0日历类型Stringmonthmonth-月日历 / week-周日历
fold 1.3.0是否支持折叠Booleanmonth: true, week: falsetrue / false
startWeek 1.3.0日历以周几开始Stringsunsun-周日 / mon-周一
maskClick是否点击遮罩层关闭Booleanfalsetrue / false
useToday是否使用默认日期(今天)Booleantruetrue / false
lunar是否显示农历日期Booleanfalsetrue / false
monthShowCurrentMonth每月是否仅显示当月数据Booleanfalsetrue / false
rangeSameDay日期选择范围起始为同一天Booleanfalsetrue / false
rangeEndRepick选择完成后点击选择范围的日期内来重选结束日期Booleanfalsetrue / false
rangeHaveDisableTruncation 1.3.1日期选择范围内遇到打点禁用日期进行截断Booleanfalsetrue / false
startDate日期范围选择-开始日期String--
endDate日期范围选择-结束日期String--
insert插入模式，true: 插入模式; false: 弹窗模式Booleantruetrue / false
slideSwitchMode滑动切换模式Stringhorizontalhorizontal/ vertical / none
showMonth是否显示月份为背景Booleantruetrue / false
clearDate弹窗模式是否清空上次选择内容Booleantruetrue / false
disabledChoice是否禁止点击日历Booleanfalsetrue / false
selected打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]Array[Object]-查看自定义文案示例，Selected Options参数详情
color自定义主题色String#3c9cff-
itemHeight 1.3.7日历中每项日期的高度,单位pxNumber64-
cancelColor取消文字的颜色String#333333-
confirmColor确定文字的颜色String#333333-
startTextmode=range时，第一个日期底部的提示文字String开始-
endTextmode=range时，最后一个日期底部的提示文字String结束-
actBadgeColor 1.4.6当通过 selected 属性设置某个日期 badgeColor后，如果该日期被选择且主题色与 badgeColor 一致时，徽标会显示本颜色String#fff-
operationPosition 1.4.7弹窗日历取消和确认按钮的显示位置Stringtop / bottomtop

Calendar Methods ​

方法名说明
openinsert 为 false 时，调用此方法弹出日历组件
closeinsert 为 false 时，调用此方法关闭日历组件
reset 1.4.5重置日历数据

Calendar Events ​

事件名说明返回参数
close点击日历弹窗遮罩层触发关闭时触发-
cancel 1.4.5insert 为 false 时，点击取消按钮时触发-
confirminsert 为 false 时，点击确认按钮时触发返回日期相关参数
changeinsert 为 true 时，选择日期时触发返回日期相关参数
monthSwitch切换月份时触发{year, month}
foldSwitch 1.3.0切换折叠状态时触发{type, status}

Calendar Slots ​

插槽名说明
header日历头部自定义插槽
operation弹窗日历取消和确认按钮插槽

v-slot:header ​

值名称说明
nowDate目前所在月份时间数据