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.rhkb.cn/news/226940.html

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

相关文章

【JS笔记】JavaScript语法 《基础+重点》 知识内容,快速上手(二)

数组 什么是数组&#xff1f; 字面理解就是 数字的组合 其实不太准确&#xff0c;准确的来说数组是一个 数据的集合 也就是我们把一些数据放在一个盒子里面&#xff0c;按照顺序排好 [1, 2, 3, hello, true, false]这个东西就是一个数组&#xff0c;存储着一些数据的集合 …

复数值神经网络可能是深度学习的未来

一、说明 复数这种东西,在人的头脑中似乎抽象、似乎复杂,然而,对于计算机来说,一点也不抽象,不复杂,那么,将复数概念推广到神经网络会是什么结果呢?本篇介绍国外的一些同行的尝试实践,请我们注意观察他们的进展。

C语言 volatile关键字

volatile关键字介绍 volatile 是一个关键字&#xff0c;用于修饰变量&#xff0c;表示该变量是易变的&#xff0c;即可能在任何时候被意外地改变。在多线程编程中&#xff0c;当多个线程同时访问同一个变量时&#xff0c;由于线程之间的交互和优化&#xff0c;可能会导致变量的…

手机怎么下载python并安装,如何在手机上下载python

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;如何在手机上下载python 3.7版本&#xff0c;手机怎么下载python并安装&#xff0c;现在让我们一起来看看吧&#xff01; 如何在手机上下载python 应用市场内搜索下载下载Python在您开始之前&#xff0c;在你的计算机将…

Linux性能优化全景指南

Part1 Linux性能优化 1、性能优化性能指标 高并发和响应快对应着性能优化的两个核心指标&#xff1a;吞吐和延时 应用负载角度&#xff1a;直接影响了产品终端的用户体验系统资源角度&#xff1a;资源使用率、饱和度等 性能问题的本质就是系统资源已经到达瓶颈&#xff0c;但…

Vue3设计目标和优化

vue3.0的设计目标是什么&#xff1f;做了哪些优化&#xff1f; Vue3的设计目标&#xff1a;更小、更快、更友好、优化方案 一、设计目标 Vue3之前我们会面临的许多问题&#xff1a; 随着功能的增长&#xff0c;复杂组件的代码变得越来越难以维护起来缺少一种比较【干净】的…

苹果电脑Dock栏优化软件 mac功能亮点

hyperdock mac是一款Dock优化软件&#xff0c;hyperdock支持使用窗口自动排列功能&#xff0c;您可以直接通过将窗口拖拉至屏幕上方来快速最大化至全屏&#xff0c;又或者拖动到左右来进行左分屏和右分屏。而且Dock优化软件还有一个特色便是对Dock的强大管理哪里能力&#xff0…

需求分析 :不得不重新去面对的一关。

软件需求分析 背景 深入需求产生的背景明确项目目标了解用户群体 需求优先级 需求的分类与整理明确需求优先级让团队成员都参与到需求分析中来&#xff0c;增加团队合作能力与效率 编写需求文档 整理好的需求编写成详细的需求文档包括需求的描述、输入/输出格式、功能流程…

elasticsearch 笔记三:查询建议介绍、Suggester、自动完成

一、查询建议介绍 1. 查询建议是什么&#xff1f; 查询建议&#xff0c;为用户提供良好的使用体验。主要包括&#xff1a; 拼写检查&#xff1b; 自动建议查询词&#xff08;自动补全&#xff09; 拼写检查如图&#xff1a; 自动建议查询词&#xff08;自动补全&#xff09;…

学习Vue的key作用和原理

今天主要学习了列表渲染和key的作用和原理&#xff0c;先来说说列表渲染&#xff0c;顾名思义想要渲染列表最快的方式就是使用for循环&#xff0c;我们要学习的就是Vue中对标签实现for循环的语法&#xff0c;它和我们传统的js语法有些不同&#xff0c;它是先要有Vue实例中data的…

We are a team - 华为OD统一考试

