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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
Js组件的一些写法
Sep 10 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
js+css实现导航效果实例
Feb 10 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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中的use关键字概述
2014/07/23 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
VBScript版代码高亮
2006/06/26 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
学期自我鉴定范文
2013/10/01 职场文书
小学生班会演讲稿
2014/01/09 职场文书
寒假实习自荐信
2014/01/26 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年父亲节寄语
2015/03/23 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
导游词之山海关
2019/12/10 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL