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

news2025/3/3 18:22:42

目录

基本使用

#日历模式

#单个日期模式

#多个日期模式

#日期范围模式

#自定义主题颜色

#自定义文案

#日期最大范围

#是否显示农历

#默认日期

基本使用

  • 通过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是否显示标题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-confirm为true，则点击确认按钮后触发选择日期相关的返回参数
close日历关闭时触发可定义页面关闭时的回调事件

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

gitlab 11.11.8的备份与恢复及500错误的修复

gitlab 11.11.8的备份与恢复及500错误的修复

gitlab已经集成了非常方便的备份和恢复命令&#xff0c;只要我们执行这些命令就能完成gitlab的备份与恢复了。 我想gitlab备份与恢复的目的无非就是将已经运行了很久的旧的gitlab服务&#xff0c;迁移到新的服务器上。如果你旧的gitlab上项目很少&#xff0c;就需要考虑迁移服…
阅读更多...
基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

效果&#xff1a; 二次封装el-table组件 <template><div><!-- showHeader:是否显示头部size:表格的大小height:表格的高度isStripe:表格是否为斑马纹类型tableData:表格数据源isBorder:是否表格边框handleSelectionChange:行选中&#xff0c;多选内容发生变化回…
阅读更多...
基于虚拟机ubuntu的linux和shell脚本的学习,以及SSH远程登陆实战

基于虚拟机ubuntu的linux和shell脚本的学习,以及SSH远程登陆实战

简介 特点 是一款操作系统,跟windows,macos一样,有下面的特点 简单和高效,一切皆文件,所有配置都通过修改文件解决,不需要繁琐的权限和设置 权限高,把所有细节都交给用户,可完全自定义 安全,所有程序只有自己执行才会启动 分类 1、debian系主要有Debian&#xff0c;Ubun…
阅读更多...
yolov8实战第四天——yolov8图像分类 ResNet50图像分类（保姆式教程）

yolov8实战第四天——yolov8图像分类 ResNet50图像分类（保姆式教程）

yolov8实战第一天——yolov8部署并训练自己的数据集&#xff08;保姆式教程&#xff09;_yolov8训练自己的数据集-CSDN博客在前几天&#xff0c;我们使用yolov8进行了部署&#xff0c;并在目标检测方向上进行自己数据集的训练与测试&#xff0c;今天我们训练下yolov8的图像分类…
阅读更多...
PHP序列化总结1--序列化和反序列化的基础知识

PHP序列化总结1--序列化和反序列化的基础知识

序列化和反序列化的作用 1.序列化&#xff1a;将对象转化成数组或者字符串的形式 2.反序列化&#xff1a;将数组或字符串的形式转化为对象 为什么要进行序列化 这种数据形式中间会有很多空格&#xff0c;不同人有不同的书写情况&#xff0c;可能还会出现换行的情况 为此为了…
阅读更多...
C# Image Caption

C# Image Caption

目录 介绍 效果 模型 decoder_fc_nsc.onnx encoder.onnx 项目 代码 下载 C# Image Caption 介绍 地址&#xff1a;https://github.com/ruotianluo/ImageCaptioning.pytorch I decide to sync up this repo and self-critical.pytorch. (The old master is in old ma…
阅读更多...
07-项目打包 React Hooks

07-项目打包 React Hooks

项目打包 项目打包是为了把整个项目都打包成最纯粹的js&#xff0c;让浏览器可以直接执行 打包命令已经在package.json里面定义好了 运行命令&#xff1a;npm run build&#xff0c;执行时间取决于第三方插件的数量以及电脑配置 打包完之后再build文件夹下&#xff0c;这个…
阅读更多...
Self-attention学习笔记（Self Attention、multi-head self attention）

Self-attention学习笔记（Self Attention、multi-head self attention）

李宏毅机器学习Transformer Self Attention学习笔记记录一下几个方面的内容 1、Self Attention解决了什么问题2、Self Attention 的实现方法以及网络结构Multi-head Self Attentionpositional encoding 3、Self Attention 方法的应用4、Self Attention 与CNN以及RNN对比 1、Se…
阅读更多...
STM32移植LVGL图形库

STM32移植LVGL图形库

1、问题1&#xff1a;中文字符keil编译错误 解决方法&#xff1a;在KEIL中Options for Target Flash -> C/C -> Misc Controls添加“--localeenglish”。 问题2&#xff1a;LVGL中显示中文字符 使用 LVGL 官方的在线字体转换工具&#xff1a; Online font converter -…
阅读更多...
Python面向对象编程 —— 类和异常处理

Python面向对象编程 —— 类和异常处理

​ &#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 1. 类 1.1 类的定义 1.2 类变量和实例变量 1.3 类的继承 2. 异常处理 2.1类型异常 2.…
阅读更多...
【集合竞价】

