uniapp日期区间选择器

uniapp日期区间选择器

在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器:
- 限制有效日期范围开始日期为 2024-01-01,结束日期为当日;
- 默认日期区间为当日向前计算的7日区间;
- 选择开始时间后,判断不可大于结束时间,且重置开始时间为结束时间;
- 选择结束时间后,判断不可小于开始时间,且重置结束时间为开始时间;

示例代码:

html:

<view class="picker-container"><view class="picker-item"><view class="picker-item-title">开始日期 :</view><picker mode="date" :value="startDate" start="2024-01-01" :end="todayDate" @change="bindStartDateChange"><view>{{startDate}}</view></picker></view><view class="picker-item"><view class="picker-item-title">结束日期 :</view><picker mode="date" :value="endDate" start="2024-01-01" :end="todayDate" @change="bindEndDateChange"><view>{{endDate}}</view></picker></view>
</view>


CSS:

.picker-container{ height: 80rpx; font-size: 26rpx; display: flex; justify-content: space-around; align-items: center; border-radius: 10rpx; background-color: #fff;}
.picker-item{ padding: 16rpx; display: flex; justify-content: space-around; align-items: center;}
.picker-item-title{ color: #999; white-space: nowrap;}
.picker-item picker{ flex: 1; color: #8B4F8E; font-weight: bold;}


data设置参数数据:

data() {return {todayDate:'',startDate: '',endDate: '',}
},


created 或 onLoad 中,调用初始化日期区间方法:

this.setInitTime();


methods 处理方法:

setNum(num){if(num < 10){return '0' + num;}else{return num;}
},
setInitTime(){let thisTime = new Date();this.todayDate = thisTime.getFullYear() + '-' + this.setNum(thisTime.getMonth() + 1) + '-' + this.setNum(thisTime.getDate());let startTime = new Date(thisTime - (24 * 60 * 60 * 1000 * 6));this.startDate = startTime.getFullYear() + '-' + this.setNum(startTime.getMonth() + 1) + '-' + this.setNum(startTime.getDate());this.endDate = this.todayDate;this.getData();
},
bindStartDateChange(e) {if(new Date(e.detail.value) > new Date(this.endDate)){// 开始时间不可大于结束时间this.startDate = this.endDate;}else{this.startDate = e.detail.value;}this.getData();
},
bindEndDateChange(e) {if(new Date(e.detail.value) < new Date(this.startDate)){// 结束时间不可小于开始时间this.endDate = this.startDate;}else{this.endDate = e.detail.value;}this.getData();
},getData(){// 获取对应时间段数据console.log(this.startDate.replace(/-/g,'/') + '-' + this.endDate.replace(/-/g,'/'))
},

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

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

相关文章

苹果删除的短信怎么恢复?这里有4个恢复技巧

手机短信已成为我们日常沟通中不可或缺的一部分&#xff0c;其中包含了与家人、朋友的温馨对话&#xff0c;以及与工作伙伴的重要信息。然而&#xff0c;有时我们可能会因为误操作或其他原因不小心删除了重要的短信。请别担心&#xff0c;本文将为您详细介绍删除的短信怎么恢复…

图像处理中的颜色空间转换

在图像处理中&#xff0c;颜色空间转换是指将图像从一种颜色表示方式转换为另一种颜色表示方式。常见的颜色空间转换包括RGB到HSV、RGB到灰度、RGB到CMYK等。 RGB到HSV转换&#xff1a; RGB颜色空间由红色&#xff08;R&#xff09;、绿色&#xff08;G&#xff09;和蓝色&…

推荐5个免费的国内平替版GPT

提起AI&#xff0c;大家第一个想到的就是GPT。 虽然它确实很厉害&#xff0c;但奈何于我们水土不服&#xff0c;使用门槛有些高。 不过随着GPT的爆火&#xff0c;现在AI智能工具已经遍布到各行各业了&#xff0c;随着时间的推移&#xff0c;国内的AI工具也已经“百花盛放”了…

C#语言进阶(三) 元组

总目录 C# 语法总目录 元组目录 元组1. 元组元素命名2. 元组的解构3. 元组的比较 元组 元组(tuple)是一组存储值的便捷方式。 元组的目的主要是&#xff0c;不使用out参数而从方法中返回多个值。(匿名类型无法做这个操作)元组能做匿名类型所有操作。 元组是值类型&#xff0…

Python机器学习手册:从预处理到深度学习的实际解决方案

书籍&#xff1a;Machine Learning with Python Cookbook: Practical Solutions from Preprocessing to Deep Learning 作者&#xff1a;Kyle Gallatin&#xff0c;Chris Albon 出版&#xff1a;OReilly Media 书籍下载-《Python机器学习手册&#xff1a;从预处理到深度学习…

数据结构学不会?数据结构可视化网站来了

目录 前言 图码网站 算法可视化 算法编辑器 数据结构全书 数据结构课程 总结 前言 数据结构与算法在计算机的学习中应该是许多小白最头疼的东西&#xff0c;明明听的时候那么容易&#xff0c;为什么转换成代码就那么抽象呢&#xff1f; 有没有一个网站可以数据结构与算…

【OceanBase诊断调优】—— 磁盘性能问题导致卡合并和磁盘写入拒绝排查

适用版本 OceanBase 数据库 V3.x、V4.x 版本。 问题现象 OceanBase 集群合并一直未完成&#xff0c;同时 tsar 和 iostat 显示从凌晨 2:30 开始磁盘使用率一直是 100%。怀疑合并导致 IO 上升&#xff0c;IO 可能存在问题&#xff0c;observer.log 的确有大量报错 disk is hu…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 5月8日,星期三

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年5月8日 星期三 农历四月初一 1、 我国将对法国等12国免签政策延长至2025年底&#xff0c;旅游平台加码布局入境游。 2、 财政部&#xff1a;下拨1582亿元&#xff0c;提高义务教育阶段家庭经济困难学生补助标准。 3、 4月…

java8如何根据属性名这个字符串创建SFunction

java如何根据属性名这个字符串创建SFunction&#xff1f;&#xff08;mybatis plus 中的LambdaQueryWrapper使用到的SFunction&#xff09; 问题描述 比如我有一个Person类 里面有name属性 我怎么根据name这个字符串和Person这个class 获取SFunction 解决方案: 我搜了好久才…

前端如何设置div视图可滚动

前端如何设置div视图可滚动&#xff1f; 要使一个 div 元素可滚动&#xff0c;你可以通过设置其 overflow CSS 属性来实现。以下是如何设置的简单步骤&#xff1a; HTML 结构&#xff1a; html复制代码 <div class"scrollable-div"> <!-- 这里放入大量的…

window11事件查看器中“在事件中只要触发此事件,就会执行相关非XX.xml脚本”

在事件中只要触发此事件&#xff0c;就会执行相关非XX.xml脚本 一、操作过程 1、在时间查看器中&#xff0c;将任务附加到此事件上 2、按照提示逐步下一步添加完成 3、只要触发1中的事件&#xff0c;那么就会执行对应的关联脚本xx.xml。 二、解决办法 1、通过开始菜单搜索打…

已解决java.util.MissingFormatArgumentException异常的正确解决方法,亲测有效!!!

已解决java.util.MissingFormatArgumentException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 示例报错代码&#xff1a; 解决思路 解决方法 检查并修正格式化字符串与参数 示例修正代码&#xff1a; 错误示…

PostgreSQL自带的命令行工具13- pg_waldump

PostgreSQL自带的命令行工具13- pg_waldump 基础信息 OS版本&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a;16.2 pg软件目录&#xff1a;/home/pg16/soft pg数据目录&#xff1a;/home/pg16/data 端口&#xff1a;5777pg_waldump 是 Po…

企业信息泄密的手段有哪些?如何预防数据泄露?

企业信息防泄密是当今企业安全领域的重要议题。随着信息技术的快速发展&#xff0c;企业的信息安全面临着前所未有的挑战。企业信息防泄密不仅关乎企业的商业机密和核心竞争力&#xff0c;更直接关系到企业的声誉、财务安全以及法律合规。因此&#xff0c;建立一套完善的企业信…

第十五届蓝桥杯省赛大学B组(c++)

很幸运拿了辽宁赛区的省一,进入6月1号的国赛啦... 这篇文章主要对第十五届省赛大学B组(C)进行一次完整的复盘,这次省赛2道填空题6道编程题: A.握手问题 把握手情景看成矩阵: 粉色部分是7个不能互相捂手的情况 由于每个人只能和其他人捂手, 所以黑色情况是不算的 1和2握手2和…

言出身随!人情世故:利益交换与人脉的重要性——早读(逆天打工人爬取热门微信文章解读)

巴黎输了&#xff0c;看了比赛还得加班 引言Python 代码第一篇 洞见 认知越高的人&#xff0c;越懂得感恩第二篇 冯站长之家 2024年5月8日&#xff08;周三&#xff09;三分钟新闻早餐结尾 智慧赋予我决策的明灯 勇气则是我行动的盾牌 在细雨中骑行 是我以智慧选择的道路 用勇气…

Qt跨平台开发demo(适用萌新)

最近需要参与一款Qt跨平台的软件开发&#xff0c;在此之前&#xff0c;特把基础信息做学习和梳理&#xff0c;仅供参考。 所使用的技术和版本情况如下&#xff1a; 虚拟机&#xff1a;VMware 16.2.5操作系统&#xff1a;ubuntu-20.04.6-desktop-amd64&#xff1a;Mysql数据库…

Java list中实体类的按照某个字段大小排序

Java list中实体类的按照某个字段大小排序 在Java中&#xff0c;可以使用Collections.sort()方法结合自定义的比较器来对List中的实体类按照某个字段进行排序。以下是一个示例代码&#xff0c;演示了如何根据实体类中的age字段对List进行排序&#xff1a; import java.util.A…

YOLOv8原理解析[目标检测理论篇]

接下来是我最想要分享的内容&#xff0c;梳理了YOLOv8预测的整个流程&#xff0c;以及训练的整个流程。 关于YOLOv8的主干网络在YOLOv8网络结构介绍-CSDN博客介绍了&#xff0c;为了更好地介绍本章内容&#xff0c;还是把YOLOv8网络结构图放在这里&#xff0c;方便查看。 1.YOL…

面试 Java 并发编程八股文十问十答第十二期

面试 Java 并发编程八股文十问十答第十二期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;线程安全&#x…