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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
vuex与组件联合使用的方法
May 10 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 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 身份验证方面的函数
2009/10/11 PHP
php验证session无效的解决方法
2014/11/04 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
大一自我鉴定范文
2013/12/27 职场文书
公司办公室岗位职责
2014/03/19 职场文书
新法人代表任命书
2014/06/06 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
公司人力资源管理制度
2015/08/05 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python