使用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和CSS速查手册
Aug 20 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
js onclick事件传参讲解
Nov 06 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
js格式化时间的简单实例
Nov 27 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
Js apply方法详解
2017/02/16 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
关于vue面试题汇总
2018/03/20 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python中xrange用法分析
2015/04/15 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
详解Python的三种可变参数
2019/05/08 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
详解python metaclass(元类)
2020/08/13 Python
档案接收函格式
2015/01/30 职场文书
世界遗产的导游词
2015/02/13 职场文书
应急管理工作总结2015
2015/05/04 职场文书
单位政审意见范文
2015/06/04 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Java 死锁解决方案
2022/05/11 Java/Android