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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
vue实现树形菜单效果
Mar 19 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
JS获取当前时间戳方法解析
2020/08/29 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python通过zabbix api获取主机
2018/09/17 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python修改字典键(key)的方法
2019/08/05 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
opencv+python实现均值滤波
2020/02/19 Python
pycharm的python_stubs问题
2020/04/08 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
销售工作人员的自我评价分享
2013/11/10 职场文书
银行办理业务介绍信
2014/01/18 职场文书
关于环保的演讲稿
2014/05/10 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python