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 相关文章推荐
js 获取和设置css3 属性值的实现方法
May 06 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
javascript实现拖放效果
Dec 16 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
去除html代码里面的script正则方法
May 19 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
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的库,结果发现很多东西
2006/12/31 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP cron中的批处理
2008/09/16 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python3标准库总结
2019/02/19 Python
python实现复制大量文件功能
2019/08/31 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python圣诞树编写实例详解
2020/02/13 Python
python如何写try语句
2020/07/14 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
某学校的2019年度工作报告范本
2019/10/11 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL