uniapp的 picker 日期时间选择器

效果图:
在这里插入图片描述

dateTimePicker.js

function withData(param){return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start,end){var start = start || 0;var end = end || 1;var array = [];for (var i = start; i <= end; i++) {array.push(withData(i));}return array;
}
function getMonthDay(year,month){var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;switch (month) {case '01':case '03':case '05':case '07':case '08':case '10':case '12':array = getLoopArray(1, 31)break;case '04':case '06':case '09':case '11':array = getLoopArray(1, 30)break;case '02':array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)break;default:array = '月份格式不正确,请重新输入!'}return array;
}
function getNewDateArry(){// 当前时间的处理 年月日时分秒var newDate = new Date();var year = withData(newDate.getFullYear()),mont = withData(newDate.getMonth() + 1),date = withData(newDate.getDate()),hour = withData(newDate.getHours()),minu = withData(newDate.getMinutes());seco = withData(newDate.getSeconds());return [year, mont, date, hour, minu,seco];
}
function dateTimePicker(startYear,endYear,date) {// 返回默认显示的数组和联动数组的声明var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];var start = startYear || 1978;var end = endYear || 2100;//处理传过来的字符串转化为数组let dataArr = date.split(" ")[0].split('/')let time = date.split(" ")[1].split(':')// 默认开始显示数据 如果把自定义值传过来的话就使用自定义时间 否则用当前时间  ...dataArr数组解构var defaultDate = date ? [...dataArr, ...time] : getNewDateArry();// 处理联动列表数据/*年月日 时分秒*/dateTimeArray[0] = getLoopArray(start,end);dateTimeArray[1] = getLoopArray(1, 12);dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);dateTimeArray[3] = getLoopArray(0, 23);dateTimeArray[4] = getLoopArray(0, 59);dateTimeArray[5] = getLoopArray(0, 59);//遍历dateTimeArray数组dateTimeArray.forEach((current,index) =>{//匹配defaultDate[index]值在current数组中的位置dateTime.push(current.indexOf(defaultDate[index]))});return {dateTimeArray: dateTimeArray,dateTime: dateTime}
}
module.exports = {dateTimePicker: dateTimePicker,getMonthDay: getMonthDay
}

需要用到的页面中

			<view class="login-Form"><view class="label">进场时间<text class="required">*</text></view><picker class="warning-input" mode="multiSelector" :range="dateTimeArray" v-model="dateTime"@change="change" @columnchange="columnchange"><view class="inp-box" style="margin-left: 18px;"><input type="text" disabled="true" v-model="upTower" placeholder="请选择"placeholder-class="inputPlace" /></view></picker></view>

引入js,并调取方法

