layui的laydate实现季度选择

/*** 季度初始化* @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实现季度选择相关推荐

layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
layui 使用laydate动态创建多个时间选择框
记录:layui框架, js使用 laydate动态创建多个时间选择框,点击无效问题.此外,使用laydate时间选择框生效的关键一点是,laydate框架会给input输入框增加一个lay-key= ...
layui之laydate组件简介
1.layui之laydate组件是什么 layui是一个编程大神贤心所作的前端框架.laydate是layui的日期组件. 2.layui组件的运用 1)基础参数选项通过核心方法laydate.r ...
layui分页加下拉选择
html代码 <div class="server"><div><table id="datatable" class=" ...
php layui实现添加input,Layui实现input输入和选择的方法
Layui实现input输入和选择的方法: HTML代码: 移交单位* 111 222 333 444 555 其中input的几个style样式简单说一下.position:absolute 在这里 ...
laydate控件选择类型
详见官网:https://www.layui.com/doc/modules/laydate.html 1.年月.时分秒 <div class="form-group"> ...
layui之laydate日期组件在done中重新渲染
layui日期组件问题 layui组件在完成渲染赋值,在渲染时赋值均无问题, 最近遇到在done回调时发现赋值失败,参考其他人的写法特别复杂,我的这个写法简单且实用思路:给我的input换个身体 h ...
layui中laydate兼容ie_layui菜鸟教程--乐字节前端
主要内容 LayUI 的介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,16年出厂 ...
layui 关于layDate设置时间限制问题
前面是尝试结果,有兴趣的可以康康,赶时间的可以直接翻到底下 ----->直达车因为只有一个页面,没什么标准,所以自己就使用了layui的时间控件,并且作为独立组件. 第一次尝试 - 使用 mi ...

layui的laydate实现季度选择

layui的laydate实现季度选择相关推荐

最新文章

热门文章