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学习笔记(七) js函数介绍
Jun 19 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
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
php的一个登录的类 [推荐]
2007/03/16 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
Python格式化输出%s和%d
2018/05/07 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python实现猜拳游戏
2020/03/04 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
我未来的职业规划范文
2014/01/11 职场文书
HR求职自荐信范文
2014/06/21 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
python turtle绘图命令及案例
2021/11/23 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
MySQL事务的隔离级别详情
2022/07/15 MySQL