其中季度的选择是有点投机的，只显示前四个月的，将月改为季度。
<!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.jquerylaydate.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>