使用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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
package.json各个属性说明详解
Mar 11 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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引用地址改变变量值的问题
2012/03/23 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
iphone刘海屏页面适配方法
2019/05/07 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
争论的故事教学反思
2014/02/06 职场文书
优秀团队获奖感言
2014/02/19 职场文书
法制宣传标语集锦
2014/06/25 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
微信搭讪开场白
2015/05/28 职场文书
董事长新年致辞
2015/07/29 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python