【小程序】封装时间选择组件:用单元格van-cell和插槽slot,包括起始时间和终止时间
效果
可以选择起始时间和终止时间,并显示。
时间选择器放在van-cell的value插槽中。

用的库:
https://vant-contrib.gitee.io/vant-weapp/#/home
https://dayjs.fenxianglu.cn/category/
用的组件:Cell单元格、DatetimePicker时间选择、Popup弹出层
"usingComponents": {"van-popup": "@vant/weapp/popup/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-datetime-picker": "@vant/weapp/datetime-picker/index"}
代码
HTML
注意,这里的van-cell的value放的是时间选择器,以插槽的形式实现。
根据文档:这里要求用<view slot="">实现value的插槽,而不是<view slot="value">或<view slot>

data-type用来在js方法中得知选择的是开始还是结束的时间。其他属性见文档。
<van-cell-group><van-cell title="销售日期" border="{{ false }}" title-width="60px"><!-- value用slot,不能slot="value",不能slot,必须slot="" --><view slot=""><view class="start timeItem inline-block" bindtap="showPopup" data-type="start">{{ date.start }}</view>至<view class="end timeItem inline-block" bindtap="showPopup" data-type="end">{{ date.end }}</view></view></van-cell>
</van-cell-group>
CSS
.inline-block {/*让它们一行*/display: inline-block;}.timeItem {/*加点边框、间距*/margin: 0 4px;border: 1px solid #888;padding: 0 8px;}
JavaScript
会用到dayjs库。
data() {return {showPop: false,dataType: '',//选择的时间是开始还是结束date: {start: dayjs().format('YYYY-MM-DD'),end: dayjs().format('YYYY-MM-DD')},currentDate: new Date().getTime(),//在时间选择器选择的时间minDate: new Date().getTime()}
},
methods: {//弹出showPopup(e) {this.showPop = true//在弹出框后得知是开始/结束this.dataType = e.currentTarget.dataset.type},//关闭colsePopup() {this.showPop = false},//选择的时间赋值timeInput(event) {this.currentDate = event.detail},//点击“确认”后timeConfirm() {// currentDate是时间戳(毫秒)if (this.dataType === 'start') {this.date.start = dayjs(this.currentDate).format('YYYY-MM-DD')} else {this.date.end = dayjs(this.currentDate).format('YYYY-MM-DD')}this.colsePopup()}}
其他
这个功能感觉很常见,记录一下。
只是记录自己敲码的过程,水平很烂。
功能并不完善,比如没有end必须>=start的判断等。
相关文章:
【小程序】封装时间选择组件:用单元格van-cell和插槽slot,包括起始时间和终止时间
效果 可以选择起始时间和终止时间,并显示。 时间选择器放在van-cell的value插槽中。 用的库: https://vant-contrib.gitee.io/vant-weapp/#/home https://dayjs.fenxianglu.cn/category/ 用的组件:Cell单元格、DatetimePicker时间选择、Pop…...
华为OD机试真题B卷 Java 实现【猜密码】
一、题目描述 小杨申请了一个保密柜,但是他忘记了密码。只记得密码都是数字,而且所有数字都是不重复的。 请你根据他记住的数字范围和密码的最小数字数量,帮他算下有哪些可能的组合,规则如下: 输出的组合都是从可选的数字范围中选取的,且不能重复;输出的密码数字要按照…...
沉淀-MYSQL
MYSQL学习 数据库操作 创建数据库 create database db_name; 删除数据库 drop database db_name; 选择/使用数据库 use db_name; 使用mysqladmin在终端执行 创建数据库 mysqladmin -u root -p create db_name Enter password:*** 删除数据库 mysqladmin -u root -p drop db…...
OJ练习第116题——二进制矩阵中的最短路径(BFS)
二进制矩阵中的最短路径 力扣链接:1091. 二进制矩阵中的最短路径 题目描述 给你一个 n x n 的二进制矩阵 grid 中,返回矩阵中最短 畅通路径 的长度。如果不存在这样的路径,返回 -1 。 二进制矩阵中的 畅通路径 是一条从 左上角 单元格&am…...
2023上半年软件设计师真题评析
2023年上半年软设是2018年改版后的一次考试,以下内容根据考完回忆结合网上暂时流传的真题(不保证完全正确)整理,主要侧重相关知识点罗列,少讲或不讲具体的答案,主要给自己的计算机基础查漏补缺,同时也希望对大家有帮助…...
(汇编) 基于VS的x86汇编基础指令
文章目录 环境汇编基础标志位常用指令 vs配置END 环境 visual studio 选择x86运行 示例代码 /** | 32位 | 16位 | 高8位 | 低8位 | | ---- | ---- | ----- | ----- | | EAX | AX | AH | AL |*/ #include <iostream>int main() {int32_t x 1;int32_t y 2;//…...
算法Day16 | 104.二叉树的最大深度,559.n叉树的最大深度, 111.二叉树的最小深度,222.完全二叉树的节点个数
Day16 104.二叉树的最大深度559.n叉树的最大深度111.二叉树的最小深度222.完全二叉树的节点个数 104.二叉树的最大深度 题目链接: 104.二叉树的最大深度 深度和高度相反。 高度,自然是从下向上数:叶子节点是第一层,往上数&#x…...
java设计模式之责任链设计模式的前世今生
责任链设计模式是什么? 责任链设计模式(Chain of Responsibility Pattern)是一种行为型设计模式,它允许多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合关系。在责任链模式中,每个处理对…...
是面试官放水,还是公司太缺人了?华为原来这么容易就进了...
华为是大企业,是不是很难进去啊?” “在华为做软件测试,能得到很好的发展吗? 一进去就有9.5K,其实也没有想的那么难” 直到现在,心情都还是无比激动! 本人211非科班,之前在字节和腾…...
PLC/DCS系统常见的干扰现象及判断方法
一般来说,常见的干扰现象有以下几种: 1.系统发指令时,电机无规则地转动; 2.信号等于零时,数字显示表数值乱跳; 3。传感器工作时,DCS/PLC 采集过来的信号与实际参数所对应的信号值不吻合,且误…...
c++ 11标准模板(STL) std::map(四)
定义于头文件<map> template< class Key, class T, class Compare std::less<Key>, class Allocator std::allocator<std::pair<const Key, T> > > class map;(1)namespace pmr { template <class Key, class T, clas…...
6.开源非对称加密算法SM2实现
6.开源非对称加密算法SM2实现 前期内容导读: 开源加解密RSA/AES/SHA1/PGP/SM2/SM3/SM4介绍开源AES/SM4/3DES对称加密算法介绍及其实现开源AES/SM4/3DES对称加密算法的验证实现开源非对称加密算法RSA/SM2实现及其应用开源非对称加密算法RSA实现 1. 开源组件 非对称秘…...
Toolformer and Tool Learning(LLMs如何使用工具)
大模型的能力让学术和工业界都对通用人工智能的未来充满幻想,在前一篇博文中已经粗略介绍, Augmented Language Models(增强语言模型) ALM的两大思路是推理和工具,本篇博文整理两篇关于Toolformer或Tool Learning的论…...
029:Mapbox GL绘制铁路黑白交替的线段
第029个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中加载数据显示铁路标识的那种黑白交替的线段。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共94行)相关API参考:专栏目标示例效果 配置方式 1)…...
结对编程 --- 大部分程序员喜欢的编程方式
一、介绍 结对编程起源时间可以追溯到 1990 年代早期。这种编程方法最初由 Jim Highsmith 和 Alistair Cockburn 等人提出。后来,Kent Beck 和 Ward Cunningham 等人将其发展成为一种敏捷开发方法,被称为“极限编程”(Extreme Programming&am…...
kubernetes-informer机制
一、概念 informer 是 client-go 中的核心工具包,在kubernetes中,各个组件通过HTTP协议跟 API Server 进行通信。如果各组件每次都直接和API Server 进行交互,会给API Server 和ETCD造成非常大的压力。在不依赖任何中间件的情况下࿰…...
LeetCode 2451. Odd String Difference【字符串,哈希表】简单
本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…...
切片工具tippecanoe的全网最详细的解释
1.下载和安装 tippecanoe工具是mapbox官方提供的一个服务端切片工具,因此它是运行在服务器上的,它比较友好的支持mac和linux机器。对于windows来讲,就比较麻烦了。 首先对于mac系统,你只需配置好自己的homebrew,保证homebrew能够正常下载东西。 然后只需要一个命令: …...
Linux系统初始化命令的备忘单,Linux运维工程师收藏!
在管理和维护Linux系统时,有一些常用的命令可以帮助您进行系统初始化和配置。这些命令涵盖了各种任务,包括系统设置、用户管理、软件安装和网络配置等。 本文将为您提供一个Linux系统初始化命令的备忘单,以便在需要时方便查阅和使用。 系统设…...
五月最近一次面试,被阿里P8测开虐惨了...
都说金三银四涨薪季,我是着急忙慌的准备简历——5年软件测试经验,可独立测试大型产品项目,熟悉项目测试流程...薪资要求?5年测试经验起码能要个20K吧 我加班肝了一页半简历,投出去一周,面试电话倒是不少&a…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
