vant显示日期格式_使用Vant完成DatetimePicker 日期的选择器操作
效果展示:
代码展示:
点击选择日期
export default {
data() {
return {
msg: '',
currentDate: new Date(),
changeDate: new Date(),
show: false, // 用来显示弹出层
timeValue: ''
}
},
methods: {
showPopFn() {
this.show = true;
},
showPopup() {
this.show = true;
},
changeFn() { // 值变化是触发
this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
},
confirmFn() { // 确定按钮
this.timeValue = this.timeFormat(this.currentDate);
this.show = false;
},
cancelFn(){
this.show = true;
},
timeFormat(time) { // 时间格式化 2019-09-08
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
return year + '年' + month + '月' + day + '日'
}
},
mounted() {
this.timeFormat(new Date());
}
}
注意:如果是按需引入的话,记得在main.js里面引入相应的文件奥。
// main.js文件里面的部分代码
import {Button} from 'vant'
import { DatetimePicker } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant';
Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Field);
---------完。
补充知识:小程序使用vant组件库里的DatetimePicker 时间选择的使用,以及如何使用里面的函数
小程序使用vant组件库里的DatetimePicker 时间选择的使用(困扰我最大的坑,听我慢慢细说)?
由于我想要在小程序里加入vant库的时间选择器,看了一下vant的官方文档后,十分觉得里面说的太过简洁,让我看的很迷:
第一点看不懂的是明明例子都有写出来了,代码还没有贴出来,只贴出了基本的例子的代码:
下面这个代码:
效果也不是上图的效果;
一些参数的解释让我也饶了一大圈,才成功通过改这些参数,成功弄成这个样式出来
会让人误会的说明:
后面我把这个type改成year-month-time就可以了,具体代码如下:
type="year-month-time"
value="{{ currentDate }}"
min-date="{{ minDate }}"
bind:input="onInput"
bind:confirm="onConfirm"
bind:change="onChange"
/>
data:{
minHour: 0,
maxHour: 24,
minDate: new Date().getTime(),
currentDate: new Date().getTime(),
}
onInput(event) {
this.setData({
currentDate: event.detail,
});
},
就可以呈现出上面那种效果了。
第二点看不懂的是:如何使用change里的函数(文档里面也没有例子,也没有说明,而网上大部分都是网页来使用,半点没有涉及到小程序的,就算有涉及到,也是乱说的,或者是如何使用vant而已):
解决方案:使用里面的event.detail来调用getValues(),而不能使用event.getValues().
onChange(event){
this.setData({
reserveCopyTime:event.detail.getValues(),
})
},
以上这篇使用Vant完成DatetimePicker 日期的选择器操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
vant显示日期格式_使用Vant完成DatetimePicker 日期的选择器操作相关推荐
- wps斜杠日期格式_在WPS表格中轻松统一日期格式
平常办公中经常需要收集汇总下级各部门上报的数据表格.由于各部门输入人员并没有按统一标准格式输入日期,汇总数据之后往往会发现汇总数据中的日期有很多种格式.除了2009-2-3.1978年5月6日等标准格 ...
- java中日期格式的转换_java中定义日期格式的转换符
Hi,大家好久不见,今天我们在这里给大家介绍一下关于Java的小知识,在Java中定义日期格式的转换符,至于运用呢就不和大家做介绍了:接下来就给大家详细介绍一下如何实现. 那我们该如何创建使用呢?首先 ...
- java 解析日期格式_日期/时间格式/解析,Java 8样式
java 解析日期格式 自Java 几乎 开始以来,Java开发人员就通过java.util.Date类(自JDK 1.0起)和java.util.Calendar类(自JDK 1.1起 )来处理日期 ...
- 计算机 无法更改时间格式,如何修改电脑日期格式_如何修改日期格式
2016-12-06 08:03:47 方法一: 1.适合windows xp系统 鼠标右击电脑任务栏/选择"属性"/选择"任务栏"选项卡/在"通知区 ...
- sas数字转日期格式_[转载]SAS中日期转换全攻略
以下的内容,要感谢 webgu 在人大论坛上的亲情奉献. 在SAS处理中,特别是在多个数据集合并过程中,我们经常要遇到 日期格式不匹配的情况,但是 日期 又是一个非常关键的 匹配关键词,所以有必要 将 ...
- pb 导出文件 日期格式_「案例分享」ERP系统导出数据注意事项
古哥辅导的企业大多都上了ERP,但有些共同点就是ERP没有用好,或者没有发挥ERP的最强大功能,这里分享其中一类问题,就是从系统中导出的数据格式太多,占用空间太大,运行速度太慢等等的问题:如何解决呢? ...
- wps斜杠日期格式_使用WPS处理日期数据格式的方法
在行政工作中,处理日期数据的时候,是不是尤其苦恼呢,因为有的人将日期填写为:1998.12.13,19981213,1998 12 13--,为了数据的规范与统一,需要我们进行整理,可是手工一个个去核 ...
- wps斜杠日期格式_运用WPS处理日期数据格式的方法 wps日期格式设置的技巧
运用WPS处理日期数据格式的方法 wps日期格式设置的技巧 为你介绍实用wps教程,如果快速掌握wps?为你整理经典实用的wps教程,图文并茂,希望能给读者们一些帮助. 在行政工作中,处理日期数据的时 ...
- wps斜杠日期格式_运用WPS处理日期数据格式的方法
运用WPS处理日期数据格式的方法 在行政工作中,处理日期数据的时候,是不是尤其苦恼呢,因为有的.人将日期填写为:1998.12.13,19981213,1998 12 13,为了数据的规范与统一,需要 ...
- oracle数据库日期格式的运算,修改oracle数据库日期格式
ORACLE SQL Developer日期显示格式设置 原文:ORACLE SQL Developer日期显示格式设置 ORACLE的SQL Developer工具默认的日期格式DD-MON-RR, ...
最新文章
- 微软AI要参加IMO竞赛!小目标:数学金牌
- 实验18:使用@Autowired注解实现根据类型实现自动装配★
- 关键词词云怎么做_制作CVPR 热词云(并爬取pdf地址 名称)
- 3.1 SVM原理入门
- 订阅号 图文回复php,微信开发(PHP实现订阅号的公众号配置和自动回复)
- SQLServer2008-镜像数据库实施手册(双机)SQL-Server2014同样适用
- html设置顶部对齐,HTML / CSS文本从div顶部对齐
- linux操作系统之竞态条件(时序竞态)
- Java常用设计模式——观察者模式
- 【机器学习】机器学习从零到掌握之五 -- 教你使用归一化数值准备数据
- 怎么用ubuntu进入python_ubuntu 下python环境的切换使用
- 计算机调试致sa登录失败,无法打开登录 'xxxx' 中请求的数据库。登录失败。用户 'sa' 登录失败。解决思路...
- 通证指数:ChaiNext系列指数基金上线
- 【行业专题报告】食品饮料、休闲零食、咖啡茶饮-专题资料
- abaqus算出来的转角单位是什么_ABAQUS统一单位方法
- SQL Server 2008 修改安装路径
- 新手如何做好网络营销
- 电路原理笔记整理_【盛世清北】2021清华大学827电路原理考研笔记-清华考研辅导班...
- 使用Python获取最新疫情数据,制作可视化动态地图,实时展示各地情况
- C语言实现简单的ai麻将对局(较大工程,持续更新ing)