Vue 用Vant实现时间选择器的示例代码


Posted in Javascript onOctober 25, 2019

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker

引入Vant中DatetimePicker组件(全局引入后可直接使用)

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

关键使用代码(结合vant组件Popup的底部弹出层一起使用)

<van-popup v-model="dateShow" position="bottom">
   <van-datetime-picker v-model="currentDate" type="year-month" @cancel="handleCancel"
    @confirm="handleEndDateConfirm" />
  </van-popup>

export default {
 data() {
  return {
   dateShow: false,
   currentDate: new Date()
  };
 }
}

效果图

Vue 用Vant实现时间选择器的示例代码

实现点击确定 和取消的方法

handleCancel () {
   this.dateShow = false;
  },
  //开始时间
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
js 动态选中下拉框
Nov 26 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
JS实现简单tab选项卡切换
Oct 25 #Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 #Javascript
JS实现骰子3D旋转效果
Oct 24 #Javascript
Vue可自定义tab组件用法实例
Oct 24 #Javascript
js实现转动骰子模型
Oct 24 #Javascript
You might like
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python可以用哪些数据库
2020/06/22 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
五一手机促销方案
2014/03/08 职场文书
计生专干事迹
2014/05/28 职场文书
人生遥控器观后感
2015/06/11 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
初中美术教学反思
2016/02/17 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
MySQL数据库事务的四大特性
2022/04/20 MySQL