【集合竞价】

文章目录 集合竞价时间集合竞价量柱的关系a、亮度顶部是未匹配的成交量b、量柱底部表示虚拟撮合的成交量 集合竞价常用的几种形态1、低开集合竞价2.平开集合竞价3、高开集合竞价4、看集合竞价的关键时间点&#xff1a;5、需要注意的几点 庄家使用集合竞价进行的操作1、利用集合…
阅读更多...
【EI会议征稿通知】2024年通信技术与软件工程国际学术会议 (CTSE 2024)

【EI会议征稿通知】2024年通信技术与软件工程国际学术会议 (CTSE 2024)

2024年通信技术与软件工程国际学术会议 (CTSE 2024) 2024 International Conference on Communication Technology and Software Engineering (CTSE 2024) 2024年通信技术与软件工程国际学术会议 (CTSE 2024)将于2024年03月15-17日在中国长沙举行。会议专注于通信技术与软件工…
阅读更多...
3D视觉-结构光测量-线结构光测量

3D视觉-结构光测量-线结构光测量

概述 线结构光测量中&#xff0c;由激光器射出的激光光束透过柱面透镜扩束&#xff0c;再经过准直&#xff0c;产生一束片状光。这片光束像刀刃一样横切在待测物体表面&#xff0c;因此线结构光法又被成为光切法。线结构光测量常采用二维面阵 CCD 作为接受器件&#xff0c;因此…
阅读更多...
【代码随想录】刷题笔记Day42

【代码随想录】刷题笔记Day42

前言 这两天机器狗终于搞定了&#xff0c;一个控制ROS大佬&#xff0c;一个计院编程大佬&#xff0c;竟然真把创新点这个弄出来了&#xff0c;牛牛牛牛&#xff08;菜鸡我只能负责在旁边喊加油&#xff09;。下午翘了自辩课来刷题&#xff0c;这次应该是元旦前最后一刷了&…
阅读更多...
自然语言处理3——玩转文本分类 - Python NLP高级应用

自然语言处理3——玩转文本分类 - Python NLP高级应用

目录 写在开头1. 文本分类的背后原理和应用场景1.1 文本分类的原理1.2 文本分类的应用场景 2. 使用机器学习模型进行文本分类&#xff08;朴素贝叶斯、支持向量机等&#xff09;2.1 朴素贝叶斯2.1.1 基本原理2.1.2 数学公式2.1.3 一般步骤2.1.4 简单python代码实现 2.2 支持向量…
阅读更多...
JSON 详解

JSON 详解

文章目录 JSON 的由来JSON 的基本语法JSON 的序列化简单使用stringify 方法之 replacerstringify 方法之 replacer 参数传入回调函数stringify 方法之 spacestringify 方法之 toJSONparse 方法之 reviver 利用 stringify 和 parse 实现深拷贝 json 相信大家一定耳熟能详&#x…
阅读更多...
2023-12-30 AIGC-LangChain介绍

2023-12-30 AIGC-LangChain介绍

摘要: 2023-12-30 AIGC-LangChain介绍 LangChain介绍 1. https://youtu.be/Ix9WIZpArm0?t353 2. https://www.freecodecamp.org/news/langchain-how-to-create-custom-knowledge-chatbots/ 3. https://www.pinecone.io/learn/langchain-conversational-memory/ 4. https://de…
阅读更多...
AJAX: 整理2：学习原生的AJAX，这边借助express框架

AJAX: 整理2：学习原生的AJAX，这边借助express框架

1. npm install express 终端直接安装 2. 测试案例&#xff1a;Hello World&#xff01; 新建一个express.js的文件&#xff0c;写入下方的内容 // 1. 引入express const express require(express)// 2. 创建服务器 const app express()// 3.创建路由规则 // request 是对请…
阅读更多...
迪杰斯特拉(Dijkstra)算法详解

迪杰斯特拉(Dijkstra)算法详解

【专栏】数据结构复习之路 这篇文章来自上述专栏中的一篇文章的节选&#xff1a; 【数据结构复习之路】图&#xff08;严蔚敏版&#xff09;两万余字&超详细讲解 想了解更多图论的知识&#xff0c;可以去看看本专栏 Dijkstra 算法讲解&#xff1a; 迪杰斯特拉算法(Di…
阅读更多...
如何理解李克特量表？选项距离相等+题目权重相等！

如何理解李克特量表？选项距离相等+题目权重相等！

在学术研究中&#xff0c;通过开展问卷调查获取数据时&#xff0c;调查问卷分为量表题和非量表题。量表题就是测试受访者的态度或者看法的题目&#xff0c;大多采用李克特量表。 李克特量表是一种评分加总式态度量表&#xff08;attitude scale&#xff09;&#xff0c;由美国…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023