此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。
注意: 此组件与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>