最近在开发一个基于layui的项目，官方只提供了年，月，日等时间选择，不能满足需求，在参考了网上的代码后，整合了一版比较全的时间选择控件，可以满足绝大多数的需求，代码如下
html
<select class="layui-input-inline" 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="halfyear">半年</option>
<option value="year">年</option>
<option value="nearly">近90天</option>
</select>
</div>
<label class="layui-inline" id="worldlable">
<input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">
</label>script
在这里插入代码片
js
这里的el就是时间选择框的id,
function dataPick(el) {
layui.use(['form', 'upload', 'layer', 'laydate', 'jquery'], function() {
let form = layui.form;
let layer = layui.layer;
let laydate = layui.laydate;
laydate.render({
elem: el,
type: 'date',
range: true,
max: genTime('day'),
value: genTime('day'),
btns: ['clear', 'confirm']
});
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: el,
type: 'month',
max: genTime('month'),
value: genTime('month'),
btns: ['clear', 'confirm']
});
// 日
} else if (opt == "day") {
//日期时间范围
laydate.render({
elem: el,
type: 'date',
range: true,
max: genTime('day'),
value: genTime('day'),
btns: ['clear', 'confirm']
});
// 周
} else if (opt == "week") {
renderWeekDate(el, '');
// 季度
} else if (opt == "quarter") {
renderSeasonDate(el, '');
// 半年
} else if (opt == 'halfyear') {
console.log()
renderHalfYearDate(el, '');
// renderHalfYearDate(el, '');
} else if (opt == "year") {
laydate.render({
elem: el,
type: 'year',
max: genTime('year'),
value: genTime('year'),
btns: ['clear', 'confirm']
});
} else if (opt == "nearly") {
var d = new Date();
laydate.render({
elem: el,
type: 'date',
value: genTime('nearly')
});
$(el).attr('disabled', true)
}
});
// 周
function renderWeekDate(ohd, sgl) {
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'date',
format: "yyyy-MM-dd - yyyy-MM-dd",
value: genTime('week'),
// max:genTime()
btns: ['clear', 'confirm'],
done: function(value) {
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 renderHalfYearDate(ohd, sgl) {
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'month',
format: "yyyy",
value: genTime('half'),
btns: ['clear', 'confirm'],
ready: function(value, date) {
// console.log(value, date, endDate)
let hd = $("#layui-laydate" + ele.attr("lay-key"));
if (hd.length > 0) {
hd.click(function() {
half($(this));
});
}
half(hd);
},
done: function(value, date) {
console.log(value, date.month)
var finaltime = ''
if (!isNull(date) && date.month > 0 && date.month == 1) {
finaltime = date.year + "-" + '上半年'
} else {
finaltime = date.year + "-" + '下半年'
}
ele.val(finaltime);
}
});
}
//季度
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 half(thiz) {
var mls = thiz.find(".laydate-month-list");
mls.each(function(i, e) {
$(this).find("li").each(function(inx, ele) {
var cx = ele.innerHTML;
if (inx < 2) {
cx = cx.replace(/月/g, "半年");
ele.innerHTML = cx.replace(/一/g, "上").replace(/二/g, "下");
} else {
ele.style.display = "none";
}
});
});
}
//时间筛选
function genTime(opt) {
let now = new Date();
let year = now.getFullYear();
let mth = now.getMonth();
let day = now.getDate() - 1;
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 + ' - ' + year + '-' + month + '-' + day;
} else if (opt == 'month') {
str = year + '-' + month;
} else if (opt == "year") {
str = year
} else if (opt == 'nearly') {
var end = new Date();
var startyear = end.getFullYear();
var startmonth = end.getMonth() + 1; //0-11表示1-12月
var startday = end.getDate() - 1;
var dateObj = {};
dateObj.end = startyear + '-' + startmonth + '-' + startday;
var endMonthDay = new Date(startyear, startmonth, 0).getDate(); //当前月的总天数
if (month - 3 <= 0) { //如果是1、2、3月，年数往前推一年
var start3MonthDay = new Date((startyear - 1), (12 - (3 - parseInt(startmonth))), 0).getDate(); //3个月前所在月的总天数
if (start3MonthDay < startday) { //3个月前所在月的总天数小于现在的天日期
dateObj.start = (startyear - 1) + '-' + (12 - (3 - startmonth)) + '-' + start3MonthDay;
} else {
dateObj.start = (startyear - 1) + '-' + (12 - (3 - startmonth)) + '-' + startday;
}
} else {
var start3MonthDay = new Date(startyear, (parseInt(startmonth) - 3), 0).getDate(); //3个月前所在月的总天数
if (start3MonthDay < day) { //3个月前所在月的总天数小于现在的天日期
if (day < endMonthDay) { //当前天日期小于当前月总天数,2月份比较特殊的月份
dateObj.start = startyear + '-' + (startmonth - 3) + '-' + (start3MonthDay - (endMonthDay - startday));
} else {
dateObj.start = startyear + '-' + (startmonth - 3) + '-' + start3MonthDay;
}
} else {
dateObj.start = startyear + '-' + (startmonth - 3) + '-' + startday;
}
}
str = dateObj.start + ' - ' + dateObj.end;
} else if (opt == 'week') {
let today = new Date();
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;
str = start + " - " + end;
}
return str;
}
function isNull(quarter) {
if (quarter == null || typeof(quarter) == "undefined" || quarter == "") return true;
return false;
}
});
}
使用前记得引入jq和layui
实际效果如下图
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
