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

2024-09-04 00:20

本文主要是介绍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: 定义选择器的样式,设置内边距、背景颜色和文本对齐方式。

这篇关于uniapp写的一个年月日时分秒时间选择功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1134464

相关文章

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

《Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码》:本文主要介绍Java中日期时间转换的多种方法,包括将Date转换为LocalD... 目录一、Date转LocalDateTime二、Date转LocalDate三、LocalDateTim

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件