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的12个网站推荐
Apr 28 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
express框架下使用session的方法
Jul 31 Javascript
vue 中 命名视图的用法实例详解
Aug 14 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生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Vue实现验证码功能
2019/12/03 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
速记Python布尔值
2017/11/09 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python 实现识别图片上的数字
2019/07/30 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
财经学院自荐信范文
2014/02/02 职场文书
指导教师评语
2014/04/26 职场文书
维修工先进事迹
2014/05/29 职场文书
捐款感谢信
2015/01/20 职场文书
西游降魔篇观后感
2015/06/15 职场文书
如何撰写创业策划书
2019/06/27 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript