layui时间控件天、月、季和年的实现，周暂未实现

Dear 丶 2022-03-11 02:46 396阅读 0赞

其中季度的选择是有点投机的，只显示前四个月的，将月改为季度。

<!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="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>