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 继承详解(四)
Jul 13 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
html中table数据排序的js代码
Aug 09 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 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
php实现rc4加密算法代码
2012/04/25 PHP
php导入导出excel实例
2013/10/25 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
中止javascript执行的方法
2014/02/14 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
有多年工作经验的自我评价
2014/03/02 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
寒假安全保证书
2015/02/28 职场文书
民政工作个人总结
2015/02/28 职场文书
校运会广播稿
2015/08/19 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python