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

相关文章

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Python实现自动化表单填写功能

《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码