前端组件：超好用的日期选择器，支持全部日期格式已经Vue.js中的使用

Posted 2021-02-05 lelexiu

首先官网地址：https://www.layui.com/laydate/ 高达11w的下载量

效果：

 

怎么使用这个呢？

首先当然就是导包了，自己去官网下哈

需要主注意的是，

laydate.js 和theme文件下要放在同一级目录，自己也可以在laydate.js搜索关键字 theme 去修改对应路径，为了省去麻烦咋们就直接放在同级目录。

一般js的使用

Date.prototype.Format = function (formatStr) {
            var str = formatStr;
            var Week = [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘];

            str = str.replace(/yyyy|YYYY/, this.getFullYear());
            str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : ‘0‘ + (this.getYear() % 100));

            str = str.replace(/MM/, this.getMonth() > 9 ? this.getMonth().toString() : ‘0‘ + this.getMonth());
            str = str.replace(/M/g, this.getMonth());

            str = str.replace(/w|W/g, Week[this.getDay()]);

            str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : ‘0‘ + this.getDate());
            str = str.replace(/d|D/g, this.getDate());

            str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : ‘0‘ + this.getHours());
            str = str.replace(/h|H/g, this.getHours());
            str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : ‘0‘ + this.getMinutes());
            str = str.replace(/m/g, this.getMinutes());

            str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : ‘0‘ + this.getSeconds());
            str = str.replace(/s|S/g, this.getSeconds());

            return str;
        }

laydate.render({
      elem: ‘#xxx‘,
      format: ‘yyyy-MM-dd‘,
      start: new Date().Format(‘yyyy-MM-dd‘),//设置开始时间为今天
       });

在Vue.js中使用,在回调函数中去手动设置act[‘start_time‘] = value,act是Vue的data中的数据，

关键一点下面代码需要写在Vue的方法里面进行初始化

 1 laydate.render({
 2       elem: ‘#xxxx‘,
 3       type: ‘datetime‘,
 4       format: ‘yyyy-MM-dd HH‘,
 5       start: new Date().Format(‘yyyy-MM-dd HH‘),
 6       done: function (value, date, endDate) {
 7           console.log(id, id.indexOf(‘start_time‘)); //在控件上弹出value值
 8           console.log(id, id.indexOf(‘end_time‘)); //在控件上弹出value值
 9           if (id.indexOf(‘start_time‘) >= 0) {
10                 act[‘start_time‘] = value
11            } else if (id.indexOf(‘end_time‘) >= 0) {
12                 act[‘end_time‘] = value
13             }
14           }
15       });