layui的laydate实现季度选择

Myth丶恋晨 2022-06-01 09:13 501阅读 0赞

/**
     * 季度初始化
     * @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