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 EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
jquery.validate使用详解
Jun 02 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
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
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python实现双色球随机选号
2020/01/01 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
行政助理岗位职责
2013/11/10 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
银行简历自我评价
2014/02/11 职场文书
技能比武方案
2014/05/21 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
基于Redis位图实现用户签到功能
2021/05/08 Redis