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
相关文章推荐
- layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用
- 选择时间日历控件DatePickerDialog实现(从外包项目中挖出来整理的)
- laydate.js日期时间选择插件
- 日期时间选择插件 - laydate.js
- Layui中的日期组件layDate 1.1的改良版
- android—DatePicker 和TimePicker显示日期以及使用TimePickerDialog,DatePickerDialog来专门实现时间选择对话框
- DatePicker 日期选择对话框的实现
- layDate日期选择插件
- layUI独立组件layer-laydate-laypage项目实践用法
- 十、jquery-ui datepicker实现选择一周的日期
- Bootstrap.css与layDate日期选择样式起冲突的解决办法
- JQuery datepicker实现日期组件下拉选择
- js日期选择控件layDate api手册
- 使用datepicker插件实现日期选择的基本操作 8-5
- jQuery插件Datepicker日期选择器实现
- jQuery UI Datepicker的扩展控件Timepicker实现时间选择
- 使用DatePickerDialog和TimePickerDialog实现日期和时间选择对话框
- android 实现点击输入框弹出日期选择对话框(DatePickerDialog)
- 十、jquery-ui datepicker实现选择一周的日期
- react-native DatePicker日期选择组件的实现代码