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://xiahunao.cn/news/3015431.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Python爬虫--Urllib基础

1. urlretrieve Urllib 库也是类似 request 库&#xff0c;用来解析html的 首先讲 urlretrieve 子模块 这个模块的作用是将网页下载到本地 语法&#xff1a; urlretrieve(网址,本地地址) 例如&#xff1a; 这样就可以了&#xff0c;他会将百度网页下载到本地D盘下&#x…

安卓自动化脚本制作流程详解!

在移动应用日益普及的今天&#xff0c;安卓自动化脚本制作成为了开发者提高工作效率、减少重复劳动的重要手段&#xff0c;本文将详细介绍安卓自动化脚本的制作流程&#xff0c;并通过五段源代码的实例&#xff0c;帮助读者更好地理解和掌握这一过程。 一、安卓自动化脚本制作…

光电探测器性能指标测试

光电探测器的三个核心指标&#xff1a; 带宽&#xff0c;转换增益&#xff0c;噪声(信噪比&#xff0c;NEP&#xff0c;噪声密度) 测试环境&#xff1a;可调谐激光器&#xff08;CW LASER&#xff09;&#xff0c;强度调制器(AM)&#xff0c;信号发生器(AWG)&#xff0c;可调衰…

EtherCAT开发_4_分布时钟知识点摘抄笔记1

