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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
PHP中的正规表达式(二)
2006/10/09 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
json跟xml的对比分析
2008/06/10 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python新手实现2048小游戏
2015/03/31 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python抖音表白程序源代码
2019/04/07 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
专升本自我鉴定
2013/10/10 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
银行内勤岗位职责
2014/04/09 职场文书
2014年药房工作总结
2014/11/22 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
2016十一国庆节感言
2015/12/09 职场文书