uniapp中uview组件库丰富的Calendar 日历用法-阿里云开发者社区

uniapp中uview组件库丰富的Calendar 日历用法

2024-01-03 660

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uniapp中uview组件库丰富的Calendar 日历用法

基本使用

通过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>

#日历模式

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

#单个日期模式

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

["2021-07-01"]

示例代码：

<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>

#多个日期模式

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

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

示例代码：

<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>

#日期范围模式

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

此模式的返回参数如下：

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

示例代码：

<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>

#自定义主题颜色

组件可传入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>

#自定义文案

组件可以通过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>

#日期最大范围

组件可以通过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>

#是否显示农历

组件可以通过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>

#默认日期

组件可以通过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>

API

#Props

参数	说明	类型	默认值	可选值
title	标题内容	String	日期选择	-
showTitle	是否显示标题	Boolean	true	false
showSubtitle	是否显示副标题	Boolean	true	false
mode	日期类型选择	String	single	multiple-可以选择多个日期，range-选择日期范围（多个月需配合`monthNum`属性使用）
startText	mode=range时，第一个日期底部的提示文字	String	开始	-
endText	mode=range时，最后一个日期底部的提示文字	String	结束	-
customList	自定义列表	Array	[]	[]
color	主题色，对底部按钮和选中日期有效	String	#3c9cff	-
minDate	最小的可选日期	Number \| String	0	-
maxDate	最大可选日期	Number \| String	0	-
defaultDate	默认选中的日期，mode为multiple或range是必须为数组格式	Array \| String \| Date	null	-
maxCount	mode=multiple时，最多可选多少个日期	Number \| String	Number.MAX_SAFE_INTEGER	-
rowHeight	日期行高	Number \|String	56	-
formatter	日期格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法)	Function	null	-
showLunar	是否显示农历	Boolean	false	true
showMark	是否显示月份背景色	Boolean	true	false
confirmText	确定按钮的文字	String	确定	-
confirmDisabledText	确认按钮处于禁用状态时的文字	String	确定	-
show	是否显示日历弹窗	Boolean	false	true
closeOnClickOverlay	是否允许点击遮罩关闭日历（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	false	true
readonly	是否为只读状态，只读状态下禁止选择日期	Boolean	false	true
maxRange	日期区间最多可选天数，默认无限制，mode = range时有效	Number \| String	无限制	-
rangePrompt	范围选择超过最多可选天数时的提示文案，mode = range时有效	String \| null	选择天数不能超过 xx 天	-
showRangePrompt	范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效	Boolean	true	false
allowSameDay	是否允许日期范围的起止时间为同一天，mode = range时有效	Boolean	false	true
round	圆角值，默认无圆角	String \| Number	0	-
monthNum 2.0.17	最大展示的月份数量	String \| Number	3	-

#Methods

方法名	说明
setFormatter	为兼容微信小程序而暴露的内部方法，见上方说明

#Event

事件名	说明	回调参数
confirm	日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发	选择日期相关的返回参数
close	日历关闭时触发	可定义页面关闭时的回调事件

uniapp中uview组件库丰富的Calendar 日历用法

基本使用

#日历模式

#单个日期模式

#多个日期模式

#日期范围模式

#自定义主题颜色

#自定义文案

#日期最大范围

#是否显示农历

#默认日期

API

#Props

#Methods

#Event

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

uniapp中uview组件库丰富的Calendar 日历用法

基本使用

#日历模式

#单个日期模式

#多个日期模式

#日期范围模式

#自定义主题颜色

#自定义文案

#日期最大范围

#是否显示农历

#默认日期

API

#Props

#Methods

#Event

热门文章

最新文章

相关电子书