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

简介: 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>

#日历模式

  • modesingle只能选择单个日期
  • modemultiple可以选择多个日期
  • moderange可以选择日期范围

#单个日期模式

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

["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-confirmtrue,则点击确认按钮后触发 选择日期相关的返回参数
close 日历关闭时触发 可定义页面关闭时的回调事件
相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
55 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
84 5
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
80 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
63 1
|
21天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
36 0
|
1月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
36 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
61 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7

热门文章

最新文章