此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
注意： 此组件与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() + 1 const 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() + 1 month = month < 10 ? `0${month}` : month const 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() + 1 month = month < 10 ? `0${month}` : month const 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>
