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

最新推荐文章于 2024-01-20 07:30:00 发布

Ayn慢慢

最新推荐文章于 2024-01-20 07:30:00 发布

阅读量2.6k

点赞数

分类专栏： js 文章标签： layui

本文链接：https://blog.csdn.net/qq_34400736/article/details/88284080

版权

js 专栏收录该内容

17 篇文章 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="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>

Ayn慢慢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui时间控件天、月、季和年的实现，周暂未实现

其中季度的选择是有点投机的，只显示前四个月的，将月改为季度。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="static/css/layui.css" /&
复制链接

扫一扫