您的位置:首页 > 产品设计 > UI/UE

layui的laydate实现季度选择

2018-01-25 17:52 239 查看
/**
* 季度初始化
* @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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: