微信小程序时间弹窗——年月日时分

在这里插入图片描述

需求

  • 1、默认当前时间
  • 2、选择时间弹窗限制最大值、最小值
  • 3、每次弹起更新最大值为当前时间,默认值为上次选中时间
  • 4、== minDate: new Date(2023, 10, 1).getTime(),也可以传入时间字符串new Date('2023-10-1 12:22').getTime() ==

html

  	 <view class="flex bb ptb-12"><view><text class="red">* </text>处理时间:</view><view class="flex1 size-28" bindtap="chooseTime"><view class="mr-8">{{ququ2?ququ2:'请选择'}}</view><van-icon name="arrow" /></view></view><!-- 弹窗 --><van-popup show="{{ isShowPop }}" bind:close="onClosePop" position="bottom"><van-datetime-picker title="处理时间" formatter="{{formatter}}" value="{{ currentDate  }}" bind:confirm="confirmPop" bind:cancel="onClosePop" min-date="{{minDate}}" max-date="{{maxDate}}" /></van-popup>

data

  	ququ2: '',isShowPop: false,currentDate: new Date().getTime(),minDate: new Date(2023, 10, 1).getTime(), //也可以传入时间字符串new Date('2023-10-1 12:22').getTime()maxDate: new Date().getTime(),formatter: function (type, value) {if (type === 'year') {return `${value}`;} else if (type === 'month') {return `${value}`;} else if (type === 'day') {return `${value}`;} else if (type === 'hour') {return `${value}`;} else if (type === 'minute') {return `${value}`;}return value;},

方法

// -----------选择时间弹窗---------chooseTime() {this.setData({maxDate: new Date().getTime(),// new Date('2023-10-1 12:22').getTime() 回显当前选中的时间,否则显示当前时间currentDate: this.data.ququ2 ? new Date(this.data.ququ2).getTime() : new Date().getTime(),isShowPop: true})},confirmPop(e) {// console.log(e, 'e', this.formatTimestamp(e.detail))this.setData({ququ2: this.formatTimestamp(e.detail),isShowPop: false})},onClosePop() {this.setData({isShowPop: false})},// 选中的时间戳处理成  2014-12-23 12:11 格式formatTimestamp(timestamp) {var date = new Date(timestamp);var year = date.getFullYear();var month = date.getMonth() + 1; // 月份是从0开始的,所以需要加1var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();// 格式化时间为字符串// 确保月和日是两位数month = month < 10 ? '0' + month : month;day = day < 10 ? '0' + day : day;hour = hour < 10 ? '0' + hour : hour;minute = minute < 10 ? '0' + minute : minute;return `${year}-${month}-${day} ${hour}:${minute}`;},

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

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

相关文章

【Spring框架】Spring框架的开发方式

目录 Spring框架开发方式前言具体案例导入依赖创建数据库表结构创建实体类编写持久层接口和实现类编写业务层接口和实现类配置文件的编写 IoC注解开发注解开发入门&#xff08;半注解&#xff09;IoC常用注解Spring纯注解方式开发 Spring整合JUnit测试 Spring框架开发方式 前言…

江协科技STM32学习- P24 DMA数据转运DMA+AD多通道

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

【刷题11】CTFHub技能树sql注入系列

整数型注入 看到源码了&#xff0c;直接sql一套秒了 字符型注入 SQL 报错注入 构造payload 1 and (select extractvalue(1,concat(’~’,(select database())))) 后续步骤跟sql基本步骤一样 SQL 布尔注入 人工测试太麻烦&#xff0c;这里直接使用sqlmap,知道这有sql注入漏洞&am…

面试经典 150 题.P26. 删除有序数组中的重复项(003)

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public int removeDuplicates(int[] nums) …

docker中使用ros2humble的rviz2不显示问题

这里写目录标题 docker中使用ros2humble的rviz2不显示问题删除 Docker 镜像和容器删除 Docker 容器Linux服务器下查看系统CPU个数、核心数、(make编译最大的)线程数总结&#xff1a; RVIZ2 不能显示数据集 docker中使用ros2humble的rviz2不显示问题 问题描述&#xff1a; roo…

ELK + Filebeat + Spring Boot:日志分析入门与实践(二)

目录 一、环境 1.1 ELKF环境 1.2 版本 1.3 流程 二、Filebeat安装 2.1 安装 2.2 新增配置采集日志 三、logstash 配置 3.1 配置输出日志到es 3.2 Grok 日志格式解析 3.2 启动 logstash ​3.3 启动项目查看索引 一、环境 1.1 ELKF环境 springboot项目&#xff1a;w…

基于SSM土家风景文化管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;景点分类管理&#xff0c;热门景点管理&#xff0c;门票订单管理&#xff0c;旅游线路管理&#xff0c;系统管理 前提账号功能包括&#xff1a;系统首页&#xff0c;个人中心&…

Linux特种文件系统--tmpfs文件系统

tmpfs类似于RamDisk&#xff08;只能使用物理内存&#xff09;&#xff0c;使用虚拟内存&#xff08;简称VM&#xff09;子系统的页面存储文件。tmpfs完全依赖VM&#xff0c;遵循子系统的整体调度策略。说白了tmpfs跟普通进程差不多&#xff0c;使用的都是某种形式的虚拟内存&a…

