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() + 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>

#日期最大范围

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

#是否显示农历

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

API

#Props

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

#Methods

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

#Event

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/583730.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elasticsearch安装教程(超详细)

1.1 创建网络&#xff08;单点部署&#xff09; 因为我们还需要部署 kibana 容器&#xff0c;因此需要让 es 和 kibana 容器互联&#xff0c;所有先创建一个网络&#xff1a; docker network create es-net 1.2.加载镜像 采用的版本为 7.12.1 的 elasticsearch&#xff1b;…

python渗透工具编写学习笔记:8、无线网络渗透

目录 前言 8.1 概念 8.2 无线网络发现 8.3 无线网络弱点分析 8.3.1 使用Scapy来探测无线网络 8.3.2 使用Aircrack-ng工具 8.4 无线网络密码破解 8.5无线网络漏洞利用&#xff1a; 8.6 无线网络流量分析&#xff1a; 前言 因为一些原因&#xff0c;下一篇我们再来学习p…

Java线上问题排查思路

1、Java 服务常见问题 Java 服务的线上问题从系统表象来看大致可分成两大类: 系统环境异常、业务服务异常。 系统环境异常&#xff1a;主要从CPU、内存、磁盘、网络四个方面考虑。比如&#xff1a;CPU 占用率过高、CPU 上下文切换频率次数较高、系统可用内存长期处于较低值、…

Transformer模型中的Attention算法

参考【经典精读】万字长文解读Transformer模型和Attention机制 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/104393915图解Transformer_transformer模型训练准确率曲线图-CSDN博客https://blog.csdn.net/qq_41664845/article/details/84969266?appinstall0#commentBoxThe…

命令行终端查看当前目录下子文件和子文件夹数量

文章目录 查看当前目录下有多少子文件&#xff1a;查看当前目录下有多少子文件夹&#xff1a; 查看当前目录下有多少子文件&#xff1a; ls -lA ./ | grep "^-" | wc -l查看当前目录下有多少子文件夹&#xff1a; find ./ -mindepth 1 -type d | wc -l

【人工智能Ⅰ】实验9:BP神经网络

实验9 BP神经网络 一、实验目的 1&#xff1a;掌握BP神经网络的原理。 2&#xff1a;了解BP神经网络的结构&#xff0c;以及前向传播和反向传播的过程。 3&#xff1a;学会利用BP神经网络建立训练模型&#xff0c;并对模型进行评估。即学习如何调用Sklearn中的BP神经网络。…

IIS主机头名的用法--一个IP建多个Web站点

主机头名 我们有时候需要在一个IP地址上建立多个web站点&#xff0c;在IIS中&#xff0c;我们可通过简单的设置达到这个目标。 在IIS中&#xff0c;每个 Web 站点都具有唯一的、由三个部分组成的标识&#xff0c;用来接收和响应请求: (1) IP地址 (2)端口号 (3)主机头名。 …

CGAL的加热法

1、介绍 热方法是一种算法&#xff0c;通过返回三角形网格中所有顶点到给定源顶点集合中最近顶点的测地距离近似值&#xff0c;解决单源或多源最短路径问题。网格中两个顶点的测地距离是指从网格表面&#xff08;可能经过面的内部&#xff09;行进的距离。例如&#xff0c;在章…

CodeWhisperer:编码世界中的声音启迪者

人烟 导语&#xff1a; 在数字化时代&#xff0c;编码已经成为了一种不可或缺的技能。而 CodeWhisperer&#xff08;编码世界中的声音启迪者&#xff09;则以其卓越的技术和深厚的知识为人们带来了独特的启发和指导。本文将介绍 CodeWhisperer 的背景和成就&#xff0c;探讨他是…

Centos7:Jenkins+gitlab+node项目启动(3)

