Mint-UI时间组件起始时间问题及时间插件使用


Posted in Javascript onAugust 20, 2018

在使用Mint-UI的时候,官方的demo是这样的

<template>
 <mt-datetime-picker
 ref="picker"
 type="time"
 v-model="pickerValue">
 </mt-datetime-picker>
</template>
<script>
 export default {
 methods: {
  openPicker() {
  this.$refs.picker.open();
  }
 }
 };
</script>

       而起始时间默认是十年前的1月1日,但正常我们的需求都会是超过这个时间的,那我们怎么来的自定义起始时间呢?我当时碰到这个需求,发现官方文档并没有说明,百度一遍之后也没有发现相关的文章。经过自己摸索,把自己的方法写出来,给有需要同学参考一下。

       在mt-datetime-picker可以添加startDateendDate,startDate就是控制起始时间的,如果我们直接设置时间格式字符串,例如2018-08-20,是不行的,代码会报错。然后根据报错的原因发现,传入startDate的值必须是Date类型,所以需要在设置的时间前面加上new Date(设置的时间),这样就可以了。

PS:mint-ui 时间插件使用及获取选择值的方法

如下所示:

<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中通过父级查找进行定位示例
Jun 28 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
vue监听对象及对象属性问题
Aug 20 #Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 #Javascript
Vue插件打包与发布的方法示例
Aug 20 #Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 #Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 #Javascript
Vue2.0生命周期的理解
Aug 20 #Javascript
You might like
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
Javascript 面向对象特性
2009/12/28 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
Python中正则表达式详解
2017/05/17 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
金融管理应届生求职信
2014/02/20 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
部门年终奖分配方案
2014/05/07 职场文书
销售员岗位职责
2014/06/09 职场文书
辞职申请书范本
2019/05/20 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python