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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
使用python3实现操作串口详解
2019/01/01 Python
Python制作动态字符图的实例
2019/01/27 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python math模块的基本使用教程
2021/01/16 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
党支部书记岗位责任制
2014/02/11 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
校园安全演讲稿
2014/05/09 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
教师群众路线心得体会
2014/11/04 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
商务宴会祝酒词
2015/08/11 职场文书
iPhone13再次曝光
2021/04/15 数码科技