uniapp写的一个年月日时分秒时间选择功能

图片.png

代码:

<template><view><picker mode="multiSelector" :value="multiIndex" :range="multiRange" @change="onMultiChange"><view class="picker">当前选择:{{ formattedDateTime }}</view></picker></view>
</template><script>
export default {data() {const now = new Date();return {multiIndex: [now.getFullYear() - 1900, // 年份now.getMonth(),           // 月份 (0-11)now.getDate() - 1,        // 日期 (1-31,减1以用于索引)now.getHours(),           // 小时 (0-23)now.getMinutes(),         // 分钟 (0-59)now.getSeconds()          // 秒 (0-59)],multiRange: this.getMultiRange()};},computed: {formattedDateTime() {const year = this.multiRange[0][this.multiIndex[0]];const month = String(this.multiRange[1][this.multiIndex[1]]).padStart(2, '0');const day = String(this.multiRange[2][this.multiIndex[2]]).padStart(2, '0');const hour = String(this.multiRange[3][this.multiIndex[3]]).padStart(2, '0');const minute = String(this.multiRange[4][this.multiIndex[4]]).padStart(2, '0');const second = String(this.multiRange[5][this.multiIndex[5]]).padStart(2, '0');return `${year}-${month}-${day} ${hour}:${minute}:${second}`;}},methods: {getMultiRange() {let yearRange = [];let monthRange = [];let dayRange = [];let hourRange = [];let minuteRange = [];let secondRange = [];// 生成年月日时分秒的数组for (let i = 1900; i <= 2100; i++) yearRange.push(i);for (let i = 1; i <= 12; i++) monthRange.push(i);for (let i = 1; i <= 31; i++) dayRange.push(i);for (let i = 0; i <= 23; i++) hourRange.push(i);for (let i = 0; i <= 59; i++) minuteRange.push(i);for (let i = 0; i <= 59; i++) secondRange.push(i);return [yearRange, monthRange, dayRange, hourRange, minuteRange, secondRange];},onMultiChange(e) {this.multiIndex = e.detail.value;}}
};
</script><style>
.picker {padding: 10px;background-color: #fff;text-align: center;
}
</style>
  1. 部分
<template><view><picker mode="multiSelector" :value="multiIndex" :range="multiRange" @change="onMultiChange"><view class="picker">当前选择:{{ formattedDateTime }}</view></picker></view>
</template>
<view>: 是一个容器元素,用于包裹其他元素。
<picker>: 用于创建一个多级选择器,mode="multiSelector" 表示选择多个值。:value="multiIndex": 绑定当前选择的索引数组。:range="multiRange": 绑定可选择的值数组。@change="onMultiChange": 当选择值变化时触发 onMultiChange 方法。
<view class="picker">: 显示当前选择的日期和时间,使用双花括号 {{ formattedDateTime }} 来动态显示格式化后的日期时间。
<script>
export default {data() {const now = new Date();return {multiIndex: [now.getFullYear() - 1900, // 年份now.getMonth(),           // 月份 (0-11)now.getDate() - 1,        // 日期 (1-31,减1以用于索引)now.getHours(),           // 小时 (0-23)now.getMinutes(),         // 分钟 (0-59)now.getSeconds()          // 秒 (0-59)],multiRange: this.getMultiRange()};},computed: {formattedDateTime() {const year = this.multiRange[0][this.multiIndex[0]];const month = String(this.multiRange[1][this.multiIndex[1]]).padStart(2, '0');const day = String(this.multiRange[2][this.multiIndex[2]]).padStart(2, '0');const hour = String(this.multiRange[3][this.multiIndex[3]]).padStart(2, '0');const minute = String(this.multiRange[4][this.multiIndex[4]]).padStart(2, '0');const second = String(this.multiRange[5][this.multiIndex[5]]).padStart(2, '0');return `${year}-${month}-${day} ${hour}:${minute}:${second}`;}},methods: {getMultiRange() {let yearRange = [];let monthRange = [];let dayRange = [];let hourRange = [];let minuteRange = [];let secondRange = [];// 生成年月日时分秒的数组for (let i = 1900; i <= 2100; i++) yearRange.push(i);for (let i = 1; i <= 12; i++) monthRange.push(i);for (let i = 1; i <= 31; i++) dayRange.push(i);for (let i = 0; i <= 23; i++) hourRange.push(i);for (let i = 0; i <= 59; i++) minuteRange.push(i);for (let i = 0; i <= 59; i++) secondRange.push(i);return [yearRange, monthRange, dayRange, hourRange, minuteRange, secondRange];},onMultiChange(e) {this.multiIndex = e.detail.value;}}
};
</script>

data()

const now = new Date();: 获取当前的日期和时间。
multiIndex: 初始化为当前时间的索引数组。年份减去1900,以便与年份范围的索引相匹配。月份直接使用 getMonth(),因为它从0开始(0表示1月)。日期、小时、分钟和秒直接取当前值。

computed

formattedDateTime: 计算属性,用于格式化当前选择的日期和时间。通过索引获取年、月、日、时、分、秒,并使用 padStart(2, '0') 确保它们都是两位数。返回格式化后的字符串,例如 YYYY-MM-DD HH:mm:ss。

methods

getMultiRange(): 生成年、月、日、时、分、秒的数组。使用循环生成各个范围的值(例如年份1900到2100)。返回一个数组,包含所有的时间选择范围。onMultiChange(e): 处理选择器的变化。更新 multiIndex,以便反映用户的选择。
<style>
.picker {padding: 10px;background-color: #fff;text-align: center;
}
</style>

.picker: 定义选择器的样式,设置内边距、背景颜色和文本对齐方式。

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

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

相关文章

中国各地级市的海拔标准差

海拔标准差是衡量地理测量准确性的重要指标&#xff0c;它通过计算特定地点的海拔测量值与平均海拔之间的偏差来评估数据的可靠性。较小的标准差意味着测量结果较为一致&#xff0c;而较大的标准差则可能指出数据的波动性或测量误差。 计算方法 海拔标准差的计算遵循以下公式…

C++学习/复习补充记录 --- 图论(深搜,广搜)

图的度 无向图&#xff1a; 连接某节点的边数&#xff0c;即为该节点的【度】。 &#xff08;无向图中&#xff0c;有5条边连接节点4&#xff0c;则节点4的度为5。&#xff09; 有向图&#xff1a; 出度&#xff1a;从该节点出发的边的个数。 入度&#xff1a;指向该节点边的个…

Idea_服务器自动化部署_傻瓜式教程

使用Alibaba Cloud Toolkit 在 IntelliJ IDEA 中一键部署项目到服务器 1. 安装 Alibaba Cloud Toolkit 插件 确保 IntelliJ IDEA 版本为 2018.3 或以上。打开 IntelliJ IDEA&#xff0c;进入 File -> Settings -> Plugins&#xff0c;搜索并安装 Alibaba Cloud Toolkit…

【Python基础】字典类型

本文收录于 《Python编程入门》专栏&#xff0c;从零基础开始&#xff0c;分享一些Python编程基础知识&#xff0c;欢迎关注&#xff0c;谢谢&#xff01; 文章目录 一、前言二、Python 字典类型2.1 访问字典里的值2.2 修改字典2.3 删除字典元素2.4 字典键值的特性2.5 遍历字典…

Vision Transformer (ViT) + 代码【详解】

文章目录 1、Vision Transformer (ViT) 介绍2、patch embedding3、代码3.1 class embedding Positional Embedding3.2 Transformer Encoder3.3 classifier3.4 ViT总代码 1、Vision Transformer (ViT) 介绍 VIT论文的摘要如下&#xff0c;谷歌翻译如下&#xff1a; 虽然 Transf…

《JavaEE进阶》----10.<SpringMVC应用分层:【三层架构】>

本篇博客我们主要讲解 1.应用的分层&#xff1a;三层架构 2.Spring MVC和三层架构的区别和联系 3.软件设计原则&#xff1a;高内聚低耦合 4.应用分层的好处 5.通过应用分层后的代码示例 一、三层架构简介 阿里开发手册中,关于工程结构部分,定义了常见工程的应用分层结构: 上图…

【Java 基础】:三大特征之多态

✨ 杏花疏影里&#xff0c;吹笛到天明 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;java学习 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&…

u盘格式化数据还能恢复吗?点击了解实用教程

U盘是电子数据存储设备&#xff0c;我们主要用它来转移数据、随身携带数据等。同时U盘在使用过程中常会遇到问题&#xff0c;比如U盘中毒&#xff0c;U盘中毒会导致里面保存的数据文件无法读取&#xff0c;我们需要进行U盘格式化。格式化之后的U盘才可以继续使用&#xff0c;那…

软件测试-Selenium+python自动化测试

目录 会用到谷歌浏览器Chrome测试,需要下载一个Chromedriver(Chrome for Testing availability)对应自己的浏览器版本号选择。 一、元素定位 对html网页中的元素进行定位,同时进行部分操作。 1.1一个简单的模板 from selenium import webdriver from selenium.webdrive…

本地部署AList并挂载小雅超集结合内网穿透实现无公网IP远程访问

文章目录 前言1. 本地部署AList2. AList挂载网盘3. 部署小雅alist3.1 Token获取3.2 部署小雅3.3 挂载小雅alist到AList中 4. Cpolar内网穿透安装5. 创建公网地址6. 配置固定公网地址 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff…

42.接雨水

42.接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1…

一文搞懂微服务架构之限流

前置知识 限流是通过限制住流量大小来保护系统&#xff0c;能够解决异常突发流量打崩系统的问题。例如常见的某个攻击者在攻击你维护的系统&#xff0c;那么限流就是极大程度上保护住你的系统。 算法 限流算法也可以像负载均衡算法那样&#xff0c;划分成静态算法和动态算法…

【Java】—— Java面向对象高级:关键字static的使用

目录 1. 关键字&#xff1a;static 1.1 类属性、类方法的设计思想 1.2 static关键字 1.3 静态变量 1.3.1 语法格式 1.3.2 静态变量的特点 1.4 静态方法 1.4.1 语法格式 1.4.2 静态方法的特点 1.5 练习 1. 关键字&#xff1a;static 回顾类中的实例变量&#xff08;即…

Android - Windows平台下Android Studio使用系统的代理

这应该是第一篇Android的博文吧。以后应该会陆续更新的。记录学习Android的点点滴滴。 之前也看过&#xff0c;不过看完书就忘了&#xff0c;现在重拾Android&#xff0c;记录学习历程。 为何要用代理 因为更新gradle太慢了。 如何使用系统的代理 先找到系统代理的ip和端口。…

C++学习笔记----6、内存管理(一)---- 使用动态内存(3)

3.2、对象数组 对象数组与原型/基础类型的数组没有什么不同&#xff0c;除了元素的初始化之外。当你使用new[N]去分配N个对象&#xff0c;就把N个连续的块空间分配出去了&#xff0c;每一个块空间可以放一个单独的对象。对于对象数组&#xff0c;New[]对每一个对象自动调用0参数…

激光雷达产品介绍

与传统激光雷达线性重复式的扫描方式不同&#xff0c;Livox mid系列激光雷达扫描路径不会重复。且视场中激光照射到的区域面积会随时间增大&#xff0c;这就意味着视场覆盖率随时间推移而显著提高。 内容参考自《解构大疆旗下 Livox Mid 激光雷达非重复扫描技术》作者&#xff…

【C++11(一)之入门基础)】

文章目录 C简介统一的列表初始化&#xff5b;&#xff5d;初始化 std::initializer_liststd::initializer_list是什么类型&#xff1a;std::initializer_list使用场景&#xff1a; 声明autodecltypenullptr STL中一些变化 C简介 在2003年C标准委员会曾经提交了一份技术勘误表(…

#ARM开发 笔记

课程介绍 ARM开发 --> Linux移植 --> 驱动开发 前后联系&#xff1a;ARM和系统移植为驱动开发学习做准备工作 所需知识&#xff1a;C语言基础及STM32需要的硬件知识 学习方法 学习流程、思想和解决问题的方法即可 知道驱动的基本框架以及基本开发要求 底层课程导学 接口技…

linux小程序-进度条

文章目录 pro.hpro.cmain.cmakefile测试 pro.h #pragma once#include <stdio.h>typedef void(*callback_t)(double, double);void probar(double total, double current);pro.c #include "pro.h" #include <string.h> #include <unistd.h> #defi…

webshell绕过样本初体验

目录 一&#xff1a;前景 二&#xff1a;样本 样本一&#xff1a; 样本二&#xff1a; 样本三&#xff1a; 样本4&#xff1a; 样本5&#xff1a; 一&#xff1a;前景 在我们日常的网站中百分之一百是存在一些安全设备来拦截我们的webshell的&#xff0c;一般情况…