首先官網地址：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       });

前端組件：超好用的日期選擇器，支持全部日期格式已經Vue.js中的使用