使用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 相关文章推荐
关于javascript DOM事件模型的两件事
Jul 22 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
JS原型对象操作实例分析
Jun 06 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
Terran魔法科技
2020/03/14 星际争霸
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
php简单图像创建入门实例
2015/06/10 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
大专生自荐信
2013/10/04 职场文书
计算机应用专业毕业生求职信
2013/10/24 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
消防安全员岗位职责
2014/03/10 职场文书
村级四风对照检查材料
2014/08/24 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
身份证丢失证明
2015/06/19 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Python实现列表拼接和去重的三种方式
2021/07/02 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python中递归以及递归遍历目录详解
2021/10/24 Python