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

首先官网地址: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‘] = value11 } else if (id.indexOf(‘end_time‘) >= 0) {12 act[‘end_time‘] = value13  }14  }15 });

 

 

相关文章