(function ($, ht) {"use strict";$.extend(ht, {clickTimeRange:function(){//点击重置按钮，时间文本框内容清空$('#btnClear').on('click', function () {$('#selectedInfo').text('')$('.selectInfo ul li').removeClass('selectActive');$('.selectMenu li').removeClass('selectActive');$('.selectMenu li').eq(0).addClass('selectActive');$('#timeStart').val('');$('#timeEnd').val('');})//加载时间选择--年份下拉的optionvar myDate = new Date();var yearOption = ``;for (var i = -1; i < 4; i++) {if (i == 0) {yearOption += `<option vlaue="${myDate.getFullYear() - i}" selected = "selected">${myDate.getFullYear() - i}</option>`} else {yearOption += `<option vlaue="${myDate.getFullYear() - i}">${myDate.getFullYear() - i}</option>`}};$("#selectYear").append(yearOption);//选择时间类型$('.selectMenu li').on('click', function () {$(this).addClass('selectActive').siblings().removeClass('selectActive');let thisText = $(this).text();switch (thisText) {case '常用':$('.selectInfo_common').show().siblings().hide();break;case '月份':$('.selectInfo_month').show().siblings().hide();break;case '季度':$('.selectInfo_quarter').show().siblings().hide();break;case '半年':$('.selectInfo_halfofyear').show().siblings().hide();break;default:$('.selectInfo_thisyear').show().siblings().hide();break;}});//点击常用的选择$('.selectInfo_common ul li').on('click', function () {$('.selectInfo ul li').removeClass('selectActive')$(this).addClass('selectActive');$('#timeStart').val('');$('#timeEnd').val('');$('#selectedInfo').text($(this).text());});//点击其他的并显示时间$('.selectInfo_month ul li,.selectInfo_quarter ul li,.selectInfo_halfofyear ul li,.selectInfo_thisyear ul li').on('click', function () {$('.selectInfo ul li').removeClass('selectActive')$(this).addClass('selectActive');let optionInfo = $('#selectYear').val();$('#timeStart').val('');$('#timeEnd').val('');$('#selectedInfo').attr('data-year', optionInfo);$('#selectedInfo').text(optionInfo + ' 年 ' + $(this).text());});//时间详细点击添加到显示信息中$('#selectedInfo').click(function () {if ($('.SelectInfo_box').css('display') == 'none') {$('.SelectInfo_box').show();} else {$('.SelectInfo_box').hide();}});//面板确定$('#btn_makesure').click(function () {var timeStart = $('#timeStart').val();var timeEnd = $('#timeEnd').val();if (timeStart || timeEnd) {if (new Date(timeStart) > new Date(timeEnd)) {layer.alert('结束时间不能早于开始时间')return false}$('.selectItem ul li').removeClass('selectActive');//li 内选中的去除$('.selectMenu li').removeClass('selectActive');$('.selectMenu li').eq(0).addClass('selectActive');$('#selectedInfo').text(timeStart + '至' + timeEnd);StartDate = timeStartEndDate = timeEnd} else {for (var i = 0; i < $('.common_ul li').length; i++) {if ($('.common_ul li').eq(i).attr('class') == 'selectActive') {let optionInfo = $('#selectYear').val();$('#selectedInfo').attr('data-year', optionInfo);let selectText = $('.common_ul li').eq(i).text();$('#selectedInfo').text(optionInfo + '年' + selectText);$('.SelectInfo_box').hide();return;}};};$('.SelectInfo_box').hide();})$('#btn_cancel').click(function () {$('.SelectInfo_box').hide();})},//根据传来的div的值，解析成开始日期和结束日期charParseDate: function (infoStr) {var res;if (infoStr.length < 4) {res = ht.getCommonRange(infoStr)} else if (infoStr.length > 3 && infoStr.indexOf('月') > -1) {res = ht.getMonthRange(infoStr)} else if (infoStr.length > 3 && infoStr.indexOf('季度') > -1) {res = ht.getQuarterRange(infoStr)} else if (infoStr.length > 3 && infoStr.indexOf('半年') > -1) {res = ht.getHalfYearRange(infoStr)} else if (infoStr.length > 3 && infoStr.indexOf('年度') > -1) {res = ht.getYearRange(infoStr)}return res;},//常用的日期选择范围getCommonRange: function (infoStr) {var res;switch (infoStr){case '今日':res = ht.getToday();break;case '昨日':res = ht.getYesterday();break;case '上周':res = ht.getPreWeek();break;case '本周':res = ht.getWeek();break;case '上月':res = ht.getPreMonth();break;case '本月':res = ht.getMonth();break;case '上半年':res = ht.getFirstHalfYear();break;case '下半年':res = ht.getSecondHalfYear();break;case '上季度':res = ht.getPreQuarter();break;case '本季度':res = ht.getCurrentQuarter();break;}return res;},//如果计算是某一月getMonthRange:function(infoStr){var res = {begin: '',end: ''}var resStr = infoStr.replace(/\s*/g, "");var year = resStr.substr(0, 4)var month = resStr.substring(resStr.indexOf("年") + 1, resStr.indexOf("月"))var currentDate = new Date(year, month - 1, '01')var endDate = currentDate.DateAdd('m', 1).DateAdd('d', -1);res.begin = ht.formatDate(currentDate, 'yyyy-MM-dd 00:00:00');res.end = ht.formatDate(endDate, 'yyyy-MM-dd 23:59:59');return res;},//获取季度的getQuarterRange: function (infoStr) {var resStr = infoStr.replace(/\s*/g, "");var year = resStr.substr(0, 4)var quarter = resStr.substring(resStr.indexOf("第") + 1, resStr.indexOf("季度"))return ht.getQuarterRangeByOrder(year, quarter);},getQuarterRangeByOrder: function (Year, quarter) {var res = {begin: '',end: ''};switch (quarter) {case "1":res.begin = Year + "-01-01 00:00:00";res.end = Year + "-03-31 23:59:59";break;case "2":res.begin = Year + "-04-01 00:00:00";res.end = Year + "-06-30 23:59:59";break;case "3":res.begin = Year + "-07-01 00:00:00";res.end = Year + "-09-30 23:59:59";break;case "4":res.begin = Year + "-10-01 00:00:00";res.end = Year + "-12-31 23:59:59";break;}return res;},//获取半年的getHalfYearRange: function (infoStr) {var res = {begin: '',end: ''};var resStr = infoStr.replace(/\s*/g, "");var year = resStr.substr(0, 4)if (infoStr.indexOf('上半年') > -1) {res.begin = year + "-01-01 00:00:00";res.end = year + "-06-30 23:59:59";} else {res.begin = year + "-07-01 00:00:00";res.end = year + "-12-31 23:59:59";}return res;},//年度getYearRange: function (infoStr) {var res = {begin: '',end: ''};var resStr = infoStr.replace(/\s*/g, "");var year = resStr.substr(0, 4)res.begin = year + "-01-01 00:00:00";res.end = year + "-12-31 23:59:59";return res;},// 字串转化成日期parseDate: function (strDate) {var myDate;if (strDate.indexOf("/Date(") > -1)myDate = new Date(parseInt(strDate.replace("/Date(", "").replace(")/", ""), 10));elsemyDate = new Date(Date.parse(strDate.replace(/-/g, "/").replace("T", " ").split(".")[0]));//.split(".")[0] 用来处理出现毫秒的情况，截取掉.xxx，否则会出错return myDate;},// 日期格式化v日期,format:格式formatDate: function (v, format) {if (!v) return "";var d = v;if (typeof v === 'string') {if (v.indexOf("/Date(") > -1)d = new Date(parseInt(v.replace("/Date(", "").replace(")/", ""), 10));elsed = new Date(Date.parse(v.replace(/-/g, "/").replace("T", " ").split(".")[0]));//.split(".")[0] 用来处理出现毫秒的情况，截取掉.xxx，否则会出错 }var o = {"M+": d.getMonth() + 1, //month"d+": d.getDate(), //day"h+": d.getHours(),//hour"m+": d.getMinutes(), //minute"s+": d.getSeconds(), //second"q+": Math.floor((d.getMonth() + 3) / 3), //quarter"S": d.getMilliseconds() //millisecond };if (/(y+)/.test(format)) {format = format.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));}for (var k in o) {if (new RegExp("(" + k + ")").test(format)) {format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));}}return format;},// 获取当前时间;format为格式getDate: function (format, strInterval, Number) {var myDate = new Date();if (!!strInterval) {myDate = myDate.DateAdd(strInterval, Number);}var res = ht.formatDate(myDate, format);return res;},//今日getToday:function(){var res = {begin: '',end: ''}var today = new Date();res.begin = ht.formatDate(today, 'yyyy-MM-dd 00:00:00')res.end = ht.formatDate(today, 'yyyy-MM-dd 23:59:59')return res},//昨日getYesterday:function(){var res = {begin: '',end: ''};res.begin = ht.formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'yyyy-MM-dd 00:00:00');res.end = ht.formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'yyyy-MM-dd 23:59:59')return res;},// 周getWeek:function(){var res = {begin: '',end: ''};var now = new Date();var nowYear = now.getFullYear();//当前年var nowDayOfWeek = now.getDay(); //今天本周的第几天var nowDay = now.getDate(); //当前日var nowMonth = now.getMonth(); //当前月var weekStart = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);var weekEnd = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek));res.begin = ht.formatDate(weekStart, 'yyyy-MM-dd 00:00:00');res.end = ht.formatDate(weekEnd, 'yyyy-MM-dd 23:59:59')return res;},getPreWeek:function(){var res = {begin: '',end: ''};var now = new Date();var nowYear = now.getFullYear();//当前年var nowDayOfWeek = now.getDay(); //今天本周的第几天var nowDay = now.getDate(); //当前日var nowMonth = now.getMonth(); //当前月var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 6);var weekEndDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);res.begin = ht.formatDate(weekStartDate, 'yyyy-MM-dd 00:00:00');res.end = ht.formatDate(weekEndDate, 'yyyy-MM-dd 23:59:59');return res;},// 月getMonth: function () {var res = {begin: '',end: ''};var currentDate = ht.parseDate(ht.formatDate(new Date(), "yyyy-MM-01"));var endDate = currentDate.DateAdd('m', 1).DateAdd('d', -1);res.begin = ht.formatDate(currentDate, 'yyyy-MM-dd 00:00:00');res.end = ht.formatDate(endDate, 'yyyy-MM-dd 23:59:59');return res;},getPreMonth: function () {var res = {begin: '',end: ''};var currentDate = ht.parseDate(ht.formatDate(new Date(), "yyyy-MM-01"));var preMonth = currentDate.DateAdd('d', -1);res.begin = ht.formatDate(preMonth, 'yyyy-MM-01 00:00:00');res.end = ht.formatDate(preMonth, 'yyyy-MM-dd 23:59:59');return res;},// 季度getCurrentQuarter: function () {var currentDate = new Date();return ht.getQuarter(currentDate.getFullYear(), currentDate.getMonth());},getPreQuarter: function () {var currentDate = new Date().DateAdd('q', -1);return ht.getQuarter(currentDate.getFullYear(), currentDate.getMonth());},getQuarter: function (Year, month) {var res = {begin: '',end: ''};switch (month) {case 0:case 1:case 2:res.begin = Year + "-01-01 00:00:00";res.end = Year + "-03-31 23:59:59";break;case 3:case 4:case 5:res.begin = Year + "-04-01 00:00:00";res.end = Year + "-06-30 23:59:59";break;case 6:case 7:case 8:res.begin = Year + "-07-01 00:00:00";res.end = Year + "-09-30 23:59:59";break;case 9:case 10:case 11:res.begin = Year + "-10-01 00:00:00";res.end = Year + "-12-31 23:59:59";break;}return res;},// 年getYear: function () {var currentDate = new Date();var res = {begin: '',end: ''};var year = currentDate.getFullYear();res.begin = year + '-01-01 00:00:00';res.end = year + '-12-31 23:59:59';return res;},getPreYear: function () {var currentDate = new Date();var res = {begin: '',end: ''};var year = currentDate.getFullYear() - 1;res.begin = year + '-01-01 00:00:00';res.end = year + '-12-31 23:59:59';return res;},getFirstHalfYear: function () {var currentDate = new Date();var res = {begin: '',end: ''};var year = currentDate.getFullYear();res.begin = year + '-01-01 00:00:00';res.end = year + '-06-30 23:59:59';return res;},getSecondHalfYear: function () {var currentDate = new Date();var res = {begin: '',end: ''};var year = currentDate.getFullYear();res.begin = year + '-07-01 00:00:00';res.end = year + '-12-31 23:59:59';return res;}});//+--------------------------------------------------- //| 日期计算 //+--------------------------------------------------- Date.prototype.DateAdd = function (strInterval, Number) {var dtTmp = this;switch (strInterval) {case 's': return new Date(Date.parse(dtTmp) + (1000 * Number));// 秒case 'n': return new Date(Date.parse(dtTmp) + (60000 * Number));// 分case 'h': return new Date(Date.parse(dtTmp) + (3600000 * Number));// 小时case 'd': return new Date(Date.parse(dtTmp) + (86400000 * Number));// 天case 'w': return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));// 星期case 'q': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number * 3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());// 季度case 'm': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());// 月case 'y': return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());// 年 }}//+--------------------------------------------------- //| 比较日期差 dtEnd 格式为日期型或者 有效日期格式字符串 //+--------------------------------------------------- Date.prototype.DateDiff = function (strInterval, dtEnd) {var dtStart = this;if (typeof dtEnd == 'string')//如果是字符串转换为日期型{dtEnd = ht.parseDate(dtEnd);}switch (strInterval) {case 's': return parseInt((dtEnd - dtStart) / 1000);case 'n': return parseInt((dtEnd - dtStart) / 60000);case 'h': return parseInt((dtEnd - dtStart) / 3600000);case 'd': return parseInt((dtEnd - dtStart) / 86400000);case 'w': return parseInt((dtEnd - dtStart) / (86400000 * 7));case 'm': return (dtEnd.getMonth() + 1) + ((dtEnd.getFullYear() - dtStart.getFullYear()) * 12) - (dtStart.getMonth() + 1);case 'y': return dtEnd.getFullYear() - dtStart.getFullYear();}}//+--------------------------------------------------- //| 取得当前日期所在月的最大天数 //+--------------------------------------------------- Date.prototype.MaxDayOfDate = function () {var myDate = this;var ary = myDate.toArray();var date1 = (new Date(ary[0], ary[1] + 1, 1));var date2 = date1.DateAdd('m', 1);var result = dateDiff(date1.Format('yyyy-MM-dd'), date2.Format('yyyy-MM-dd'));return result;}//--------------------------------------------------- // 判断闰年 //--------------------------------------------------- Date.prototype.isLeapYear = function () {return (0 == this.getYear() % 4 && ((this.getYear() % 100 != 0) || (this.getYear() % 400 == 0)));}})(jQuery, top.ht);
<div class="ht-layout-tool-item dataChoose"><div>时间：</div><div id="selectedInfo"></div><div id="" class="SelectInfo_box"><div class="selectYear_box"><div>年份：</div><select id="selectYear">@*<option value="value"></option><option value="value"></option><option value="value"></option><option value="value"></option>*@</select></div><div class="selectItem"><ul class="selectMenu"><li class="selectActive">常用</li><li>月份</li><li>季度</li><li>半年</li><li>年度</li></ul><div class="lines"></div><div class="selectInfo"><div class="selectInfo_common"><ul class=""><li class="">昨日</li><li class="">今日</li><li class="">上周</li><li class="">本周</li><li class="">上月</li><li class="">本月</li><li class="">上半年</li><li class="">下半年</li><li class="">上季度</li><li class="">本季度</li> </ul></div><div class="selectInfo_month"><ul class="common_ul"><li class="">1月</li><li class="">2月</li><li class="">3月</li><li class="">4月</li><li class="">5月</li><li class="">6月</li><li class="">7月</li><li class="">8月</li><li class="">9月</li><li class="">10月</li><li class="">11月</li><li class="">12月</li></ul></div><div class="selectInfo_quarter"><ul class="common_ul"><li class="">第1季度</li><li class="">第2季度</li><li class="">第3季度</li><li class="">第4季度</li></ul></div><div class="selectInfo_halfofyear"><ul class="common_ul"><li class="">上半年</li><li class="">下半年</li></ul></div><div class="selectInfo_thisyear"><ul class="common_ul"><li class="">本年度</li></ul></div></div></div><div class="selectCustom"><div class="customTop"><div>自定义时间段：</div><div class="openIcon"></div></div><div class="controlBox"><input id="timeStart" type="text" class="WDate form-control StartDate" readonly="readonly" placeholder="开始时间" onclick="showDatePicker(this, {})" isvalid="yes" checkexpession="NotNull" /><input id="timeEnd" type="text" class="WDate form-control EndDate" readonly="readonly" placeholder="结束时间" onclick="showDatePicker(this, {})" isvalid="yes" checkexpession="NotNull" /></div></div><div class="selectOption"><a id="btn_cancel" class="btn btn-default">取消</a><a id="btn_makesure" class="btn btn-primary">确定</a></div></div></div><div class="ht-layout-tool-item"><div class="dataChoose span-sm"><div id="btnClear">重置时间</div></div></div>
.dataChoose {position:relative;display:flex !important;align-items:center;}#selectedInfo {height: 30px !important;line-height:30px;padding:0 15px;border-radius: 4px !important;border: 1px solid #ccc;cursor:pointer;transition:all 0.5s;user-select:none;}#selectedInfo:hover {border: 1px solid #2096f3; }.SelectInfo_box {background:#fff;border:#e8e8e8 1px solid;border-radius:6px;overflow:hidden;position:absolute;top: 35px;left: 47px;box-shadow: rgba(0,0,0,0.1) 0 0 18px;display:none;user-select:none;}.selectYear_box {width:300px;height:50px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;}#selectYear {width:210px;height:30px;border:#e8e8e8 1px solid;border-radius:4px;color:#666;}.selectItem {display:flex;justify-content:space-between;width:100%;padding:14px 0;}.selectMenu {width:95px;}.selectMenu li {width:70%;height:28px;line-height:28px;text-align:center;font-size:14px;color:#666666;cursor:pointer;margin:auto;}.selectActive {background:#3286ed !important;border-radius:16px;color:#fff !important;}.lines {width:2px;height:150px;background:#f1f5f9;}.selectInfo {width:200px;}.selectInfo ul {display:flex;flex-wrap:wrap;color:#939393;width:100%;}.selectInfo ul li {width:40%;height:28px;line-height:28px;text-align:center;font-size:14px;color:#939393;cursor:pointer;margin-left:6%;transition:all 0.5s;}.selectInfo ul li:hover {background:#3286ed !important;border-radius:16px;color:#fff !important;}.selectInfo div {display:none;}.selectInfo div:nth-child(1) {display:block;}.selectCustom {width:90%;margin:auto;background:#f5f9ff;padding-bottom:15px;margin-bottom:10px;}.customTop {display:flex;height:30px;align-items:center;color:#666666;justify-content:space-between;font-size:15px;padding:0 20px;}.controlBox {display:flex;}.controlBox input {margin-left:20px;border-radius:4px;}.selectOption {height:50px;display:flex;justify-content:flex-end;align-items:center;background:#ebeff5;}.selectOption a {margin-right:15px;}.span-sm{padding:5px 10px;font-size:12px;color:#3286ed;}
View Code
