使用Vant完成DatetimePicker 日期的选择器操作


Posted in Javascript onNovember 12, 2020

效果展示:

使用Vant完成DatetimePicker 日期的选择器操作

代码展示:

<template>
 <div id="date_time_picker">
 
 <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button>
 <van-field v-model="timeValue" placeholder="选择的日期结果" readonly />
 <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
 <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
 </van-popup>
 
 </div>
</template>
<script>
 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());
 }
 }
</script>
 
<style>
</style>

注意:如果是按需引入的话,记得在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的官方文档后,十分觉得里面说的太过简洁,让我看的很迷:

第一点看不懂的是明明例子都有写出来了,代码还没有贴出来,只贴出了基本的例子的代码:

使用Vant完成DatetimePicker 日期的选择器操作

下面这个代码:

使用Vant完成DatetimePicker 日期的选择器操作

效果也不是上图的效果;

一些参数的解释让我也饶了一大圈,才成功通过改这些参数,成功弄成这个样式出来

会让人误会的说明:

使用Vant完成DatetimePicker 日期的选择器操作

后面我把这个type改成year-month-time就可以了,具体代码如下:

<van-datetime-picker
       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而已):

使用Vant完成DatetimePicker 日期的选择器操作

解决方案:使用里面的event.detail来调用getValues(),而不能使用event.getValues().

onChange(event){
 this.setData({
  reserveCopyTime:event.detail.getValues(),
 })
  
 },

以上这篇使用Vant完成DatetimePicker 日期的选择器操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
js实现前端分页页码管理
Jan 06 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 #Javascript
vant 中van-list的用法说明
Nov 11 #Javascript
让Vue响应Map或Set的变化操作
Nov 11 #Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 #Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 #Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 #Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
重定向实现代码
2006/11/20 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python处理“
2019/06/10 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
班主任新年寄语
2014/04/04 职场文书
小学班级特色活动方案
2014/08/31 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
销售员岗位职责
2015/02/10 职场文书
财务会计求职信范文
2015/03/20 职场文书