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

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

相关文章

【ACM出版】第四届人工智能与计算工程国际学术会议(ICAICE 2023)

ACM出版|第四届人工智能与计算工程国际学术会议 The 4th International Conference on Artificial Intelligence and Computer Engineering 为了在人工智能技术应用与计算工程领域进一步的探索&#xff0c;与国内外学界和业界相关人员交流新问题、新发现、新成果、新应用&…

__call__函数

一、定义 在Python中&#xff0c;__call__函数是一个特殊的方法&#xff0c;用于使一个对象可以像函数一样被调用。当一个对象定义了__call__方法时&#xff0c;它就成为了一个可调用对象。 二、使用 class Counter:def __init__(self):self.count 0def __call__(self):sel…

查局域网所有占用IP

查局域网所有占用IP 按&#xff1a;winr 出现下面界面&#xff0c;在文本框中输入 cmd 按确定即可出现cmd命令界面 在cmd命令窗口输入你想要ping的网段&#xff0c;下面192.168.20.%i即为你想要ping的网段&#xff0c;%i代表0-255 for /L %i IN (1,1,254) DO ping -w 1 -n 1…

优化物料编码规则,提升物料管理效率

导 读 ( 文/ 2358 ) 物料是生产过程的必需品。对物料进行身份的唯一标识&#xff0c;可以更好的管理物料库存、库位&#xff0c;更方便的对物料进行追溯。通过编码规则的设计&#xff0c;可以对物料按照不同的属性、类别或特征进行分类&#xff0c;从而更好地进行库存分析、计划…

业务需要咨询?开发遇到 bug 想反馈?开发者在线提单功能上线!

大家是否遇到过下列问题—— 在开发的时候&#xff0c;遇到 bug 需要反馈… 有合作意向的时候&#xff0c;想更多了解业务和相关产品… 在接入的时候&#xff0c;需要得到专业技术支持… 别急&#xff0c;荣耀开发者服务平台在线提单功能上线了~ 处理问题分类说明&#xff1…

ElasticSearch(一)数据类型

ElasticSearch&#xff08;一&#xff09;数据类型 1.简述 Es数据类型分为基础数据类型和复杂类型数据&#xff0c;掌握ES数据类型才能进一步使用ES检索数据内容。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

阿里云申请免费SSL证书的两种验证方式及配置服务器Tomcat升级HTTPS协议

通用教程&#xff0c;其他服务商的免费 SSL 证书也差不多是这个流程。&#xff08;至少腾讯云的操作步骤和本文是一致&#xff0c;嘻嘻&#xff01;&#xff09; 申请 SSL 证书 首先在阿里云上创建并申请 SSL 证书&#xff0c;之后选择 DNS 验证的方式&#xff0c;一种是手动配…

【Go 基础篇】Go语言结构体详解:打开自定义类型的大门

嗨&#xff0c;Go语言学习者们&#xff01;在编程的世界里&#xff0c;数据是核心&#xff0c;而结构体&#xff08;Struct&#xff09;是一种能够帮助我们更有组织地存储和操作数据的重要工具。在本篇博客中&#xff0c;我们将深入探讨Go语言中结构体的概念、定义、初始化、嵌…

PYTHON链家租房数据分析:岭回归、LASSO、随机森林、XGBOOST、KERAS神经网络、KMEANS聚类、地理可视化...

全文下载链接:http://tecdat.cn/?p29480 作者&#xff1a;Xingsheng Yang 1 利用 python 爬取链家网公开的租房数据&#xff1b; 2 对租房信息进行分析&#xff0c;主要对房租相关特征进行分析&#xff0c;并搭建模型用于预测房租&#xff08;点击文末“阅读原文”获取完整代码…

自动化运维:Ansible脚本之playbook剧本

目录 一、理论 1.playbooks 2.YAML 3.使用ansible批量安装apache服务 4.定义、引用变量 5.指定远程主机sudo切换用户 6.when条件判断 7.迭代 8.Templates 模块 9.tags 模块 10.Roles 模块 二、实验 1.使用ansible批量安装apache服务 2.定义、引用变量…

k8s之存储篇---数据卷Volume

数据卷概述 Kubernetes Volume&#xff08;数据卷&#xff09;主要解决了如下两方面问题&#xff1a; 数据持久性&#xff1a;通常情况下&#xff0c;容器运行起来之后&#xff0c;写入到其文件系统的文件暂时性的。当容器崩溃后&#xff0c;kubelet 将会重启该容器&#xff…

深度学习4. 循环神经网络 – Recurrent Neural Network | RNN

目录 循环神经网络 – Recurrent Neural Network | RNN 为什么需要 RNN &#xff1f;独特价值是什么&#xff1f; RNN 的基本原理 RNN 的优化算法 RNN 到 LSTM – 长短期记忆网络 从 LSTM 到 GRU RNN 的应用和使用场景 总结 百度百科维基百科 循环神经网络 – Recurre…

无涯教程-Android - List View函数

Android ListView 是垂直滚动列表中显示的视图&#xff0c;使用 Adapter 从列表(如数组或数据库)中获取内容的列表项会自动插入列表中。 适配器(Adapter)实际上是UI组件和将数据填充到UI组件中的数据源之间的桥梁&#xff0c;适配器保存数据并将数据发送到适配器视图&#xff0…

75 # koa 基本逻辑实现以及属性的扩展

准备工作 新建自己的 kaimo-koa 文件夹&#xff0c;结构如下&#xff1a; lib application.js&#xff1a;创建应用context.js&#xff1a;上下文request.js&#xff1a;koa 中自己实现的 request 的对象response.js&#xff1a;koa 中自己实现的 response 的对象 package.js…

有序充电运营管理平台是基于物联网和大数据技术的充电设施管理系统-安科瑞黄安南

随着我国能源战略发展以及低碳行动的实施&#xff0c;电动汽车已逐步广泛应用&#xff0c;而电动汽车的应用非常符合当今社会对环保意识的要求&#xff0c;以及有效节省化石燃料的消耗。 由于其没有污染排放的优点以及政府部门的关注&#xff0c;电动汽车将成为以后出行的重要…

设计模式行为型-状态模式

文章目录 简介状态模式基础定义状态接口或抽象类实现具体状态类 上下文类与状态转换上下文类的定义和作用状态转换及触发条件 状态模式的优势与适用性优点一&#xff1a;可维护的代码优点二&#xff1a;清晰的状态管理适用场景一&#xff1a;对象拥有多个状态适用场景二&#x…

(二十)大数据实战——Flume数据采集的基本案例实战

前言 本节内容我们主要介绍几个Flume数据采集的基本案例&#xff0c;包括监控端口数据、实时监控单个追加文件、实时监控目录下多个新文件、实时监控目录下的多个追加文件等案例。完成flume数据监控的基本使用。 正文 监控端口数据 ①需求说明 - 使用 Flume 监听一个端口&am…

VBA技术资料MF50:VBA_在Excel中突出显示前3个值

【分享成果&#xff0c;随喜正能量】人受到尊重&#xff0c;不是因为权钱&#xff0c;而是他骨子里透出的&#xff0c;正直与善良。。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高…

Servlet与过滤器

目录 Servlet 过滤器 Servlet Servlet做了什么 本身不做任何业务处理,只是接收请求并决定调用哪个JavaBean去处理请求,确定用哪个页面来显示处理返回的数据 Servlet是什么 ServerApplet&#xff0c;是一种服务器端的Java应用程序 只有当一个服务器端的程序使用了Servlet…

【STM32】学习笔记(EXTI)-江科大

EXTI外部中断 中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行 中断优先级&#x…