首先官网地址: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 ??????});
前端组件:超好用的日期选择器,支持全部日期格式已经Vue.js中的使用
原文地址:https://www.cnblogs.com/lelexiu/p/10300784.html