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 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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动态生成虚拟现实VRML网页
2006/10/09 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php去除数组中重复数据
2014/11/18 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
js实现抽奖效果
2017/03/27 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
简化vuex的状态管理方案的方法
2018/06/02 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue v-model的用法解析
2020/10/19 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
党校培训自我鉴定范文
2014/04/10 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
考勤制度通知
2015/04/25 职场文书
老乡会致辞
2015/07/28 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
MySQL 数据类型详情
2021/11/11 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python