layui的laydate实现季度选择

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xyzdwf/article/details/79164921
/**
 * 季度初始化
 * @param ohd 季度input dom对象非jquery对象
 */
function renderSeasonDate(ohd){
	var ele = $(ohd);
   $Date.render({
    elem: ohd
    ,type: 'month'
	,format: 'yyyy年M季度'
    ,range: '~'
	,min:"1900-1-1"
	,max:"2099-12-31"
	,ready: function(value, date, endDate){
		var hd = $("#layui-laydate"+ele.attr("lay-key"));
		if(hd.length>0){
			hd.click(function(){
				ren($(this));
			});
		}
		ren(hd);
	},
	done: function(value, date, endDate){
		if(date.month>0&&date.month<5){
			ele.attr("startDate",date.year+"-"+date.month)
		}
		if(endDate.month>0&&endDate.month<5){
			ele.attr("endDate",endDate.year+"-"+endDate.month)
		}
	}
  });
  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,"季度");
				}else{
					ele.style.display="none";
				}
			});
		});
  }
}
以下是实现下拉选择日期类型,联动的初始化代码,在此记录下
/**
 * 初始化表单中年季月日范围选择
 * 下拉框与日期框对应:
 * 	<select class="dateSelector" date-target="PI" ...
 * 	<input id="mydate" type="text" readonly class="dateTargetPI"
 * 	PI为自定义的对应的关键字
 * 
 * @param form 要渲染的form的jquery对象,当form为空默认值为全页面
 */
function initDateForm(form){
	if(isNull(form))form = $(document.body);
	var ltm = function(tar,tars,tva){
		tars.each(function(){
			$(this).removeAttr("lay-key");
			this.outerHTML=this.outerHTML;
		});
		tars = form.find(".dateTarget"+tar);
		tars.each(function(){
			var ele = $(this);
			if("y"==tva){
				var cyear = new Date().getFullYear();
				ele.attr("startDate",cyear-1);
				ele.attr("endDate",cyear);
				$Date.render({
					elem: this,
					type: 'year',
					range: '~',
					format: 'yyyy年',
					value: (cyear-1)+"年 ~ "+cyear+"年",
					done: function(value, date, endDate){
						ele.attr("startDate",date.year);
						ele.attr("endDate",endDate.year);
					}
				});
				
			}else if("s"==tva){
				ele.attr("startDate","");
				ele.attr("endDate","");
				renderSeasonDate(this);
			}else if("m"==tva){
				ele.attr("startDate","");
				ele.attr("endDate","");
				$Date.render({
					elem: this,
					type: 'month',
					range: '~',
					format: 'yyyy年MM月',
					done: function(value, date, endDate){
						ele.attr("startDate",date.year+"-"+date.month);
						ele.attr("endDate",endDate.year+"-"+endDate.month);
					}
				});
			}else if("d"==tva){
				ele.attr("startDate","");
				ele.attr("endDate","");
				$Date.render({
					elem: this,
					range: '~',
					format: 'yyyy年MM月dd日',
					done: function(value, date, endDate){
						ele.attr("startDate",date.year+"-"+date.month+"-"+date.date);
						ele.attr("endDate",endDate.year+"-"+endDate.month+"-"+endDate.date);
					}
				});
			}
		});
	}
	var sels = form.find(".dateSelector");
	sels.each(function(i,e){
		var ths = this;
		var thiz = $(e);
		var tar = thiz.attr("date-target");
		thiz.next().find("dd").click(function(){
			var tva = thiz.val();
			var tars = form.find(".dateTarget"+tar);
			ltm(tar,tars,tva);
		});
		thiz.change(function(){
			var tva = $(this).val();
			var tars = form.find(".dateTarget"+tar);
			ltm(tar,tars,tva);
		});
		var tars = form.find(".dateTarget"+tar);
		ltm(tar,tars,thiz.val());
	});
}
    完整测试代码:https://pan.baidu.com/s/1eTC9uAe

猜你喜欢

转载自blog.csdn.net/xyzdwf/article/details/79164921