分布时钟 (DC&#xff0c;Distributed Cl ock) 可以使所有EtherCAT设备使用相同的系统时间&#xff0c;从而控制各设备任务的同步执行。从站设备可以根据同步的系统时间产生同步信号&#xff0c;用于中断控制或触发数字量输入输出。支持分布式时钟的从站称为 DC 从站。分布时钟…

小红书餐饮推广怎么合作?纯干货

小红书作为国内领先的生活方式分享平台&#xff0c;其用户群体主要集中在一二线城市&#xff0c;年龄分布在18-35岁之间&#xff0c;其中女性用户占比高达80%。这部分用户具有较高的消费能力、审美追求和品质生活需求&#xff0c;对美食有着极高的兴趣和消费意愿&#xff0c;为…

快速修复vcruntime140_1.dll丢失问题,多个亲测有效的方法分享

vcruntime140_1.dll 是Microsoft Visual C Redistributable包中的一个关键动态链接库&#xff08;Dynamic Link Library&#xff09;文件&#xff0c;它对于运行基于Visual C开发的应用程序至关重要。此文件属于运行时组件&#xff0c;为应用程序提供必要的运行时支持&#xff…

Java解决垂直鉴权问题(对垂直权限进行校验)

Java解决垂直鉴权问题&#xff08;对垂直权限进行校验&#xff09; 文章目录 Java解决垂直鉴权问题&#xff08;对垂直权限进行校验&#xff09;前言一、垂直鉴权是什么&#xff1f;二、实现过程1.新建接口权限菜单映射表2.项目初始化时加载接口菜单映射关系3.自定义过滤器拦截…

进程软中断通信实验

【预备知识】 进程软中断通信涉及的系统调用描述如下。 1&#xff0e;kill() 进程用kill()向一个进程或一组进程发送一个信号。系统调用格式为int kill(pid,sig)。其中&#xff0c;pid是一个或一组进程的标识符&#xff0c;sig是要发送的软中断信号。信号的发送分如下三种情况。…

视频剪辑神器:批量高效处理,轻松锐化视频让影片焕然一新!

视频已经成为我们记录生活、分享故事、展示才华的重要形式。然而&#xff0c;面对大量的视频文件&#xff0c;如何批量高效剪辑并提升视频质量&#xff0c;成为了许多人的难题。现在&#xff0c;我们为您带来一款视频剪辑神器&#xff0c;让您轻松处理视频&#xff0c;让您的影…

Linux Systemd基础教程

一、什么是systemd&#xff1f; systemd是Linux系统的一套基本构建模块。它提供了一个系统和服务管理器&#xff0c;作为PID 1运行并启动系统的其余部分。 systemd提供积极的并行化功能&#xff0c;使用套接字和D-Bus激活来启动服务&#xff0c;提供按需启动守护进程&#xf…

shell常用文件处理命令

1. 解压 1.1 tar 和 gz 文件 如果你有一个 .tar 文件,你可以使用以下命令来解压: tar -xvf your_file.tar在这个命令中,-x 表示解压缩,-v 表示详细输出(可选),-f 后面跟着要解压的文件名。 如果你的 .tar 文件同时被 gzip 压缩了(即 .tar.gz 文件),你可以使用以下…

开发组合php+mysql 人才招聘小程序源码搭建 招聘平台系统源码+详细图文搭建部署教程

随着互联网的快速发展&#xff0c;传统的招聘方式已经不能满足企业和求职者的需求。为了提高招聘效率&#xff0c;降低招聘成本&#xff0c;越来越多的人开始关注人才招聘小程序、在线招聘平台。分享一个人才招聘小程序源码及搭建&#xff0c;让招聘更加高效便捷。系统是运营级…

工厂模式应用实例

引言 设计模式概念 设计模式&#xff08;Design Pattern&#xff09;的官方概念可以表述为&#xff1a;在软件设计中&#xff0c;设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。它是针对特定问题或特定场景的解决方案&#xff0c;是一种经过…

04-22 周日 阿里云-瑶光上部署FastBuild过程(配置TLS、自定义辅助命令)

04-22 周日 阿里云-瑶光上部署FastBuild过程 时间版本修改人描述2024年4月22日14:18:59V0.1宋全恒新建文档2024年4月23日20:41:26V1.0宋全恒完成了基本流程的添加 简介 前提 准备两台服务&#xff0c;一台部署Docker&#xff0c;一台部署FastBuild的镜像容器服务所述的Docke…

最高20K/月,安全、数通、云计算多个方向急招,可内推!

高级安全工程师【岗位职责及要求】 1、统筹负责行业客户的安全项目交付&#xff0c;能够独自输出技术方案并完成施&#xff0c;并具备指导初中级工程师实施的能力&#xff1b; 2、掌握H3C全系列安全产品功能并对全系列产品原理有深入了解&#xff0c;能够熟练完成安全产品规划及…

Spring IoCDI(3)—DI详解

目录 一、属性注入 二、构造方法注入 小结&#xff1a;构造函数的注入 三、Setter注入 四、三种注入的优缺点分析&#xff08;面试题&#xff09; 1、属性注入 优点&#xff1a; 缺点&#xff1a; 2、构造方法注入&#xff08;Spring4.X推荐&#xff09; 优点&#x…

python数据分析-老龄化分析

一、研究背景介绍和分析安排 中国作为世界上人口最多的国家&#xff0c;其人口结构的变化对国内外经济都有着深远的影响。近年来&#xff0c;中国的老龄人口比例不断上升&#xff0c;这一变化引起了广泛的社会关注和政策讨论。老龄化带来的挑战包括劳动力市场紧缩、养老金负担…

Innodb实现的索引

概念 一种用于提高数据库查询性能的有序的数据结构。通过使用索引&#xff0c;数据库引擎可以快速定位到存储表中的特定数据&#xff0c;而不必逐行遍历整个表。在处理大量数据的时候可以显著加快数据检索的速度。 通过索引列队数据进行排序&#xff0c;降低数据排序的成本&a…

英语学习笔记4——Is this your ...?

Is this your …? 词汇 Vocabulary suit /sut/ n. 西装&#xff0c;正装 suit 的配套&#xff1a; shirt n. 衬衫tie n. 领带&#xff0c;领结belt n. 腰带trousers n. 裤子shoes n. 鞋子 school /skuːl/ n. 学校 所有学校 搭配&#xff1a;middle school 初中    hig…

C++笔记:类与对象(三)->多态

多态 虚函数 先来看一段代码&#xff1a; #include<iostream> using namespace std;class Animal { public :void run() {cout << "I dont know how to run" << endl;} };class Cat : public Animal{ public :void run() {cout << "I …