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 相关文章推荐
Javascript的匿名函数小结
Dec 31 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
js正则相关知识点专题
May 10 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
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/12/06 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
分享vue里swiper的一些坑
2018/08/30 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
js实现时分秒倒计时
2019/12/03 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python单例模式实例分析
2015/01/14 Python
Python的time模块中的常用方法整理
2015/06/18 Python
python构建自定义回调函数详解
2017/06/20 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python爬虫爬取网页表格数据
2018/03/07 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python实现的Iou与Giou代码
2020/01/18 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
python3实现飞机大战
2020/11/29 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
C#面试常见问题
2013/02/25 面试题
幼儿园教师培训制度
2014/01/16 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python