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

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

相关文章

【Gaea+UE5】创建基本的大型世界场景

目录 效果 步骤 一、在Gaea中生成地形 二、确定导出的地形规模 三、在UE中创建地形 四、验证UE创建的地形规模是否正确 五、使用M4自动地形材质 效果 步骤 一、在Gaea中生成地形 1. 打开Gaea官网下载软件 2. 打开Gaea软件&#xff0c;我们可以选择一个预设的山体 创…

C++哈希(个人笔记)

C哈希 1.unordered_mapd1.1unordered_map的构造函数1.2unorder_map的容量1.3unordered_map的迭代器1.4unordered_map的元素访问1.5unorder_map的查找1.6unordered_map的修改操作1.7unordered_map的桶操作 2.unordered_set3.unordered_set和unordered_set的笔试题4.哈希4.1哈希概…

Java全局异常处理,@ControllerAdvice异常拦截原理解析【简单易懂】

https://www.bilibili.com/video/BV1sS411c7Mo 文章目录 一、全局异常处理器的类型1-1、实现方式一1-2、实现方式二 二、全局异常拦截点2-1、入口2-2、全局异常拦截器是如何注入到 DispatcherServlet 的 三、ControllerAdvice 如何解析、执行3-1、解析3-2、执行 四、其它4-1、设…

CorelDRAW2024新特性全解析!

CorelDRAW2024是一款备受赞誉的图形设计软件&#xff0c;它以其强大的功能和用户友好性赢得了全球数百万设计师的青睐。该软件提供了丰富的绘图、排版、图像处理、矢量编辑以及网页设计工具&#xff0c;无论是初学者还是专业设计师&#xff0c;都能在这款软件中找到满足自己需求…

精品录播|电磁场数值仿真技术及天线设计与应用

电磁场数值仿真技术及天线设计与应用

【技术分享】 OPC UA安全策略证书简述

那什么是OPC UA证书&#xff1f;用途是什么&#xff1f; 简单来说它是身份验证和权限识别。 OPC UA使用X.509证书标准&#xff0c;该标准定义了标准的公钥格式。建立UA会话的时候&#xff0c;客户端和服务器应用程序会协商一个安全通信通道。数字证书&#xff08;X.509&#x…

Android Compose四: 常用的组件 Text

Text Composable fun Text(text: String, //用于设置显示文本modifier: Modifier Modifier, //设置形状大小点击事件等color: Color Color.Unspecified, //fontSize: TextUnit TextUnit.Unspecified,fontStyle: FontStyle? null,fontWeight: FontW…

RockChip Android8.1 EthernetService分析

一:概述 本篇文章将围绕RK Android8.1 SDK对Ethernet做一次框架分析,包含Framework层和APP层。 当前版本SDK默认只支持一路Ethernet,熟悉Ethernet工作流程后通过修改最终会在系统Setting以太网中呈现多路选项(可以有多种实现方式),博主通过增加ListPreference实现的效果…

Linux 操作系统网络编程1

目录 1、网络编程 1.1 OSI 网络七层模型 1.1.1 OSI 参考模型 1.1.2 网络数据传输过程 2 传输层通信协议 2.1 TCP 2.1.1 TCP的3次握手过程 2.1.2 TCP四次挥手过程 2.2 UDP 3 网络编程的IP地址 4 端口 5 套接字 1、网络编程 1.1 OSI 网络七层模型 1.1.1 OSI 参考模型…

5月13号作业

使用消息队列实现的2个终端之间的互相聊天 并使用信号控制消息队列的读取方式&#xff1a; 当键盘按ctrlc的时候&#xff0c;切换消息读取方式&#xff0c;一般情况为读取指定编号的消息&#xff0c;按ctrlc之后&#xff0c;指定的编号不读取&#xff0c;读取其他所有编号的消息…

【江南大学×朗汀留学】部分留学录取案例合集

朗汀留学 X 江南大学 尽管客观条件如此艰难&#xff0c;朗汀留学的同学们还是斩获众多名校的录取。成绩属于过去&#xff0c;我们继续努力创造更好未来。 以下为我们摘取的江南大学部分学生案例供大家参考&#xff0c;再次恭喜所有获得理想大学offer的学生们&#xff0c;你们…

C# OpenCvSharp Demo - Mat格式化输出、Mat序列化和反序列化

C# OpenCvSharp Demo - Mat格式化输出、Mat序列化和反序列化 目录 效果 项目 代码 下载 效果 直接输出&#xff1a;Mat [ 3*2*CV_8UC3, IsContinuousTrue, IsSubmatrixFalse, Ptr0x1eb73ef9140, Data0x1eb73ef91c0 ]格式化输出&#xff1a;默认风格[ 91, 2, 79, 179, …

【计算机网络】http协议的原理与应用,以及https是如何保证安全传输的

HTTP 超文本传输协议&#xff08;英文&#xff1a;HyperText Transfer Protocol&#xff0c;缩写&#xff1a;HTTP&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 HTTP的发展是由蒂姆伯纳斯-李于1989年在欧洲核子研究组织…

Web3Tools - 助记词生成

Web3Tools - 助记词生成工具 本文介绍了一个简单的助记词生成工具&#xff0c;使用 React 和 Material-UI 构建。用户可以选择助记词的语言和长度&#xff0c;然后生成随机的助记词并显示在页面上 功能介绍 选择语言和长度&#xff1a; 用户可以在下拉菜单中选择助记词的语言&…

Linux x86_64 dump_stack()函数基于FP栈回溯

文章目录 前言一、dump_stack函数使用二、dump_stack函数源码解析2.1 show_stack2.2 show_stack_log_lvl2.3 show_trace_log_lvl2.4 dump_trace2.5 print_context_stack 参考资料 前言 Linux x86_64 centos7 Linux&#xff1a;3.10.0 一、dump_stack函数使用 dump_stack函数…

大模型prompt实例:知识库信息质量校验模块

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 大模型应用向开发路径&#xff1a;AI代理工作流大模型应用开发实用开源项目汇总大模…

DRF 纯净版创建使用

【一】介绍 &#xff08;1&#xff09;使用原因 在Django中&#xff0c;contrib 包包含了许多内置的app和中间件&#xff0c;如auth、sessions、admin等&#xff0c;这些app在创建新的Django项目时默认是包含在内的。然而&#xff0c;在开发RESTful API时&#xff0c;可能不需…

linux性能监控之lsof

lsof&#xff1a;list open files&#xff0c;显示所有打开的文件以及进程信息&#xff0c;我们通常用来检查特定的文件被哪些进程打开 [rootk8s-master ~]# lsof --help lsof: illegal option character: - lsof: -e not followed by a file system path: "lp" lso…

网络传输,请每次都开启 TCP_NODELAY

原文&#xff1a;Marc Brooker - 2024.05.09 &#xff08;注&#xff1a;不必过于担心这个问题&#xff0c;大部分现代库&#xff0c;语言&#xff08;如 Go&#xff09;&#xff0c;代理&#xff08;如 Envoy&#xff09;&#xff0c;都默认设置了 TCP_NODELAY。如果遇到网络…

光耦 IS314W中文资料 IS314W引脚图及功能说明

IS314W是一款IGBT/MOSFET输出型光耦&#xff0c;由Isocom公司制造。它主要用于驱动用于电机控制和电源系统变频器的功率IGBT和MOSFET。以下是该产品的部分功能和参数&#xff1a; - 两个独立的光耦输出通道 - 轨对轨输出电压 - 最大峰值输出电流&#xff1a;1.0A - 最小峰值输…