不同概率分布的更新过程——Python实现(均匀分布、卡方分布、指数分布等作为概率分布的更新过程)

更新过程(renewal process)是描述元件或设备更新现象的一类随机过程。以下是对更新过程的详细介绍: 一、定义与特点 定义:设对某元件的工作进行观测,假定元件的使用寿命是一随机变量,当元件发生故障时就进行修理或换上新的同类元件,而且元件的更新是即时的(修理或更换…

GIT分布式版本控制系统基础操作

问题大纲 1、什么分布式版本控制系统 2、简述Git的使用分为哪几个步骤 3、克隆和拉取的区别是什么&#xff1f; 4、git相关的所有指令 一、分布式版本控制系统 分布式版本控制系统是一种版本控制系统&#xff0c;它允许每个用户都拥有完整的项目历史记录和版本控制信息。与…

ArcGIS必会的选择要素方法(AND、OR、R、IN等)位置选择等

今天来看看ArcGIS中的几个选择的重要使用方法 1、常规选择、 2、模糊查询、 3、组合复合条件查询&#xff08;AND、OR、IN&#xff09;&#xff0c; 4、空值NULL查询 5、位置选择 推荐学习&#xff1a; 以梦为马&#xff0c;超过万名学员学习ArcGIS入门到实战的应用课程…

Spring Bean创建流程

Spring Bean 创建流程图 大家总是会错误的理解Bean的“实例化”和“初始化”过程&#xff0c;总会以为初始化就是对象执行构造函数生成对象实例的过程&#xff0c;其实不然&#xff0c;在初始化阶段实际对象已经实例化出来了&#xff0c;初始化阶段进行的是依赖的注入和执行一…

rtp协议:rtcp包格式和传输间隔

RTP Control Protocol -- RTCP-rtp控制协议 实时传输控制协议&#xff08;RTCP&#xff09;基于对会话中的所有参与者定期传输控制包&#xff0c;使用与数据包相同的分发机制。底层协议必须提供数据包和控制包的多路复用&#xff0c;例如使用UDP时使用不同的端口号。RTCP执行四…

2024年医疗人工智能研究报告-生成式AI爆发,医疗人工智能走到新的十字路口(附下载)

前言 2024的医疗AI&#xff0c;既是坎坷&#xff0c;又是新生。 快速发展的大语言模型&#xff0c;携着生成式AI掠过医疗领域。过往的互联网医疗、医学影像、新药研发……一个一个场景经由新一代AI重塑&#xff0c;焕发出前所未有的价值。 不过&#xff0c;发现价值并不意味着…

网络请求自定义header导致跨域问题

我记得我的项目之前已经解决了跨域问题。 后来在功能开发着&#xff0c;需要添加一个自定义的header&#xff0c;发现又出现跨域报错。 于是又开始一通摸索折腾。 我的项目前面端是用axios网络请求&#xff0c;通过拦截器添加header&#xff0c;代码如下&#xff1a; //添加请…

macOS 15 Sequoia dmg格式转用于虚拟机的iso格式教程

想要把dmg格式转成iso格式&#xff0c;然后能在虚拟机上用&#xff0c;最起码新版的macOS镜像是不能用UltraISO&#xff0c;dmg2iso这种软件了&#xff0c;你直接转放到VMware里绝对读不出来&#xff0c;办法就是&#xff0c;在Mac系统中转换为cdr&#xff0c;然后再转成iso&am…

大语言模型数据流程源码解读(基于llama3模型)

文章目录 前言一、数据进入LlamaForCausalLM(LlamaPreTrainedModel)类二、数据进入LlamaModel(LlamaPreTrainedModel)类1、input_ids的embedding编码2、position_ids位置获取3、causal_mask因果mask构建1、causal_mask调用2、因果mask代码解读(_update_causal_mask)4、hidden_s…

MATLAB人脸考勤系统

MATLAB人脸考勤系统课题介绍 该课题为基于MATLAB平台的人脸识别系统。传统的人脸识别都是直接人头的比对&#xff0c;现实意义不大&#xff0c;没有一定的新意。该课题识别原理为&#xff1a;先采集待识别人员的人脸&#xff0c;进行训练&#xff0c;得到人脸特征值。测试的时…

Http 状态码 301 Permanent Rediret 302 Temporary Redirect、 重定向 重写

HTTP状态码301和302是什么&#xff1f; 1、HTTP状态码301 HTTP状态码301表示永久性转移&#xff08;Permanent Redirect&#xff09;&#xff0c;这意味着请求的资源已经被分配了一个新的URI&#xff0c;以后的引用应该使用资源现在所指的URI。 HTTP 301状态码表示请求的资源…

如何用猿大师办公助手实现OA系统中Word公文/合同在线编辑及流转?

在OA系统或者合同管理系统中&#xff0c;我们会经常遇到网页在线编辑Word文档形式的公文及合同的情况&#xff0c;并且需要上级对下级的公文进行批注等操作&#xff0c;或者不同部门的人需要签字审核&#xff0c;这就需要用到文档流转功能&#xff0c;如何用猿大师办公助手实现…