Laydate实现季度选择器、半年度选择器
配合后端使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>季度半年度选择器</title>
<style>
body{padding: 20px;}
.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}
.demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
.demo-footer a{padding: 0 5px; color: #01AAED;}
</style>
<script src="laydate/jquery-1.11.1.min.js"></script> <!-- 改成你的路径 -->
<script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
</head>
<body>
<input type="text" class="demo-input" placeholder="请选择季度" id="season">
<input type="text" class="demo-input" placeholder="请选择半年度" id="year">
<input type="text" class="demo-input" placeholder="" id="reporting_date">
<script>
function seasonFunction(){
renderSeasonDate(document.getElementById('season'), 1);
function renderSeasonDate(ohd, sgl) {
var ele = $(ohd);
laydate.render({
elem: ohd,
theme: '#428bca',
type: 'month',
format: 'yyyy-第M季度',
range: sgl ? null : '~',
min: "1900-1-1",
max: "2999-12-31",
btns: ['confirm'],
ready: function () {
var hd = $("#layui-laydate" + ele.attr("lay-key"));
if (hd.length > 0) {
hd.click(function () {
ren($(this));
});
}
ren(hd);
},
done: function (value) {
var finaltime = '';
if (value){
value = value.split('-');
var year = value[0];
var season = value[1];
if (season == '第1季度'){
var timeend = '03-31';
finaltime = year + '-' + timeend;
}
if (season == '第2季度'){
var timeend = '06-30';
finaltime = year + '-' + timeend
}
if (season == '第3季度'){
var timeend = '09-30';
finaltime = year + '-' + timeend
}
if (season == '第4季度'){
var timeend = '12-31';
finaltime = year + '-' + timeend
}
}
$('#reporting_date').val(finaltime);
}
});
var ren = function (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 < 4) {
ele.innerHTML = cx.replace(/月/g, "季度").replace(/一/g, "第1").replace(/二/g, "第2").replace(/三/g, "第3").replace(/四/g, "第4");
} else {
ele.style.display = "none";
}
});
});
}
}
}
seasonFunction()
function yearFunction(){
renderYearDate(document.getElementById('year'), 1);
function renderYearDate(ohd, sgl) {
var ele = $(ohd);
laydate.render({
elem: ohd,
theme: '#428bca',
type: 'month',
format: 'yyyy-h半年',
range: sgl ? null : '~',
min: "1900-1-1",
max: "2999-12-31",
btns: [ 'confirm'],
ready: function () {
var hd = $("#layui-laydate" + ele.attr("lay-key"));
if (hd.length > 0) {
hd.click(function () {
ren($(this));
});
}
ren(hd);
},
done: function (value) {
var finaltime = '';
if (value){
value = value.split('-');
var year = value[0];
var halfyear = value[1];
if (halfyear == '上半年'){
var timeend = '06-30';
finaltime = year + '-' + timeend
}
if (halfyear == '下半年'){
var timeend = '12-31';
finaltime = year + '-' + timeend
}
}
$('#reporting_date').val(finaltime);
}
});
var ren = function (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";
}
});
});
}
}
}
yearFunction()
</script>
</body>
</html>
有需要的可自行下载
链接：https://pan.baidu.com/s/1-ykeoSguEHSb3p11u2Ff6Q
提取码：n4el
后端代码参考：
now = datetime.datetime.now() month = (now.month - 1) - (now.month - 1) % 3 + 1 now = (datetime.datetime.now().replace(month=month, day=1, hour=0, minute=0, second=0,microsecond=0) + datetime.timedelta(days=-1)) year = now.strftime("%Y") if now.month in (1, 2, 3): season = '第1季度' seasondate = year + '-' + season date = year + '-' + "03-31" if now.month in (4, 5, 6): season = '第2季度' seasondate = year + '-' + season date = year + '-' + "06-30" if now.month in (7, 8, 9): season = '第3季度' seasondate = year + '-' + season date = year + '-' + "09-30" if now.month in (10, 11, 12): season = '第4季度' seasondate = year + '-' + season date = year + '-' + "12-31" now = datetime.datetime.now() month = (now.month - 1) - (now.month - 1) % 6 + 1 now = (datetime.datetime.now().replace(month=month, day=1, hour=0, minute=0, second=0,microsecond=0) + datetime.timedelta(days=-1)) year = now.strftime("%Y") if now.month in (1, 2, 3, 4, 5, 6): season = '上半年' yeardate = year + '-' + season date = year + '-' + "06-30" if now.month in (7, 8, 9, 10, 11, 12): season = '下半年' yeardate = year + '-' + season date = year + '-' + "12-31" return render(request, 'reporting.html', {"seasondate": seasondate, "yeardate": yeardate})
前端html
<input style="width:150px; float:right; display: none" autocomplete="off" id="season" type="text"name="season" value="{{ seasondate }}" class="form-control"> <input style="width:150px; float:right; display: none" autocomplete="off" id="year" type="text"name="year" value="{{ yeardate }}" class="form-control">
