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 源码分析笔记(3) Deferred机制
Jun 19 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
吨的认识教学反思
2014/04/27 职场文书
劳动竞赛口号
2014/06/16 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书