layui时间选择器选择周和季度

最近一个后台管理页面数据查询时间间隔要有：日，周，月，季度，年；UI组件我们用的layui，官方dome只有日月年（直接去ctrl+c ctrl+v就好了，在这就不多说了）；So我们要自定义周和季度，直接上代码：

组件引用：（记得换成你的地址）

 <!-- layui框架样式 --><link type="text/css" href="/static/plugins/layui/css/layui.css" rel="stylesheet" /><!-- layui框架js --><script type="text/javascript" src="/static/plugins/layui/layui.js"></script>

html：

 <div class=" layui-form-item"><div class="layui-inline layui-form"><div class="layui-input-inline"><select name="type" id="selectedOption" lay-filter="college"><option value="day" selected="selected">按日统计</option><option value="week">按周统计</option><option value="month">按月统计</option><option value="quarter">按季度统计</option><option value="year">按年统计</option></select></div><label class="layui-inline" id="worldlable" style="width: 190px;"><input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off"></label></div></div>

js：

周：用的时间区间的，选择任意日期，显示选择日期的周，例：选择 2020-08-05 显示 2020-08-03~2020-08-09；因为我们这边后台定的请求数据格式是：xxxx-xx （2020年-18周）就去网上荡了个日期转为周的；
季度：这个有点取巧的，用的是月份的取前面4个月份改了下文字；

    layui.use(['form', 'upload', 'layer', 'laydate', 'jquery'], function () {let form = layui.form;let layer = layui.layer;let laydate = layui.laydate;laydate.render({elem: '#worldId',max: genTime('day'),value: genTime('day'),type: 'date'});form.on('select(college)', function (data) {let opt = $("#selectedOption").val();let ele = $("#selectedOption");$("#worldId").remove();$("#worldlable").html('<input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');// 月if (opt == "month") {laydate.render({elem: '#worldId',type: 'month',max: genTime('month'),value: genTime('month'),btns: ['clear', 'confirm']});// 日} else if (opt == "day") {  laydate.render({elem: '#worldId',type: 'date',max: genTime('day'),value: genTime('day'),btns: ['clear', 'confirm']});// 周} else if (opt == "week") {renderWeekDate('#worldId', '');// 季度} else if (opt == "quarter") {renderSeasonDate('#worldId', '');// 年} else if (opt == "year") {laydate.render({elem: '#worldId',type: 'year',max: genTime('day'),value: genTime('year'),btns: ['clear', 'confirm']});}});// 周function renderWeekDate(ohd, sgl) {let ele = $(ohd);laydate.render({elem: ohd,type: 'date',max: genTime('day'),format: "yyyy-MM-dd~yyyy-MM-dd",btns: ['clear', 'confirm'],done: function (value, date, endDate) {if (value != "" && value.length > 0) {let today = new Date(value.substring(0, 10));let weekday = today.getDay();let monday;let sunday;if (weekday == 0) {monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());} else {monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());}if (weekday == 0) {sunday = today;} else {sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());}let month = monday.getMonth() + 1;if (month < 10) {month = "0" + month;}let day1 = monday.getDate();if (day1 < 10) {day1 = "0" + day1;}let start = "" + monday.getFullYear() + "-" + month + "-" + day1;let month2 = sunday.getMonth() + 1;if (month2 < 10) {month2 = "0" + month2;}let day2 = sunday.getDate();if (day2 < 10) {day2 = "0" + day2;}let end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;ele.val(start + "~" + end);} else {ele.val('');}}});}// 季度function renderSeasonDate(ohd, sgl) {let ele = $(ohd);laydate.render({elem: ohd,type: 'month',format: 'yyyy-M',btns: ['clear', 'confirm'],ready: function (value, date, endDate) {let hd = $("#layui-laydate" + ele.attr("lay-key"));if (hd.length > 0) {hd.click(function () {quarter($(this));});}quarter(hd);},done: function (value, date, endDate) {if (!isNull(date) && date.month > 0 && date.month < 5) {ele.attr("startDate", date.year + "-" + date.month);} else {ele.attr("startDate", "");}if (!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {ele.attr("endDate", endDate.year + "-" + endDate.month)} else {ele.attr("endDate", "");}}});}});function genTime(opt) {let now = new Date();let year = now.getFullYear();let mth = now.getMonth();let day = now.getDate();let month = mth + 1;if (month < 10) {month = '0' + month}if (day < 10) {day = '0' + day}let str;if (opt == 'day') {str = year + '-' + month + '-' + day;} else if (opt == 'month') {str = year + '-' + month;}return str;}function quarter(thiz) {let mls = thiz.find(".laydate-month-list");mls.each(function (i, e) {$(this).find("li").each(function (inx, ele) {let cx = ele.innerHTML;if (inx < 4) {ele.innerHTML = cx.replace(/月/g, "季度");} else {ele.style.display = "none";}});});}function isNull(quarter) {if (quarter == null || typeof (quarter) == "undefined" || quarter == "") return true;return false;}/*** 日期转为周 格式2020-07-14* @param {String} dateString 日期*/function getYearWeek(dateString) {let da = dateString;//日期格式2015-12-30//当前日期let date1 = new Date(da.substring(0, 4), parseInt(da.substring(5, 7)) - 1, da.substring(8, 10));//1月1号let date2 = new Date(da.substring(0, 4), 0, 1);//获取1月1号星期（以周一为第一天，0周一~6周日）let dateWeekNum = date2.getDay() - 1;if (dateWeekNum < 0) { dateWeekNum = 6; }if (dateWeekNum < 4) {//前移日期date2.setDate(date2.getDate() - dateWeekNum);} else {//后移日期date2.setDate(date2.getDate() + 7 - dateWeekNum);}let d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);if (d < 0) {let date3 = (date1.getFullYear() - 1) + "-12-31";return getYearWeek(date3);} else {//得到年数周数let year = date1.getFullYear();let week = Math.ceil((d + 1) / 7);return year + "-" + week;}}

番外篇：

还是那句话万一一不小心对你有点用，点个赞！谢谢了！~

layui时间选择器选择周和季度相关推荐

Layui时间选择器，Layui时间控件选择时间范围的方法
官方文档:https://www.layui.site/doc/modules/laydate.html 通用时间渲染函数 function renderTime(elem, type, value, ...
layui时间选择器点击事件
问题最近写了一个项目用到了layui框架,其中在用到时间选择器控件的时候想做一个点击一个时间可以触发一个事件,然后这个事件可以获取点击的时间,最终通过获取的时间来进行数据库查找,但是无奈怎样也触发不 ...
elementUI的时间选择器-选择日期范围，选择时间后获取时间的格式问题
选择日期范围: value-format="yyyy-MM-dd" //加上这行代码,不然获取的时间格式用不了 <el-date-pickerv-model="sh ...
layui 时间选择器
<div class="layui-col-xs8"><div class="layui-inline"><label>开始 ...
bootstrap时间选择器-datetimepicker
接上一篇文章,写引用不同的js的时间选择器,参考连接:https://github.com/uxsolutions/bootstrap-datepicker 引入连接为: <link href= ...
element-UI组件之日期时间选择器与时间格式转化
element-UI组件之日期时间选择器与时间格式转化日期选择器与时间选择器的一般使用日期时间选择器选择日期时间点选择日期范围日期选择器月份范围选择器禁选日期用time.getTime ...
使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器
一.再layui官网上查看数据表格的使用方式查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器以图 ...
Layui时间插件laydate只选择时分
一.说明二.分析三.效果四.代码一.说明需要一个只选择时分的控件,首先想到的是laydate,然后看一下控件的类型 type 可选值名称用途 year 年选择器只提供年列表选择 mon ...
my97DatePicker选择年、季度、月、周、日
一直以来,用的最多的就是my97DatePicker获得年月日的方法,今天突然逛到了这篇文章,留下来,以备以后使用自己写的一个:获取年月,并从下个月开始计算 [html] view plain co ...

layui时间选择器选择周和季度

layui时间选择器选择周和季度

组件引用：（记得换成你的地址）

html：

js：

番外篇：

layui时间选择器选择周和季度相关推荐

最新文章

热门文章