const dateTimePicker = require('@/pagesSitePurchase/sitePurchase/dateTimePicker.js')export default {data() {return {dateTimeArray: [],dateTime: "",upTower:""}},onLoad(e) {let date = new Date()let	Y = date.getFullYear() + '/'let	M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'// let	D = date.getDate() + ' 'let	D = date.getDate()< 10 ? ('0' + date.getDate() + ' ') : (date.getDate() + ' ')let	h = date.getHours()< 10 ? ('0' + date.getHours() + ':') : (date.getHours() + ':')let	m = date.getMinutes()< 10 ? ('0' + date.getMinutes() + ':') : (date.getMinutes() + ':')let	s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()// h = '00' + ':',// m = '00' + ':',// s = '00';let arr = Y + M + D + h + m + sconsole.log(arr, 'arr1111')let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, arr)console.log(obj, 'obj')this.dateTimeArray = obj.dateTimeArraythis.dateTime = obj.dateTime},methods: {//时间格式化withData(param) {return param < 10 ? '0' + param : '' + param;},change(e) {let value = []e.detail.value.forEach((val, index) => {value.push(this.withData(val))})let allYear = this.dateTimeArray[0]let y = allYear[Number(value[0])];let m = Number(value[1]) + 1;let d = Number(value[2]) + 1;if (y < 10) y = '0' + yif (m < 10) m = '0' + mif (d < 10) d = '0' + dlet dateArray = y + "-" + m + "-" + d + " " + value[3] + ":" + value[4] + ":" + value[5]this.upTower = dateArraythis.formData.visitTime = dateArray},columnchange(e) {console.log(e.detail.value, 'e.detail.value111')let dateArr = this.dateTimeArraylet arr = this.dateTime//滑动所在列的数据并对其值进行更新arr[e.detail.column] = e.detail.value//更新展示月份对应的天数(28 or 29 or 30 or 31)dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])//最后把最新的数值赋值到dateTimeArraythis.dateTimeArray = dateArrthis.dateTime = arr},}

参考链接地址;https://www.cnblogs.com/anna001/p/16903451.html

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

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

相关文章

说说构建流批一体准实时数仓

分析&回答 基于 Hive 的离线数仓往往是企业大数据生产系统中不可缺少的一环。Hive 数仓有很高的成熟度和稳定性&#xff0c;但由于它是离线的&#xff0c;延时很大。在一些对延时要求比较高的场景&#xff0c;需要另外搭建基于 Flink 的实时数仓&#xff0c;将链路延时降低…

jmeter传参base64卡顿如何解决

部分接口需要传图片base64格式参数&#xff0c;但是输入转为base64格式的图片参数&#xff0c;jmeter直接卡死&#xff0c;甚至电脑也卡死&#xff0c;此时&#xff0c;只需要去掉文件头描述&#xff1a;data:image/jpeg;base64, 即可

[Linux]进程

文章目录 1. 进程控制1.1 进程概述1.1.1 并行和并发1.1.2 PCB1.1.4 进程状态1.1.5 进程命令 1.2 进程创建1.2.1 函数1.2.2 fork() 剖析 1.3 父子进程1.3.1 进程执行位置1.3.2 循环创建子进程1.3.3 终端显示问题1.3.4 进程数数 1.4 execl和execlp函数1.4.1 execl()1.4.2 execlp(…

测试理论与方法----测试流程的第二个环节:测试计划

二、软件测试分类与测试计划 1、软件测试的分类(理解掌握) 根绝需求规格说明书&#xff0c;在设计阶段会产出的两个文档&#xff1a; 概要设计(HLD)&#xff1a;设计软件的结构&#xff0c;包含软件的组成&#xff0c;模块之间的层次关系&#xff0c;模块与模块之间的调用关系…

小程序密码显示与隐藏的实现

默认密码隐藏起来&#xff08;显示为点&#xff09;&#xff0c;后面的图标是闭眼&#xff1b;用户点击图标后&#xff0c;图标变成睁眼&#xff0c;同时把密码明文显示出来&#xff1b;如此循环 Page({data: {passwordType: true, // 切换是否密码框show_pass: false // 是否…

镜之Json Compare Diff

前言 “镜” 寓意是凡事都有两面性,Json 对比也不例外! 因公司业务功能当中有一个履历的功能,它有多个版本的 JSON 数据需要对比出每个版本的不同差异节点并且将差异放置在一个新的 JSON 当中原有结构不能变动,差异节点使用数组对象的形式存储,前端点击标红即可显示多个版本的节…

Ubuntu20.04如何更换国内源-阿里云源

1.备份源文件 cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.打开源文件&#xff0c;注释默认的源 vim /etc/apt/sources.list ## 注释原本内容 # deb http://mirrors.ivolces.com/ubuntu/ focal main restricted universe multiverse # deb-src http://mirrors.ivolc…

pandas由入门到精通-数据清洗-分类数据

pandas-02-数据清洗&预处理 E. 分类数据1. 适用情况2. Categorical 扩展数据类型2.1 通过astype将一个Series转化为Categorical类2.2 通过pd.Categorical 生成Categorical类2.3 通过pd.Categorical.from_codes 将标签列表和整数列表转化为Categorical类2.4 Categorical类的…

Django(7)-项目实战-发布会管理

登录功能 模板页面 sign/templates/index.html <!DOCTYPE html> <html> <head><title>Login Page</title> </head> <body><h1>发布会管理</h1><form action"/login/" method"post"><la…

linux————ELK(日志收集系统集群)

目录 一、为什么要使用ELK 二、ELK作用 二、组件 一、elasticsearch 特点 二、logstash 工作过程 INPUT&#xff08;输入&#xff09; FILETER(过滤) OUTPUTS&#xff08;输出&#xff09; 三、kibana 三、架构类型 ELK ELKK ELFK ELFKK EFK 四、构建ELk集群…

Android基于JNI的Java与C++互调

java调用C++: #include <jni.h> //导出c函数格式 extern "C" JNIEXPORT //供JNI调用 JNICALL 函数名格式 Java_包名_类名_函数名(包名.替换为_) Java_com_example_getapplist_MainActivity_stringFromJNI 包名:com_example_getapplist 类名:MainActi…

异常的捕获和处理

目录 一、异常 1.异常概述 1.1认识异常 1.2Java异常体系结构 2.Java异常处理机制 2.1异常处理 2.2捕获异常 2.2.1使用try-catch捕获异常 2.2.2使用try-catch-finally处理异常 2.2.3使用多重catch处理异常 2.3抛出异常 2.3.1使用throws声明抛出异常 2.3.2使用throw…

管理类联考——逻辑——形式逻辑——汇总篇——知识点突破——形式逻辑——选言假言——要么、或者与箭头的关系

角度 或则转化/鲁滨逊定律 (1)或者变箭头: P ∨ Q = ┐ P → Q = ┐ Q → P P∨Q=┐P→Q=┐Q→P P∨

详细介绍typescript的所有变量类型

目录 1. 任意类型&#xff08;Any&#xff09;2. 数字类型&#xff08;Number&#xff09;3. 字符串类型&#xff08;String&#xff09;4. 布尔类型&#xff08;Boolean&#xff09;5. 数组类型&#xff08;Array&#xff09;6. 元组类型&#xff08;Tuple&#xff09;-需求明…

研磨设计模式day14模板方法模式

目录 场景 原有逻辑 有何问题 解决方案 解决思路 代码实现 重写示例 模板方法的优缺点 模板方法的本质 何时选用 场景 现在模拟一个场景&#xff0c;两个人要登录一个系统&#xff0c;一个是管理员一个是用户&#xff0c;这两个不同身份的登录是由后端对应的两个接…

Android笔记--Hilt

Hilt 是 Android 的依赖项注入库&#xff0c;可减少在项目中执行手动依赖项注入的样板代码。执行手动依赖项注入要求您手动构造每个类及其依赖项&#xff0c;并借助容器重复使用和管理依赖项。依赖注入的英文是Dependency Injection&#xff0c;简称DI,简单说一个类中使用的依赖…

Win11更新致蓝屏死机,应对技巧你必知!

Windows 11用户应该意识到&#xff0c;微软的最新更新导致一些电脑崩溃&#xff0c;并在可怕的死亡蓝屏上显示“UNSUPPORTED_PROCESSOR”。 这一点尤其值得注意&#xff0c;因为据报道&#xff0c;这种情况发生在自然情况下的Windows 11 PC上&#xff0c;因此对任何下载最新更…

数据结构day04(概念、顺序表)

今日任务 2.冒泡排序和选择排序 #define MAX 10typedef struct{int id; }data;typedef struct seq{data arr[MAX];int len; }seqList,*seqListP;/** function: 选择排序* param [ in] * param [out] * return */ int selectSort(seqListP p){if(is_empty(p))return 1;…

React Navigation 路由传参

页面之间传递参数 实现页面之间传递参数很简单&#xff0c;跟普通的 React 项目一样&#xff0c;具体实例入戏&#xff1a; // 传入参数 export default function Home(props: { navigation: any }) {return (<View><Text>Home</Text><Buttontitle"…

干翻Dubbo系列第十五篇:Rest协议基于SpringBoot的规范化开发

文章目录 文章说明 一&#xff1a;Rest协议简介 二&#xff1a;搭建开发环境 1&#xff1a;父项目里边引入的新的版本内容 2&#xff1a;Api中的操作 3&#xff1a;Provider模块 三&#xff1a;编码 1&#xff1a;API模块 2&#xff1a;Provider模块 3&#xff1a;Co…