(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(‘‘);
})
//加载时间选择--年份下拉的option
var 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 = timeStart
EndDate = 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));
else
myDate = 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));
else
d = 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">2019</option>
<option value="value">2018</option>
<option value="value">2017</option>
<option value="value">2016</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;
}
原文地址：https://www.cnblogs.com/Duriyya/p/10558580.html
时间： 2024-10-13 17:35:04