vue使用laydate时间插件的方法


Posted in Javascript onNovember 14, 2018

之前在做vue项目时使用iviewUI库中的DatePicker组件,发现DatePicker使用起来比较麻烦,尤其是对时间精确度上的限制不尽人意,操作起来也比较繁琐,总之在处理一系列时间组件相互联动上存在一大堆问题,比如

vue使用laydate时间插件的方法

DatePicker时间组件

时间精确到分,组件1的value等于组件2的最小值,组件2的vlaue等于组件3的最小值,。。。依次类推,如果是时间精确到日,这个组件没有任何问题,如果是精确到时分秒,这个组件的对时分秒的控制就不是那个灵敏了,在点击时分秒之后才能识别出对时分秒的限制,而这种用户体验不够友好。

所以,想到了以前用过的laydate时间插件

在vue中使用laydate

在vue组件中npm install laydate,然后在vue组件中直接引入:

import laydate from 'laydate'

然后在mounted中调用:

laydate.now();

发现chrome浏览器控制台中报错,laydate is not defined,然后把laydate.js放在静态资源里面引入:

import laydate from '../../static/js/laydate.js'

发现chrome浏览器控制台中依然是报错,laydate is not defined,然后在html入口文件中引入:

<script src="./src/static/js/laydate.js"></script>

发现chrome浏览器控制台中不报,laydate is not defined,但是又报另外一个错误:require is not defined,查看原码发现是因为laydate.js中在引用css样式表时未定义:require('./need/laydate.css');require('./skins/default/laydate.css'); 

最后使用laydate打包构建后的文件:dist/laydate/laydate.min.js,把laydate.min.js和css粘贴到src/static/路径下,注意js和css结构不要改变

<script src="./src/static/laydate/laydate.min.js"></script>

然后在chrome浏览器中成功打印出了laydate.now()的值:2018-10-21

然后使用import方式引入laydate.min.js:

import laydate from '../../static/laydate/laydate.min.js'

chrome控制台里有报错:laydate.now is not a function

原因时laydate.min.js是直接把laydate对象注册到了window上,本身并没有export default laydate出口,所以不能使用这种方式引用,应该使用:

import '../../static/laydate.min.js'

这样引用后,chrome中成功打印laydate.now(); 2018-10-21

或者在入口文件index.html中使用cdn加速方式引入laydate.min.js也是可以的:

<script src="https://cdn.jsdelivr.net/npm/laydate@1.0.7/dist/laydate.min.js"></script>

当然,如果项目中只是个别地方是使用到时间插件,建议采用import方式引入

laydate.min.js时间插件在vue组件中的使用方式

<template>
  <div id="laydateIndex">
    <div class="input-item">
      <label for="">请选择时间:</label>
      <input type='text' 
          name='houseChangeTime' 
          placeholder='请选择日期' 
          class='form-control' 
          onclick="laydate({ istime: true, format: 'YYYY/MM/DD hh:mm:ss' })" />
    </div>
    <div class="input-item">
      <label for="">开始时间:</label>
      <input type="text" name="" id="begintime" placeholder='请选择日期'>
    </div>
    <div class="input-item">
      <label for="">结束时间:</label>
      <input type="text" name="" id="endtime" placeholder='请选择日期'>
    </div>
  </div>
</template>
<script>
  import '../../assets/js/laydate.min.js'
  export default {
    name: 'laydateIndex',
    data () {
      return {
        begintime: '',
        endtime: '',
        start_time: '',
      }
    },
    methods: {
      setBeginTime () {
        var _this = this;
        var mintime = laydate.now(0, 'YYYY-MM-DD hh:mm:ss');
        _this.$data.begintime = mintime;
        _this.$data.endtime = mintime;
        var begintiem_options = {
          elem: '#begintime',
          format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义
          event: 'click', //触发事件
          istime: true, //是否开启时间选择
          isclear: true, //是否显示清空
          issure: true, //是否显示确认
          festival: true, //是否显示节日
          min: mintime, //最小日期
          max: '2099-12-31 23:59:59', //最大日期
          start: mintime, //开始日期
          fixed: true, //是否固定在可视区域
          zIndex: 99999999, //css z-index
          choose: function(dates) { // 选择日期完毕的回调
            endtime_options.start = dates;
            endtime_options.min = dates;
            _this.$data.begintime = dates;
            _this.$data.endtime = dates;
          }
        };
 
        var endtime_options = {
          elem: '#endtime',
          format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义
          event: 'click', //触发事件
          istime: true, //是否开启时间选择
          isclear: true, //是否显示清空
          issure: true, //是否显示确认
          festival: true, //是否显示节日
          min: _this.$data.begintime, //最小日期
          max: '2099-12-31 23:59:59', //最大日期
          start: _this.$data.begintime, //开始日期
          fixed: true, //是否固定在可视区域
          zIndex: 99999999, //css z-index
          choose: function(dates) { // 选择日期完毕的回调
            // this.begintiem_options = dates;
          }
        };
 
        laydate(begintiem_options);
        laydate(endtime_options);
        
      },
      initPage () {
        var _this = this;
        _this.setBeginTime();
      },
    },
    mounted () {
      this.initPage();
    },
  }
</script>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
javascript中的面向对象
Mar 30 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
js使用Promise实现简单的Ajax缓存
Nov 14 #Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 #Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 #Javascript
React和Vue中监听变量变化的方法
Nov 14 #Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 #Javascript
js html实现计算器功能
Nov 13 #Javascript
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python实现ftp文件传输功能
2020/03/20 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
2015年世界水日活动总结
2015/02/09 职场文书
团员个人年度总结
2015/02/26 职场文书
会计求职信怎么写
2015/03/20 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS