• 2024-07-15
宇哥博客 前端开发 layDate日期控件,按周/月/季度/半年/年选择,附完整代码

layDate日期控件,按周/月/季度/半年/年选择,附完整代码

本文使用laydate.js控件,版本为5.0.9,可按周、月、季度、半年、年进行选择。以下为代码部分,文末有简单效果演示及完整代码下载。

代码:

<input type="text" id="r_date_ym" class="layui-input" lay-key="1" placeholder="请选择月份" readonly="readonly" /> 
<input type="text" id="r_date_season" class="layui-input" lay-key="2" placeholder="请选择季度" readonly="readonly" /> 
<input type="text" id="r_date_halfyear" class="layui-input" lay-key="3" placeholder="请选择上/下半年" readonly="readonly" /> 
<input type="text" id="r_date_year" class="layui-input" lay-key="4"  placeholder="请选择年份" readonly="readonly" />
<input type="text" id="r_date_week" class="layui-input" lay-key="5"  placeholder="请选择周" readonly="readonly" />
													
					
	<script>
		
function yearmonthFunction(){
	  //月报,年月选择器
	  laydate.render({
	    elem: '#r_date_ym',
	    theme: '#da7606',
	    min: "2020-1-1",
	    max: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
	    type: 'month',
	    trigger: 'click',
	    btns: ['now','confirm'],
	    change: function (value, date, endDate) {
	    	
	    },
	    done: function (value){
      	}
	  });
}

/**
 * 按季度选择
 */
function seasonFunction(){
	  laydate.render({
			elem: '#r_date_season',
			theme: '#da7606',
			type: 'month',
			format: 'yyyy-第M季度',
			range: 1 ? null : '~',
			min: "2020-1-1",
			//max: "2999-12-31",
			max: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
			btns: ['confirm'],
			ready: function () {
				var hd = $("#layui-laydate" + $('#r_date_season').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 time = '03-01';
						finaltime =  year + '-' + time;
					}
					if (season == '第2季度'){
						var time = '06-01';
						finaltime =  year + '-' + time;
					}
					if (season == '第3季度'){
						var time = '09-01';
						finaltime = year + '-' + time;
					}
					if (season == '第4季度'){
						var time = '12-01';
						finaltime = year + '-' + time;
					}
				}
				//console.log('日期', finaltime);
				$('#r_date_season').attr('data-rdate', 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";
					}
				});
			});
		}
}

/**
 * 按上半年、下半年选择
 */
function halfyearFunction(){
	laydate.render({
		elem: '#r_date_halfyear',
		theme: '#da7606',
		type: 'month',
		format: 'yyyy-h半年',
		range: 1 ? null : '~',
		min: "2020-1-1",
		max: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
		btns: [ 'confirm'],
		ready: function () {
			var hd = $("#layui-laydate" + $('#r_date_halfyear').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 time = '06-01';
					finaltime = year + '-' + time;
				}
				if (halfyear == '下半年'){
					var time = '12-01';
					finaltime = year + '-' + time;
				}
			}
			//console.log('确认日期', finaltime);
			$('#r_date_halfyear').attr('data-rdate', 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";
				}
			});
		});
	}
}
  
/**
 * 按年度选择
 */
function yearFunction(){
	  laydate.render({
	    elem: '#r_date_year',
	    theme: '#da7606',
	    min: "2020-1-1",
	    max: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
	    type: 'year',
	    trigger: 'click',
	    btns: ['now','confirm'],
	    change: function (value, date, endDate) {
	    	
        },
        done: function (value){
        	//console.log('年', value);
        	$('#r_date_year').attr('data-rdate', value+'-12-01' );
        }
	  });
}

/**
 * 按周选择
 */
function weekFunction(ohd) {
	let ele = $('#r_date_week');
	laydate.render({
		elem: '#r_date_week',
		theme: '#da7606',
		type: 'date',
		max: '2099-12-31',
		format: "yyyy-MM-dd~yyyy-MM-dd",
		btns: ['clear', 'confirm'],
		done: function (value, date, endDate) {
			if (value != "" && value.length > 0) {
				let today = new Date(value.substring(0, 10));
				let weekday = today.getDay();
				let monday;
				let sunday;
				if (weekday == 0) {
					monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());
				} else {
					monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());
				}
				if (weekday == 0) {
					sunday = today;
				} else {
					sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());
				}
				let month = monday.getMonth() + 1;
				if (month < 10) {
					month = "0" + month;
				}
				let day1 = monday.getDate();
				if (day1 < 10) {
					day1 = "0" + day1;
				}
				let start = "" + monday.getFullYear() + "-" + month + "-" + day1;
				let month2 = sunday.getMonth() + 1;
				if (month2 < 10) {
					month2 = "0" + month2;
				}
				let day2 = sunday.getDate();
				if (day2 < 10) {
					day2 = "0" + day2;
				}
				let end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
				ele.val(start + "~" + end);
			} else {
				ele.val('');
			}
		}
	});
}



	yearmonthFunction();//按月份选择
	  
	seasonFunction();//季度选择初始化 
	  
	halfyearFunction();//上半年、下半年选择初始化
	  
	yearFunction();//按年选择
        weekFunction();//按周选择



	</script>

效果截图:

选择后:

完整代码下载地址:https://wwnj.lanzout.com/iEzyd0ryrgaf

本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/3840.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

返回顶部