此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。

注意： 此组件与Picker 选择器的日期选择模式有一定的重合之处，区别在于本组件为更专业的日期选择场景，能选择日期范围等。 另外Picker组件的日期模式可以配置更多的参数，如时、分、秒等，可以根据不同的使用场景进行选择。

#平台差异说明

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

#基本使用

• 通过show绑定一个布尔变量用于打开或收起日历弹窗。
• 通过mode参数指定选择日期模式，包含单选/多选/范围选择。

<template><view><u-calendar :show="show"></u-calendar><u-button @click="show = true">打开</u-button></view>
</template><script>export default {data() {return {show: false,}}}
</script>

copy

#日历模式

• mode为single只能选择单个日期
• mode为multiple可以选择多个日期
• mode为range可以选择日期范围

#单个日期模式

选择日期后，需要点击底部的确定按钮才能触发回调事件，回调参数为一个数组，有如下属性：

["2021-07-01"]

copy

示例代码：

<template><u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template><script>export default {data() {return {show: true,mode: 'single'}},methods: {confirm(e) {console.log(e);}}}
</script>

copy

#多个日期模式

选择日期后，需要点击底部的确定按钮才能触发回调事件，回调参数为一个数组，有如下属性：

 ["2021-07-27", "2021-07-29", "2021-07-30"]

copy

示例代码：

<template><u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template><script>export default {data() {return {show: true,mode: 'multiple'}},methods: {confirm(e) {console.log(e);}}}
</script>

copy

#日期范围模式

此模式用于选择一个日期范围，比如住酒店的入住到离店的日期范围，

此模式的返回参数如下：

["2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31"]

copy

示例代码：

<template><u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template><script>export default {data() {return {show: true,mode: 'range'}},methods: {confirm(e) {console.log(e);}}}
</script>

copy

#自定义主题颜色

组件可传入color参数，更改组件主题色

示例代码：

<template><u-calendar :show="show" color="#f56c6c" :mode="mode" @confirm="confirm"></u-calendar>
</template><script>export default {data() {return {show: true,mode: 'range'}},methods: {confirm(e) {console.log(e);}}}
</script>

copy

#自定义文案

组件可以通过formatter以函数的方式定义日期文案

注意：

微信小程序不支持通过props传递函数参数，所以组件内部暴露了一个setFormatter方法用于设置格式化方法，注意在页面的onReady生命周期获取ref再操作。

<template><u-calendar startText="住店"endText="离店"confirmDisabledText="请选择离店日期":formatter="formatter":show="show" :mode="mode" @confirm="confirm"ref="calendar"></u-calendar>
</template><script>export default {data() {return {show: true,mode: 'range'}},onReady() {// 如果需要兼容微信小程序的话，需要用此写法this.$refs.calendar.setFormatter(this.formatter)},methods: {confirm(e) {console.log(e);},formatter(day) {const d = new Date()let month = d.getMonth() + 1const date = d.getDate()if(day.month == month && day.day == date + 3){day.bottomInfo = '有优惠'day.dot = true}return day}}}
</script><style lang="scss" scoped>.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
</style>

copy

#日期最大范围

组件可以通过maxDate定义日期文案

<template><u-calendar :maxDate="maxDate":show="show" @confirm="confirm"></u-calendar>
</template><script>const d = new Date()const year = d.getFullYear()let month = d.getMonth() + 1month = month < 10 ? `0${month}` : monthconst date = d.getDate()export default {data() {return {show: true,maxDate: `${year}-${month}-${date + 10}`,}},methods: {confirm(e) {console.log(e);},}}
</script><style lang="scss" scoped>.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
</style>

copy

#是否显示农历

组件可以通过showLunar定义是否显示农历

<template><u-calendar showLunar:show="show" @confirm="confirm"></u-calendar>
</template><script>export default {data() {return {show: true,}},methods: {confirm(e) {console.log(e);},}}
</script><style lang="scss" scoped>.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
</style>

copy

#默认日期

组件可以通过defaultDate定义默认日期

<template><u-calendar :defaultDate="defaultDateMultiple":show="show" mode="multiple"@confirm="confirm"></u-calendar>
</template><script>const d = new Date()const year = d.getFullYear()let month = d.getMonth() + 1month = month < 10 ? `0${month}` : monthconst date = d.getDate()export default {data() {return {show: true,defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`],}},methods: {confirm(e) {console.log(e);},}}
</script><style lang="scss" scoped>.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
</style>