Skip to content

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>

日期单选

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

日期多选

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

日期范围选择

  • 需要通过设置 mode 属性为 range, 来启用日期范围选择。
  • 此模式下默认值通过 date 来设置,格式为数组。
vue
<wu-calendar mode="range" :date="['2023-09-23', '2023-10-13']"></wu-calendar>
<wu-calendar mode="range" :date="['2023-09-23', '2023-10-13']"></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>

日期范围同一天

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

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

选择范围内重选结束日期

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

vue
<wu-calendar mode="range" :rangeEndRepick="true"></wu-calendar>
<wu-calendar mode="range" :rangeEndRepick="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-uiColor API 自动生成自定义主题色的其余配色,让您可以随意设置主题色,且不会显得突兀。

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

自定义文案

通过 selected 属性来指定自定义文案。

Selected Options参数

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: '2023-09-25',
                        info: '¥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                    },
                    {
                        date: '2023-09-28',
                        info: '¥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                    },
                ]
			}
        },
		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: '2023-09-25',
                        info: '¥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                    },
                    {
                        date: '2023-09-28',
                        info: '¥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                    },
                ]
			}
        },
		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
badgePosition圆点显示的位置Stringtop-righttop-left / top-right / bottom-left /bottom-right
disable是否禁用Booleanfalsetrue / false

Calendar Props

属性名说明类型默认值可选值
date自定义默认选中时间,默认为今天,mode="multiple"或"range"时,该值需为数组,mode="single",该值为字符串String今天的日期-
mode日期选择类型Stringsinglesingle-单日期 / multiple-多日期 / range-日期范围选择
useToday是否使用默认日期(今天)Booleantruetrue / false
lunar是否显示农历日期Booleanfalsetrue / false
monthShowCurrentMonth每月是否仅显示当月数据Booleanfalsetrue / false
rangeSameDay日期选择范围起始为同一天Booleanfalsetrue / false
rangeEndRepick选择完成后点击选择范围的日期内来重选结束日期Booleanfalsetrue / false
startDate日期范围选择-开始日期String--
endDate日期范围选择-结束日期String--
insert插入模式,true: 插入模式; false: 弹窗模式Booleantruetrue / false
slideSwitchMode滑动切换模式Stringhorizontalhorizonta l/ vertical / none
showMonth是否显示月份为背景Booleantruetrue / false
clearDate弹窗模式是否清空上次选择内容Booleantruetrue / false
selected打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]Array[Object]-查看自定义文案示例Selected Options参数详情
color自定义主题色String#3c9cff-
cancelColor取消文字的颜色String#333333-
confirmColor确定文字的颜色String#333333-
startTextmode=range时,第一个日期底部的提示文字String开始-
endTextmode=range时,最后一个日期底部的提示文字String结束-

Calendar Methods

方法名说明
openinsertfalse 时,调用此方法弹出日历组件

Calendar Events

事件名说明返回参数
close关闭日历弹窗时触发-
confirminsertfalse 时,点击确认按钮时触发返回日期相关参数
changeinserttrue 时,选择日期时触发返回日期相关参数
monthSwitch切换月份时触发{year, month}