mint-ui 时间插件使用及获取选择值的方法


Posted in Javascript onFebruary 09, 2018

如下所示:

<div > {{pickerValue}}</div>
<mt-datetime-picker
 ref="picker" 每一个都要填上这一条open
 type="time"
 @confirm="handleConfirm" 设置点击确定
 v-model="pickerValue">
</mt-datetime-picker>
data () {
 return {
 pickerValue:null, 定义
methods:{
openPicker() {
 this.$refs.picker.open();设置开始
 },
handleConfirm(){ console.log(this.pickerValue) ;获取值},

转换小时

formatDate(date) {
 const y = date.getFullYear()
 let m = date.getMonth() + 1
 m = m < 10 ? '0' + m : m
 let d = date.getDate()
 d = d < 10 ? ('0' + d) : d
 return y + ' ' + m + ' ' + d
},
handleConfirm(){
 let a = this.pickerValue
 // console.log(a.split(" ")) ;
 this.zheng=this.formatDate(this.$refs.picker.value)
 console.log(this.formatDate(this.$refs.picker.value))
 // console.log(this.value) ;
},

设置当前日期为初始日期

<mt-datetime-picker :startDate="startDate"</mt-datetime-picker>

data(){
 return{
  startDate: new Date(),
 }
}

设置默认值

this.zheng=new Date().getFullYear()+'年'+new Date().getMonth()+1+'月'+new Date().getDate()+'日'

以上这篇mint-ui 时间插件使用及获取选择值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
javascript打印输出json实例
Nov 11 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 #Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 #Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 #Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 #Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 #Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 #Javascript
vue二级路由设置方法
Feb 09 #Javascript
You might like
网络资源
2006/10/09 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python打包成so文件过程解析
2019/09/28 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
护理职业应聘自荐书
2013/09/29 职场文书
应聘护士自荐信
2013/10/21 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
世界遗产导游词
2015/02/13 职场文书
在职证明书模板
2015/06/15 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技