Uni-App中的u-datetime-picker时间选择器Demo

2024-06-15 10:28

本文主要是介绍Uni-App中的u-datetime-picker时间选择器Demo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 前言
  • Demo

前言

对于网页端的推荐阅读:【ElementUI】详细分析DatePicker 日期选择器

事情起因是两个时间选择器同步了,本身是从后端慢慢步入全栈,对此将这个知识点从实战进行提炼

通过Demo进行总结

Demo

用于选择日期和时间的组件,在 Uni-App 框架中很常用,可以配置成多种模式,如日期选择、时间选择、日期时间选择等

以下是实战提炼的Demo:

<template><view><u-datetime-picker @confirm="dateTimePickerConfirm" @cancel="dateTimePicker = false":show="dateTimePicker" v-model="timeValue"ref="datetimePicker"mode="datetime"closeOnClickOverlay:defaultIndex="defaultTimeIndex"></u-datetime-picker><u-form-item @click="dateTimePicker = true" label="选择时间:" labelWidth="200rpx"><u--inputv-model="formattedTime"prefixIcon="calendar"readonly></u--input></u-form-item></view>
</template><script>
export default {data() {return {defaultTimeIndex: [], // 默认选中的时间索引,可以为空timeValue: Number(new Date()), // 当前时间的时间戳dateTimePicker: false, // 控制选择器的显示formattedTime: '' // 用于显示格式化后的时间}},methods: {formatDate(date) {const pad = (num) => (num < 10 ? '0' + num : num);const year = date.getFullYear();const month = pad(date.getMonth() + 1);const day = pad(date.getDate());const hours = pad(date.getHours());const minutes = pad(date.getMinutes());const seconds = pad(date.getSeconds());return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;},dateTimePickerConfirm(e) {this.dateTimePicker = false;const date = new Date(e.value);this.formattedTime = this.formatDate(date);}}
}
</script>

对应的解读如下:

  • show :控制选择器的显示状态。
  • v-model :绑定当前选中的时间值
  • mode :设置为 datetime,表示选择日期和时间
  • closeOnClickOverlay: 设置为 true,表示点击遮罩时关闭选择器。
  • @confirm :事件在确认选择时间时触发
  • @cancel :事件在取消选择时触发

对应的界面如下所示:

在这里插入图片描述

本文针对的是uni-app中的时间选择器:u-datetime-picker 官网解读

官网同样还有其他花里胡哨正常的选择:

在这里插入图片描述

这篇关于Uni-App中的u-datetime-picker时间选择器Demo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

go中的时间处理过程

《go中的时间处理过程》:本文主要介绍go中的时间处理过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 获取当前时间2 获取当前时间戳3 获取当前时间的字符串格式4 相互转化4.1 时间戳转时间字符串 (int64 > string)4.2 时间字符串转时间

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

利用Python实现时间序列动量策略

《利用Python实现时间序列动量策略》时间序列动量策略作为量化交易领域中最为持久且被深入研究的策略类型之一,其核心理念相对简明:对于显示上升趋势的资产建立多头头寸,对于呈现下降趋势的资产建立空头头寸... 目录引言传统策略面临的风险管理挑战波动率调整机制:实现风险标准化策略实施的技术细节波动率调整的战略价

Python日期和时间完全指南与实战

《Python日期和时间完全指南与实战》在软件开发领域,‌日期时间处理‌是贯穿系统设计全生命周期的重要基础能力,本文将深入解析Python日期时间的‌七大核心模块‌,通过‌企业级代码案例‌揭示最佳实践... 目录一、背景与核心价值二、核心模块详解与实战2.1 datetime模块四剑客2.2 时区处理黄金法

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增

Pandas进行周期与时间戳转换的方法

《Pandas进行周期与时间戳转换的方法》本教程将深入讲解如何在pandas中使用to_period()和to_timestamp()方法,完成时间戳与周期之间的转换,并结合实际应用场景展示这些方法的... 目录to_period() 时间戳转周期基本操作应用示例to_timestamp() 周期转时间戳基

JavaScript时间戳与时间的转化常用方法

《JavaScript时间戳与时间的转化常用方法》在JavaScript中,时间戳(Timestamp)通常指Unix时间戳,即从1970年1月1日00:00:00UTC到某个时间点经过的毫秒数,下面... 目录1. 获取当前时间戳2. 时间戳 → 时间对象3. 时间戳php → 格式化字符串4. 时间字符

Python datetime 模块概述及应用场景

《Pythondatetime模块概述及应用场景》Python的datetime模块是标准库中用于处理日期和时间的核心模块,本文给大家介绍Pythondatetime模块概述及应用场景,感兴趣的朋... 目录一、python datetime 模块概述二、datetime 模块核心类解析三、日期时间格式化与