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

相关文章

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

JavaFX应用更新检测功能(在线自动更新方案)

JavaFX开发的桌面应用属于C端,一般来说需要版本检测和自动更新功能,这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤: 读取本地应用版本拉取远程版本并比较两个版本如果需要升级,那么拉取更新历史弹出升级控制窗口用户选择升级时,拉取升级包解压,重启应用用户选择忽略时,本地版本标志为忽略版本用户选择取消时,隐藏升级控制窗口 2.

如何选择SDR无线图传方案

在开源软件定义无线电(SDR)领域,有几个项目提供了无线图传的解决方案。以下是一些开源SDR无线图传方案: 1. **OpenHD**:这是一个远程高清数字图像传输的开源解决方案,它使用SDR技术来实现高清视频的无线传输。OpenHD项目提供了一个完整的工具链,包括发射器和接收器的硬件设计以及相应的软件。 2. **USRP(Universal Software Radio Periphera