Centos7&#xff1a;Jenkinsgitlabnode项目启动(1) Centos7&#xff1a;Jenkinsgitlabnode项目启动(1)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启动(2) Centos7&#xff1a;Jenkinsgitlabnode项目启动(2)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启…

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set问题解决方案

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set问题解决方案 当我们使用sudo su切换权限时提示错误&#xff1a; sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set该错误出现原因&#xff1a;是因为/usr/bin/sudo的权限被…

GrayLog日志平台的基本使用-ssh之Email报警

1、首先编辑并添加邮件配置到server.conf&#xff08;注意&#xff1a;是添加&#xff09; vim /etc/graylog/server/server.conf # Email transport transport_email_enabled true transport_email_hostname smtp.qq.com transport_email_port 465 transport_email_use_a…

2023启示录丨自动驾驶这一年

图片&#xff5c;《老人与海》插图 过去的20年&#xff0c;都没有2023年如此动荡。 大模型犹如一颗原子弹投入科技圈&#xff0c;卷起万里尘沙&#xff0c;传统模式瞬间被夷为平地&#xff0c;在耀眼的白光和巨大的轰鸣声之下&#xff0c;大公司、创业者、投资人甚至是每一位观…

修改文件和目录的拥有者

chown 修改文件的用户组固然重要&#xff0c;但是修改文件的拥有者可能会更常用。修改用户组使用的是chgrp命令&#xff0c;而要修改拥有者则应该使用chown命令。 $ ls -l -rw-r--r-- 1 scott scott ... libby_arrowrock.jpg -rw-r--r-- 1 scott family ... libby.jpg -rw-r--…

手把手带你死磕ORBSLAM3源代码(十七)System.cc void System::SaveDebugData类代码分析

目录 一.前言 二.代码 2.1完整代码注释分析 一.前言 这段代码是一个C++函数,其主要功能是将一些与初始化相关的数据保存为文本文件。 二.代码 2.1完整代码注释分析 // 定义一个名为SaveDebugData的函数,它接受一个整型引用参数initIdx。 void System::SaveDebugData…

C语言字符串知识点和算法总结

目录 一、字符串遍历 1、字符串和字符数组 2、获取字符串长度 3、字符串遍历 4、大小写转换 5、字符串数组 二、字符串拷贝 三、字符串比较 四、字符串分割 五、字符串翻转 1、题目详解 2、算法详解 3、源码剖析 六、回文串 1、定义 2、例题讲解 3、算法详解 …

SSM实验室设备管理----计算机毕业设计

项目介绍 本项目为后台管理系统&#xff0c;分为管理员、老师、学生三种角色&#xff1b; 管理员角色包含以下功能&#xff1a; 信息管理&#xff1a;用户管理&#xff1b; 基础管理&#xff1a;实验室管理,实验室申请记录,设备管理,设备记录管理,耗材管理,耗材记录管理等功能…

【腾讯云中间件】2023年热门文章集锦

各位读者&#xff0c;大家好&#xff01; 光阴似箭&#xff0c;日月如梭&#xff0c;仿佛冬奥会的盛况还在眼前&#xff0c;新的一年却即将到来。在过去的一年里&#xff0c;我们见证了腾讯云中间件在产品升级与创新方面的显著进步&#xff0c;包括消息队列TDMQ品牌全新升级和…

POJ 1651 Multiplication Puzzle

一、题目 1、题目描述 The multiplication puzzle is played with a row of cards, each containing a single positive integer. During the move player takes one card out of the row and scores the number of points equal to the product of the number on the card ta…

ClickHouse基础知识(五):ClickHouse的SQL 操作

基本上来说传统关系型数据库&#xff08;以 MySQL 为例&#xff09;的 SQL 语句&#xff0c;ClickHouse 基本都支持&#xff0c; 这里不会从头讲解 SQL 语法只介绍 ClickHouse 与标准 SQL&#xff08;MySQL&#xff09;不一致的地方。 1. Insert 基本与标准 SQL&#xff08;My…