OD统一考试 题解&#xff1a; Java / Python / C 题目描述 总共有 n 个人在机房&#xff0c;每个人有一个标号 (1<标号<n) &#xff0c;他们分成了多个团队&#xff0c;需要你根据收到的 m 条消息判定指定的两个人是否在一个团队中&#xff0c;具体的: 消息构成为 a b …

C/C++转WebAssembly及微信小程序调用

上一篇文章讲了C/C如何转WebAssembly&#xff0c;并测试了在Web端调用。本篇内容和上篇一样&#xff0c;介绍C/C包转的.wasm包如何在小程序中调用。 说明 本篇是在上一篇步骤1-4的基础上&#xff0c;再做修改&#xff0c;供微信小程序端调用的方法和步骤。 本篇操作手册可以…

Vue - 实现文件导出文件保存下载

1 文件导出&#xff1a;使用XLSX插件 需求背景&#xff1a;纯前端导出&#xff0c;如 在前端页面勾选部分表格数据&#xff0c;点击"导出"按钮导出Excel文件。 实现思路&#xff1a; 1.通过XLSX插件的 XLSX.utils.book_new()方法&#xff0c;创建excel工作蒲对象wb…

云计算:OpenStack 配置云主机实例的存储挂载并实现外网互通

目录 一、实验 1. 环境 2.配置存储挂载 3.云主机实例连接外部网络&#xff08;SNAT&#xff09; 4.外部网络连接云主机实例&#xff08;DNAT&#xff09; 二、问题 1.云主机 ping 不通外部网络 2.nova list 查看云主机列表报错 3.nova list 与 virsh list --all有何区…

o2o生活通全开源尊享版+多城市切换+企业付款+交友IM+平台快报

搭建教程 1.把 pigo2ov282.sql 文件里面的网址 test.souho.net 全部批量替换为你的自己的 2.使用 phpmyadmin 导入 pigo2ov282.sql 到你的数据库&#xff08;直接访问/phpmyadmin 即可&#xff09; 3.修改数据库文件/conf/db.php 里的数据库连接信息&#xff08;请勿使用记事本…

【51单片机系列】DS1302时钟模块扩展实验之与EEPROM结合使用只进行一次初始化工作

本文是关于时钟芯片DS1302的扩展实验。 文章目录 一、实验分析二、proteus仿真原理图三、软件设计及结果 本实验实现的目的&#xff1a;利用AT24C02掉电不丢失的功能&#xff0c;存储数据用来辨别DS1302时钟是否已经初始化&#xff0c;如果初始化就不执行DS1302初始化函数。 一…

无需翻墙|Stable Diffusion WebUI 安装|AI绘画

前言 最近终于有机会从围墙里往外看&#xff0c;了解到外面的世界已经有了天翻地覆的变化&#xff0c;感叹万千&#xff0c;笔者在本地mac&#xff0c;windows&#xff0c;linux&#xff0c;docker部署了不下20遍后&#xff0c;整理出来的linux极简避坑安装方案&#xff0c;供…

鸿鹄电子招投标系统:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台源码与立项流程

在数字化时代&#xff0c;企业需要借助先进的数字化技术来提高工程管理效率和质量。招投标管理系统作为企业内部业务项目管理的重要应用平台&#xff0c;涵盖了门户管理、立项管理、采购项目管理、采购公告管理、考核管理、报表管理、评审管理、企业管理、采购管理和系统管理等…

Docker 入门 ------ 基本命令

1. 使用Docker镜像 1.1 获取镜像 主要命令: docker pull NAME[:TAG] NAME 为镜像名称&#xff0c;后跟:版本号&#xff0c;如果没有跟后面的版本号&#xff0c;默认拉取最新的稳定版本 例子&#xff1a; 上述命令相当于&#xff1a;docker.io/library/ubuntu:latest 1.2 查…

机器学习之K-means聚类

概念 K-means是一种常用的机器学习算法,用于聚类分析。聚类是一种无监督学习方法,它试图将数据集中的样本划分为具有相似特征的组(簇)。K-means算法的目标是将数据集划分为K个簇,其中每个样本属于与其最近的簇中心。 以下是K-means算法的基本步骤: 选择簇的数量(K值)…