其中季度的选择是有点投机的,只显示前四个月的,将月改为季度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="static/css/layui.css" />
<style>
.layui-mindlle{
position:absolute;
bottom: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class="layui-inline layui-mindlle">
<select id="selectedOption" class="layui-form-select dateSelector" name="degree" lay-filter="quart" name="quart"
date-target="WORLD">
<option value="d">日</option>
<option value="w">周</option>
<option value="m">月</option>
<option value="s">季</option>
<option value="y">年</option>
</select>
<label class="layui-inline-label" id="worldlable">
<input id="worldId" type="text" class="layui-input laydate-test" data-type="date">
</label>
</div>
<!-- <script src="js/gen_time.js"></script> -->
<script src="static/layui.js"></script>
<script>
layui.use(['laydate', 'layer', 'jquery'], function() {
var laydate = layui.laydate,
layer = layui.layer,
$ = layui.jquery
laydate.render({
elem: '#worldId',
max: genTime('d'),
value: genTime('d'),
type: 'date'
});
$("#selectedOption").on('change', function() {
var opt = $("#selectedOption").val();
var ele = $("#selectedOption");
$("#worldId").remove();
$("#worldlable").html(
'<input id="worldId" type="text" class="layui-input laydate-test" data-type="date">');
if (opt == "m") {
//限定可选时间
laydate.render({
elem: '#worldId',
type: 'month',
max: genTime('m'),
value: genTime('m'),
btns: ['clear', 'confirm']
});
} else if (opt == "d") {
laydate.render({
elem: '#worldId',
type: 'date',
max: genTime('d'),
value: genTime('d'),
btns: ['clear', 'confirm']
});
} else if (opt == "w") {
laydate.render({
elem: '#worldId',
type: 'date',
max: genTime('d'),
value: genTime('d'),
btns: ['clear', 'confirm']
});
} else if (opt == "s") {
renderSeasonDate('#worldId', '');
} else if (opt == "y") {
laydate.render({
elem: '#worldId',
type: 'year',
btns: ['clear', 'confirm']
});
}
});
function genTime(opt) {
var now = new Date();
var year = now.getFullYear();
var mth = now.getMonth();
var day = now.getDate();
var month = mth + 1;
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
var str;
if (opt == 'd') {
str = year + '-' + month + '-' + day;
} else if (opt == 'm') {
str = year + '-' + month;
}
return str;
}
function renderSeasonDate(ohd, sgl) {
var ele = $(ohd);
laydate.render({
elem: ohd,
type: 'month',
format: 'yyyy年M季度',
//range: sgl?null:'~',
//min:"1900-1-1",
btns: ['clear', 'confirm'],
ready: function(value, date, endDate) {
var hd = $("#layui-laydate" + ele.attr("lay-key"));
console.log("hd=" + hd);
if (hd.length > 0) {
hd.click(function() {
ren($(this));
});
}
ren(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", "");
}
}
});
}
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;
console.log('inx'+inx);
if (inx < 4) {
ele.innerHTML = cx.replace(/月/g, "季度");
} else {
ele.style.display = "none";
}
});
});
}
function isNull(s) {
if (s == null || typeof(s) == "undefined" || s == "") return true;
return false;
}
});
</script>
</body>
</html>