使用laydate组件 创建年度,季度,月,日期,半年度的选择

编程入门 行业动态 更新时间:2024-10-23 17:36:20

使用laydate<a href=https://www.elefans.com/category/jswz/34/1771375.html style=组件 创建年度,季度,月,日期,半年度的选择"/>

使用laydate组件 创建年度,季度,月,日期,半年度的选择

效果:





业务需求:有一个年、季、月、日、半年度 的选择;用户选择年时,日期只能选择年,选择季度时日期只能选择年季度,选择月时只能选择年月,选择日时能选择年月日。这样根据用户选择,动态更换日期插件的限制

代码解释:这里的业务是取周期范围的,如果只需要一个日期,初始化这个插件时range 属性去掉就是一个的。在取日期值的时候一样也要考虑范围,起始时间与结束时间是年月季拼凑后面的日期是有区别的,起始时间拼选择年月的01号,结束日期为选择日期的最后一天,代码已经处理好了这一块,精确计算当前月最后一天为28,29,30,31,天,代码里都有详细体现。如果你只需要一个日期,那就直接拼最后一天就好了。不需要考虑起始日期结束日期这些东西了。最主要的是季度和半年度,laydate并没有提供这些,这些东西需要我们自己实现。

环境搭建

1.下载官方laydate并解压/
2.找到解压之后的laydate.js文件,将内容整体替换为下面的提供的js代码。

/**@Name : layDate 5.0.9 日期时间控件@Author: 贤心@Site:/@License:MIT*/;!function(){"use strict";var isLayui = window.layui && layui.define, ready = {getPath: function(){var jsPath = document.currentScript ? document.currentScript.src : function(){var js = document.scripts,last = js.length - 1,src;for(var i = last; i > 0; i--){if(js[i].readyState === 'interactive'){src = js[i].src;break;}}return src || js[last].src;}();return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);}()//获取节点的style属性值,getStyle: function(node, name){var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);}//载入CSS配件,link: function(href, fn, cssname){//未设置路径,则不主动加载cssif(!laydate.path) return;var head = document.getElementsByTagName("head")[0], link = document.createElement('link');if(typeof fn === 'string') cssname = fn;var app = (cssname || href).replace(/\.|\//g, '');var id = 'layuicss-'+ app, timeout = 0;link.rel = 'stylesheet';link.href = laydate.path + href;link.id = id;if(!document.getElementById(id)){head.appendChild(link);}if(typeof fn !== 'function') return;//轮询css是否加载完毕(function poll() {if(++timeout > 8 * 1000 / 100){return window.console && console.error('laydate.css: Invalid');};parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 100);}());}},laydate = {v: '5.0.9',config: {} //全局配置项,index: (window.laydate && window.laydate.v) ? 100000 : 0,path: ready.getPath//设置全局项,set: function(options){var that = this;that.config = lay.extend({}, that.config, options);return that;}//主体CSS等待事件,ready: function(fn){var cssname = 'laydate', ver = '',path = (isLayui ? 'modules/laydate/' : 'theme/') + 'default/laydate.css?v='+ laydate.v + ver;isLayui ? layui.addcss(path, fn, cssname) : ready.link(path, fn, cssname);return this;}}//操作当前实例,thisDate = function(){var that = this;return {//提示框hint: function(content){that.hint.call(that, content);},config: that.config};}//字符常量,MOD_NAME = 'laydate', ELEM = '.layui-laydate', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'laydate-disabled', TIPS_OUT = '开始日期超出了结束日期<br>建议重新选择', LIMIT_YEAR = [100, 200000],ELEM_STATIC = 'layui-laydate-static', ELEM_LIST = 'layui-laydate-list', ELEM_SELECTED = 'laydate-selected', ELEM_HINT = 'layui-laydate-hint', ELEM_PREV = 'laydate-day-prev', ELEM_NEXT = 'laydate-day-next', ELEM_FOOTER = 'layui-laydate-footer', ELEM_CONFIRM = '.laydate-btns-confirm', ELEM_TIME_TEXT = 'laydate-time-text', ELEM_TIME_BTN = '.laydate-btns-time'//组件构造器,Class = function(options){var that = this;that.index = ++laydate.index;that.config = lay.extend({}, that.config, laydate.config, options);laydate.ready(function(){that.init();});}//DOM查找,lay = function(selector){return new LAY(selector);}//DOM构造器,LAY = function(selector){var index = 0,nativeDOM = typeof selector === 'object' ? [selector] : (this.selector = selector,document.querySelectorAll(selector || null));for(; index < nativeDOM.length; index++){this.push(nativeDOM[index]);}};/*lay对象操作*/LAY.prototype = [];LAY.prototype.constructor = LAY;//普通对象深度扩展lay.extend = function(){var ai = 1, args = arguments,clone = function(target, obj){target = target || (obj.constructor === Array ? [] : {});for(var i in obj){//如果值为对象,则进入递归,继续深度合并target[i] = (obj[i] && (obj[i].constructor === Object))? clone(target[i], obj[i]): obj[i];}return target;}args[0] = typeof args[0] === 'object' ? args[0] : {};for(; ai < args.length; ai++){if(typeof args[ai] === 'object'){clone(args[0], args[ai])}}return args[0];};//ie版本lay.ie = function(){var agent = navigator.userAgent.toLowerCase();return (!!window.ActiveXObject || "ActiveXObject" in window) ? ((agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识) : false;}();//中止冒泡lay.stope = function(e){e = e || window.event;e.stopPropagation? e.stopPropagation(): e.cancelBubble = true;};//对象遍历lay.each = function(obj, fn){var key,that = this;if(typeof fn !== 'function') return that;obj = obj || [];if(obj.constructor === Object){for(key in obj){if(fn.call(obj[key], key, obj[key])) break;}} else {for(key = 0; key < obj.length; key++){if(fn.call(obj[key], key, obj[key])) break;}}return that;};//数字前置补零lay.digit = function(num, length, end){var str = '';num = String(num);length = length || 2;for(var i = num.length; i < length; i++){str += '0';}return num < Math.pow(10, length) ? str + (num|0) : num;};//创建元素lay.elem = function(elemName, attr){var elem = document.createElement(elemName);lay.each(attr || {}, function(key, value){elem.setAttribute(key, value);});return elem;};//追加字符LAY.addStr = function(str, new_str){str = str.replace(/\s+/, ' ');new_str = new_str.replace(/\s+/, ' ').split(' ');lay.each(new_str, function(ii, item){if(!new RegExp('\\b'+ item + '\\b').test(str)){str = str + ' ' + item;}});return str.replace(/^\s|\s$/, '');};//移除值LAY.removeStr = function(str, new_str){str = str.replace(/\s+/, ' ');new_str = new_str.replace(/\s+/, ' ').split(' ');lay.each(new_str, function(ii, item){var exp = new RegExp('\\b'+ item + '\\b')if(exp.test(str)){str = str.replace(exp, '');}});return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');};//查找子元素LAY.prototype.find = function(selector){var that = this;var index = 0, arr = [],isObject = typeof selector === 'object';this.each(function(i, item){var nativeDOM = isObject ? [selector] : item.querySelectorAll(selector || null);for(; index < nativeDOM.length; index++){arr.push(nativeDOM[index]);}that.shift();});if(!isObject){that.selector =  (that.selector ? that.selector + ' ' : '') + selector}lay.each(arr, function(i, item){that.push(item);});return that;};//DOM遍历LAY.prototype.each = function(fn){return lay.each.call(this, this, fn);};//添加css类LAY.prototype.addClass = function(className, type){return this.each(function(index, item){item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className)});};//移除css类LAY.prototype.removeClass = function(className){return this.addClass(className, true);};//是否包含css类LAY.prototype.hasClass = function(className){var has = false;this.each(function(index, item){if(new RegExp('\\b'+ className +'\\b').test(item.className)){has = true;}});return has;};//添加或获取属性LAY.prototype.attr = function(key, value){var that = this;return value === undefined ? function(){if(that.length > 0) return that[0].getAttribute(key);}() : that.each(function(index, item){item.setAttribute(key, value);});};//移除属性LAY.prototype.removeAttr = function(key){return this.each(function(index, item){item.removeAttribute(key);});};//设置HTML内容LAY.prototype.html = function(html){return this.each(function(index, item){item.innerHTML = html;});};//设置值LAY.prototype.val = function(value){return this.each(function(index, item){item.value = value;});};//追加内容LAY.prototype.append = function(elem){return this.each(function(index, item){typeof elem === 'object'? item.appendChild(elem):  item.innerHTML = item.innerHTML + elem;});};//移除内容LAY.prototype.remove = function(elem){return this.each(function(index, item){elem ? item.removeChild(elem) : item.parentNode.removeChild(item);});};//事件绑定LAY.prototype.on = function(eventName, fn){return this.each(function(index, item){item.attachEvent ? item.attachEvent('on' + eventName, function(e){e.target = e.srcElement;fn.call(item, e);}) : item.addEventListener(eventName, fn, false);});};//解除事件LAY.prototype.off = function(eventName, fn){return this.each(function(index, item){item.detachEvent? item.detachEvent('on'+ eventName, fn): item.removeEventListener(eventName, fn, false);});};/*组件操作*///是否闰年Class.isLeapYear = function(year){return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;};//默认配置Class.prototype.config = {type: 'date' //控件类型,支持:year/month/date/time/datetime,range: false //是否开启范围选择,即双控件,format: 'yyyy-MM-dd' //默认日期格式,value: null //默认日期,支持传入new Date(),或者符合format参数设定的日期格式字符,min: '1900-1-1' //有效最小日期,年月日必须用“-”分割,时分秒必须用“:”分割。注意:它并不是遵循 format 设定的格式。,max: '2099-12-31' //有效最大日期,同上,trigger: 'focus' //呼出控件的事件,show: false //是否直接显示,如果设置true,则默认直接显示控件,showBottom: true //是否显示底部栏,btns: ['clear', 'now', 'confirm'] //右下角显示的按钮,会按照数组顺序排列,lang: 'cn' //语言,只支持cn/en,即中文和英文,theme: 'default' //主题,position: null //控件定位方式定位, 默认absolute,支持:fixed/absolute/static,calendar: false //是否开启公历重要节日,仅支持中文版,mark: {} //日期备注,如重要事件或活动标记,zIndex: null //控件层叠顺序,done: null //控件选择完毕后的回调,点击清空/现在/确定也均会触发,change: null //日期时间改变后的回调};//多语言Class.prototype.lang = function(){var that = this,options = that.config,text = {cn: {weeks: ['日', '一', '二', '三', '四', '五', '六'],time: ['时', '分', '秒'],timeTips: '选择时间',startTime: '开始时间',endTime: '结束时间',dateTips: '返回日期',month: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],tools: {confirm: '确定',clear: '清空',now: '现在'}},en: {weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],time: ['Hours', 'Minutes', 'Seconds'],timeTips: 'Select Time',startTime: 'Start Time',endTime: 'End Time',dateTips: 'Select Date',month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],tools: {confirm: 'Confirm',clear: 'Clear',now: 'Now'}}};return text[options.lang] || text['cn'];};//初始准备Class.prototype.init = function(){var that = this,options = that.config,dateType = 'yyyy|y|MM|M|dd|d|HH|H|mm|m|ss|s|hh|h',isStatic = options.position === 'static',format = {year: 'yyyy',month: 'yyyy-MM',date: 'yyyy-MM-dd',time: 'HH:mm:ss',datetime: 'yyyy-MM-dd HH:mm:ss'};options.elem = lay(options.elem);options.eventElem = lay(options.eventElem);if(!options.elem[0]) return;//日期范围分隔符if(options.range === true) options.range = '-';//根据不同type,初始化默认formatif(options.format === format.date){options.format = format[options.type];}//将日期格式转化成数组that.format = options.format.match(new RegExp(dateType + '|.', 'g')) || [];//生成正则表达式that.EXP_IF = '';that.EXP_SPLIT = '';lay.each(that.format, function(i, item){var EXP =  new RegExp(dateType).test(item)? '\\d{'+ function(){if(new RegExp(dateType).test(that.format[i === 0 ? i + 1 : i - 1]||'')){if(/^yyyy|y$/.test(item)) return 4;return item.length;}if(/^yyyy$/.test(item)) return '1,4';if(/^y$/.test(item)) return '1,308';return '1,2';}() +'}': '\\' + item;that.EXP_IF = that.EXP_IF + EXP;that.EXP_SPLIT = that.EXP_SPLIT + '(' + EXP + ')';});that.EXP_IF = new RegExp('^'+ (options.range ?that.EXP_IF + '\\s\\'+ options.range + '\\s' + that.EXP_IF: that.EXP_IF) +'$');that.EXP_SPLIT = new RegExp('^'+ that.EXP_SPLIT +'$', '');//如果不是input|textarea元素,则默认采用click事件if(!that.isInput(options.elem[0])){if(options.trigger === 'focus'){options.trigger = 'click';}}//设置唯一KEYif(!options.elem.attr('lay-key')){options.elem.attr('lay-key', that.index);options.eventElem.attr('lay-key', that.index);}//记录重要日期options.mark = lay.extend({}, (options.calendar && options.lang === 'cn') ? {'0-1-1': '元旦','0-2-14': '情人','0-3-8': '妇女','0-3-12': '植树','0-4-1': '愚人','0-5-1': '劳动','0-5-4': '青年','0-6-1': '儿童','0-9-10': '教师','0-9-18': '国耻','0-10-1': '国庆','0-12-25': '圣诞'} : {}, options.mark);//获取限制内日期lay.each(['min', 'max'], function(i, item){var ymd = [], hms = [];if(typeof options[item] === 'number'){ //如果为数字var day = options[item],time = new Date().getTime(),STAMP = 86400000 //代表一天的时间戳,thisDate = new Date(day ? (day < STAMP ? time + day*STAMP : day //如果数字小于一天的时间戳,则数字为天数,否则为时间戳) : time);ymd = [thisDate.getFullYear(), thisDate.getMonth() + 1, thisDate.getDate()];day < STAMP || (hms = [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds()]);} else {ymd = (options[item].match(/\d+-\d+-\d+/) || [''])[0].split('-');hms = (options[item].match(/\d+:\d+:\d+/) || [''])[0].split(':');}options[item] = {year: ymd[0] | 0 || new Date().getFullYear(),month: ymd[1] ? (ymd[1] | 0) - 1 : new Date().getMonth(),date: ymd[2] | 0 || new Date().getDate(),hours: hms[0] | 0,minutes: hms[1] | 0,seconds: hms[2] | 0};});that.elemID = 'layui-laydate'+ options.elem.attr('lay-key');if(options.show || isStatic) that.render();isStatic || that.events();//默认赋值if(options.value){if(options.value.constructor === Date){that.setValue(that.parse(0, that.systemDate(options.value)));} else {that.setValue(options.value);}}};//控件主体渲染Class.prototype.render = function(){var that = this,options = that.config,lang = that.lang(),isStatic = options.position === 'static'//主面板,elem = that.elem = lay.elem('div', {id: that.elemID,'class': ['layui-laydate',options.range ? ' layui-laydate-range' : '',isStatic ? (' '+ ELEM_STATIC) : '',options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : ''].join('')})//主区域,elemMain = that.elemMain = [],elemHeader = that.elemHeader = [],elemCont = that.elemCont = [],elemTable = that.table = []//底部区域,divFooter = that.footer = lay.elem('div', {'class': ELEM_FOOTER});if(options.zIndex) elem.style.zIndex = options.zIndex;//单双日历区域lay.each(new Array(2), function(i){if(!options.range && i > 0){return true;}//头部区域var divHeader = lay.elem('div', {'class': 'layui-laydate-header'})//左右切换,headerChild = [function(){ //上一年var elem = lay.elem('i', {'class': 'layui-icon laydate-icon laydate-prev-y'});elem.innerHTML = '&#xe65a;';return elem;}(), function(){ //上一月var elem = lay.elem('i', {'class': 'layui-icon laydate-icon laydate-prev-m'});elem.innerHTML = '&#xe603;';return elem;}(), function(){ //年月选择var elem = lay.elem('div', {'class': 'laydate-set-ym'}), spanY = lay.elem('span'), spanM = lay.elem('span');elem.appendChild(spanY);elem.appendChild(spanM);return elem;}(), function(){ //下一月var elem = lay.elem('i', {'class': 'layui-icon laydate-icon laydate-next-m'});elem.innerHTML = '&#xe602;';return elem;}(), function(){ //下一年var elem = lay.elem('i', {'class': 'layui-icon laydate-icon laydate-next-y'});elem.innerHTML = '&#xe65b;';return elem;}()]//日历内容区域,divContent = lay.elem('div', {'class': 'layui-laydate-content'}),table = lay.elem('table'),thead = lay.elem('thead'), theadTr = lay.elem('tr');//生成年月选择lay.each(headerChild, function(i, item){divHeader.appendChild(item);});//生成表格thead.appendChild(theadTr);lay.each(new Array(6), function(i){ //表体var tr = table.insertRow(0);lay.each(new Array(7), function(j){if(i === 0){var th = lay.elem('th');th.innerHTML = lang.weeks[j];theadTr.appendChild(th);}tr.insertCell(j);});});table.insertBefore(thead, table.children[0]); //表头divContent.appendChild(table);elemMain[i] = lay.elem('div', {'class': 'layui-laydate-main laydate-main-list-'+ i});elemMain[i].appendChild(divHeader);elemMain[i].appendChild(divContent);elemHeader.push(headerChild);elemCont.push(divContent);elemTable.push(table);});//生成底部栏lay(divFooter).html(function(){var html = [], btns = [];if(options.type === 'datetime'){html.push('<span lay-type="datetime" class="laydate-btns-time">'+ lang.timeTips +'</span>');}lay.each(options.btns, function(i, item){var title = lang.tools[item] || 'btn';if(options.range && item === 'now') return;if(isStatic && item === 'clear') title = options.lang === 'cn' ? '重置' : 'Reset';btns.push('<span lay-type="'+ item +'" class="laydate-btns-'+ item +'">'+ title +'</span>');});html.push('<div class="laydate-footer-btns">'+ btns.join('') +'</div>');return html.join('');}());//插入到主区域lay.each(elemMain, function(i, main){elem.appendChild(main);});options.showBottom && elem.appendChild(divFooter);//生成自定义主题if(/^#/.test(options.theme)){var style = lay.elem('style'),styleText = ['#{{id}} .layui-laydate-header{background-color:{{theme}};}','#{{id}} .layui-this{background-color:{{theme}} !important;}'].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, options.theme);if('styleSheet' in style){style.setAttribute('type', 'text/css');style.styleSheet.cssText = styleText;} else {style.innerHTML = styleText;}lay(elem).addClass('laydate-theme-molv');elem.appendChild(style);}//移除上一个控件that.remove(Class.thisElemDate);//如果是静态定位,则插入到指定的容器中,否则,插入到bodyisStatic ? options.elem.append(elem) : (document.body.appendChild(elem),that.position() //定位);that.checkDate().calendar(); //初始校验that.changeEvent(); //日期切换Class.thisElemDate = that.elemID;typeof options.ready === 'function' && options.ready(lay.extend({}, options.dateTime, {month: options.dateTime.month + 1}));};//控件移除Class.prototype.remove = function(prev){var that = this,options = that.config,elem = lay('#'+ (prev || that.elemID));if(!elem.hasClass(ELEM_STATIC)){that.checkDate(function(){elem.remove();});}return that;};//定位算法Class.prototype.position = function(){var that = this,options = that.config,elem = that.bindElem || options.elem[0],rect = elem.getBoundingClientRect() //绑定元素的坐标,elemWidth = that.elem.offsetWidth //控件的宽度,elemHeight = that.elem.offsetHeight //控件的高度//滚动条高度,scrollArea = function(type){type = type ? 'scrollLeft' : 'scrollTop';return document.body[type] | document.documentElement[type];},winArea = function(type){return document.documentElement[type ? 'clientWidth' : 'clientHeight']}, margin = 5, left = rect.left, top = rect.bottom;//如果右侧超出边界if(left + elemWidth + margin > winArea('width')){left = winArea('width') - elemWidth - margin;}//如果底部超出边界if(top + elemHeight + margin > winArea()){top = rect.top > elemHeight //顶部是否有足够区域显示完全? rect.top - elemHeight: winArea() - elemHeight;top = top - margin*2;}if(options.position){that.elem.style.position = options.position;}that.elem.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';that.elem.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';};//提示Class.prototype.hint = function(content){var that = this,options = that.config,div = lay.elem('div', {'class': ELEM_HINT});div.innerHTML = content || '';lay(that.elem).find('.'+ ELEM_HINT).remove();that.elem.appendChild(div);clearTimeout(that.hinTimer);that.hinTimer = setTimeout(function(){lay(that.elem).find('.'+ ELEM_HINT).remove();}, 3000);};//获取递增/减后的年月Class.prototype.getAsYM = function(Y, M, type){type ? M-- : M++;if(M < 0){M = 11;Y--;}if(M > 11){M = 0;Y++;}return [Y, M];};//系统消息Class.prototype.systemDate = function(newDate){var thisDate = newDate || new Date();return {year: thisDate.getFullYear() //年,month: thisDate.getMonth() //月,date: thisDate.getDate() //日,hours: newDate ? newDate.getHours() : 0 //时,minutes: newDate ? newDate.getMinutes() : 0 //分,seconds: newDate ? newDate.getSeconds() : 0 //秒}};//日期校验Class.prototype.checkDate = function(fn){var that = this,thisDate = new Date(),options = that.config,dateTime = options.dateTime = options.dateTime || that.systemDate(),thisMaxDate, error,elem = that.bindElem || options.elem[0],valType = that.isInput(elem) ? 'val' : 'html',value = (that.isInput(elem) ? elem.value : (options.position === 'static' ? '' : elem.innerHTML)).replace('上', "1").replace('下', "2")//校验日期有效数字,checkValid = function(dateTime){if(dateTime.year > LIMIT_YEAR[1]) dateTime.year = LIMIT_YEAR[1], error = true; //不能超过20万年if(dateTime.month > 11) dateTime.month = 11, error = true;if(dateTime.hours > 23) dateTime.hours = 0, error = true;if(dateTime.minutes > 59) dateTime.minutes = 0, dateTime.hours++, error = true;if(dateTime.seconds > 59) dateTime.seconds = 0, dateTime.minutes++, error = true;//计算当前月的最后一天thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year);if(dateTime.date > thisMaxDate) dateTime.date = thisMaxDate, error = true;}//获得初始化日期值,initDate = function(dateTime, value, index){var startEnd = ['startTime', 'endTime'];value = (value.match(that.EXP_SPLIT) || []).slice(1);index = index || 0;if(options.range){that[startEnd[index]] = that[startEnd[index]] || {};}lay.each(that.format, function(i, item){var thisv = parseFloat(value[i]);if(value[i].length < item.length) error = true;if(/yyyy|y/.test(item)){ //年if(thisv < LIMIT_YEAR[0]) thisv = LIMIT_YEAR[0], error = true; //年不能低于100年dateTime.year = thisv;} else if(/MM|M/.test(item)){ //月if(thisv < 1) thisv = 1, error = true;dateTime.month = thisv - 1;} else if(/dd|d/.test(item)){ //日if(thisv < 1) thisv = 1, error = true;dateTime.date = thisv;} else if(/HH|H/.test(item)){ //时if(thisv < 1) thisv = 0, error = true;dateTime.hours = thisv;options.range && (that[startEnd[index]].hours = thisv);} else if(/mm|m/.test(item)){ //分if(thisv < 1) thisv = 0, error = true;dateTime.minutes = thisv;options.range && (that[startEnd[index]].minutes = thisv);} else if(/ss|s/.test(item)){ //秒if(thisv < 1) thisv = 0, error = true;dateTime.seconds = thisv;options.range && (that[startEnd[index]].seconds = thisv);}else if(/hh|h/.test(item)){ //月if(thisv < 1) thisv = 1, error = true;dateTime.month = thisv - 1;}});checkValid(dateTime)};if(fn === 'limit') return checkValid(dateTime), that;value = value || options.value;if(typeof value === 'string'){value = value.replace(/\s+/g, ' ').replace(/^\s|\s$/g, '');}//如果点击了开始,单未选择结束就关闭,则重新选择开始if(that.startState && !that.endState){delete that.startState;that.endState = true;};if(typeof value === 'string' && value){if(that.EXP_IF.test(value)){ //校验日期格式if(options.range){value = value.split(' '+ options.range +' ');that.startDate = that.startDate || that.systemDate();that.endDate = that.endDate || that.systemDate();options.dateTime = lay.extend({}, that.startDate);lay.each([that.startDate, that.endDate], function(i, item){initDate(item, value[i], i);});} else {initDate(dateTime, value)}} else {that.hint('日期格式不合法<br>必须遵循下述格式:<br>'+ (options.range ? (options.format + ' '+ options.range +' ' + options.format) : options.format) + '<br>已为你重置');error = true;}} else if(value && value.constructor === Date){ //如果值为日期对象时options.dateTime = that.systemDate(value);} else {options.dateTime = that.systemDate();delete that.startState;delete that.endState;delete that.startDate;delete that.endDate;delete that.startTime;delete that.endTime;}checkValid(dateTime);if(error && value){that.setValue(options.range ? (that.endDate ? that.parse() : '') : that.parse());}fn && fn();return that;};//公历重要日期与自定义备注Class.prototype.mark = function(td, YMD){var that = this,mark, options = that.config;lay.each(options.mark, function(key, title){var keys = key.split('-');if((keys[0] == YMD[0] || keys[0] == 0) //每年的每月&& (keys[1] == YMD[1] || keys[1] == 0) //每月的每日&& keys[2] == YMD[2]){ //特定日mark = title || YMD[2];}});mark && td.html('<span class="laydate-day-mark">'+ mark +'</span>');return that;};//无效日期范围的标记Class.prototype.limit = function(elem, date, index, time){var that = this,options = that.config, timestrap = {},dateTime = options[index > 41 ? 'endDate' : 'dateTime'],isOut, thisDateTime = lay.extend({}, dateTime, date || {});lay.each({now: thisDateTime,min: options.min,max: options.max}, function(key, item){timestrap[key] = that.newDate(lay.extend({year: item.year,month: item.month,date: item.date}, function(){var hms = {};lay.each(time, function(i, keys){hms[keys] = item[keys];});return hms;}())).getTime();  //time:是否比较时分秒});isOut = timestrap.now < timestrap.min || timestrap.now > timestrap.max;elem && elem[isOut ? 'addClass' : 'removeClass'](DISABLED);return isOut;};//日历表Class.prototype.calendar = function(value){var that = this,options = that.config,dateTime = value || options.dateTime,thisDate = new Date(), startWeek, prevMaxDate, thisMaxDate,lang = that.lang(),isAlone = options.type !== 'date' && options.type !== 'datetime',index = value ? 1 : 0,tds = lay(that.table[index]).find('td'),elemYM = lay(that.elemHeader[index][2]).find('span');if(dateTime.year < LIMIT_YEAR[0]) dateTime.year = LIMIT_YEAR[0], that.hint('最低只能支持到公元'+ LIMIT_YEAR[0] +'年');if(dateTime.year > LIMIT_YEAR[1]) dateTime.year = LIMIT_YEAR[1], that.hint('最高只能支持到公元'+ LIMIT_YEAR[1] +'年');//记录初始值if(!that.firstDate){that.firstDate = lay.extend({}, dateTime);}//计算当前月第一天的星期thisDate.setFullYear(dateTime.year, dateTime.month, 1);startWeek = thisDate.getDay();prevMaxDate = laydate.getEndDate(dateTime.month || 12, dateTime.year); //计算上个月的最后一天thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year); //计算当前月的最后一天//赋值日lay.each(tds, function(index, item){var YMD = [dateTime.year, dateTime.month], st = 0;item = lay(item);item.removeAttr('class');if(index < startWeek){st = prevMaxDate - startWeek + index;item.addClass('laydate-day-prev');YMD = that.getAsYM(dateTime.year, dateTime.month, 'sub');} else if(index >= startWeek && index < thisMaxDate + startWeek){st = index - startWeek;if(!options.range){st + 1 === dateTime.date && item.addClass(THIS);}} else {st = index - thisMaxDate - startWeek;item.addClass('laydate-day-next');YMD = that.getAsYM(dateTime.year, dateTime.month);}YMD[1]++;YMD[2] = st + 1;item.attr('lay-ymd', YMD.join('-')).html(YMD[2]);that.mark(item, YMD).limit(item, {year: YMD[0],month: YMD[1] - 1,date: YMD[2]}, index);});//同步头部年月lay(elemYM[0]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1));lay(elemYM[1]).attr('lay-ym', dateTime.year + '-' + (dateTime.month + 1));if(options.lang === 'cn'){lay(elemYM[0]).attr('lay-type', 'year').html(dateTime.year + '年')lay(elemYM[1]).attr('lay-type', 'month').html((dateTime.month + 1) + '月');} else {lay(elemYM[0]).attr('lay-type', 'month').html(lang.month[dateTime.month]);lay(elemYM[1]).attr('lay-type', 'year').html(dateTime.year);}//初始默认选择器if(isAlone){if(options.range){value ? that.endDate = (that.endDate || {year: dateTime.year + (options.type === 'year' ? 1 : 0),month: dateTime.month + (options.type === 'month' ? 0 : -1)}) : (that.startDate = that.startDate || {year: dateTime.year,month: dateTime.month});if(value){that.listYM = [[that.startDate.year, that.startDate.month + 1],[that.endDate.year, that.endDate.month + 1]];that.list(options.type, 0).list(options.type, 1);//同步按钮可点状态options.type === 'time' ? that.setBtnStatus('时间',lay.extend({}, that.systemDate(), that.startTime),lay.extend({}, that.systemDate(), that.endTime)) : that.setBtnStatus(true);}}if(!options.range){that.listYM = [[dateTime.year, dateTime.month + 1]];that.list(options.type, 0);}}//赋值双日历if(options.range && !value){var EYM = that.getAsYM(dateTime.year, dateTime.month)that.calendar(lay.extend({}, dateTime, {year: EYM[0],month: EYM[1]}));}//通过检测当前有效日期,来设定确定按钮是否可点if(!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), null, 0, ['hours', 'minutes', 'seconds']);//标记选择范围if(options.range && value && !isAlone) that.stampRange();return that;};//生成年月时分秒列表Class.prototype.list = function(type, index){var that = this,options = that.config,dateTime = options.dateTime,lang = that.lang(),isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器,ul = lay.elem('ul', {'class': ELEM_LIST + ' ' + ({year: 'laydate-year-list',month: 'laydate-month-list',time: 'laydate-time-list'})[type]}),elemHeader = that.elemHeader[index],elemYM = lay(elemHeader[2]).find('span'),elemCont = that.elemCont[index || 0],haveList = lay(elemCont).find('.'+ ELEM_LIST)[0],isCN = options.lang === 'cn',text = isCN ? '年' : '',listYM = that.listYM[index] || {},hms = ['hours', 'minutes', 'seconds'],startEnd = ['startTime', 'endTime'][index];if(listYM[0] < 1) listYM[0] = 1;if(type === 'year'){ //年列表var yearNum, startY = yearNum = listYM[0] - 7;if(startY < 1) startY = yearNum = 1;lay.each(new Array(15), function(i){var li = lay.elem('li', {'lay-ym': yearNum}), ymd = {year: yearNum};yearNum == listYM[0] && lay(li).addClass(THIS);li.innerHTML = yearNum + text;ul.appendChild(li);if(yearNum < that.firstDate.year){ymd.month = options.min.month;ymd.date = options.min.date;} else if(yearNum >= that.firstDate.year){ymd.month = options.max.month;ymd.date = options.max.date;}that.limit(lay(li), ymd, index);yearNum++;});lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', (yearNum - 8) + '-' + listYM[1]).html((startY + text) + ' - ' + (yearNum - 1 + text));} else if(type === 'month'){ //月列表lay.each(new Array(12), function(i){var li = lay.elem('li', {'lay-ym': i}), ymd = {year: listYM[0], month: i};i + 1 == listYM[1] && lay(li).addClass(THIS);li.innerHTML = lang.month[i] + (isCN ? '月' : '');ul.appendChild(li);if(listYM[0] < that.firstDate.year){ymd.date = options.min.date;} else if(listYM[0] >= that.firstDate.year){ymd.date = options.max.date;}that.limit(lay(li), ymd, index);});lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1]).html(listYM[0] + text);} else if(type === 'time'){ //时间列表//检测时分秒状态是否在有效日期时间范围内var setTimeStatus = function(){lay(ul).find('ol').each(function(i, ol){lay(ol).find('li').each(function(ii, li){that.limit(lay(li), [{hours: ii}, {hours: that[startEnd].hours,minutes: ii}, {hours: that[startEnd].hours,minutes: that[startEnd].minutes,seconds: ii}][i], index, [['hours'], ['hours', 'minutes'], ['hours', 'minutes', 'seconds']][i]);});});if(!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), that[startEnd], 0, ['hours', 'minutes', 'seconds']);};if(options.range){if(!that[startEnd]) that[startEnd] = {hours: 0,minutes: 0,seconds: 0};} else {that[startEnd] = dateTime;}lay.each([24, 60, 60], function(i, item){var li = lay.elem('li'), childUL = ['<p>'+ lang.time[i] +'</p><ol>'];lay.each(new Array(item), function(ii){childUL.push('<li'+ (that[startEnd][hms[i]] === ii ? ' class="'+ THIS +'"' : '') +'>'+ lay.digit(ii, 2) +'</li>');});li.innerHTML = childUL.join('') + '</ol>';ul.appendChild(li);});setTimeStatus();}//插入容器if(haveList) elemCont.removeChild(haveList);elemCont.appendChild(ul);//年月if(type === 'year' || type === 'month'){//显示切换箭头lay(that.elemMain[index]).addClass('laydate-ym-show');//选中lay(ul).find('li').on('click', function(){var ym = lay(this).attr('lay-ym') | 0;if(lay(this).hasClass(DISABLED)) return;if(index === 0){dateTime[type] = ym;if(isAlone) that.startDate[type] = ym;that.limit(lay(that.footer).find(ELEM_CONFIRM), null, 0);} else { //范围选择if(isAlone){ //非date/datetime类型that.endDate[type] = ym;} else { //date/datetime类型var YM = type === 'year'? that.getAsYM(ym, listYM[1] - 1, 'sub'): that.getAsYM(listYM[0], ym, 'sub');lay.extend(dateTime, {year: YM[0],month: YM[1]});}}if(options.type === 'year' || options.type === 'month'){lay(ul).find('.'+ THIS).removeClass(THIS);lay(this).addClass(THIS);//如果为年月选择器,点击了年列表,则切换到月选择器if(options.type === 'month' && type === 'year'){that.listYM[index][0] = ym;isAlone && (that[['startDate', 'endDate'][index]].year = ym);that.list('month', index);}} else {that.checkDate('limit').calendar();that.closeList();}that.setBtnStatus(); //同步按钮可点状态options.range || that.done(null, 'change');lay(that.footer).find(ELEM_TIME_BTN).removeClass(DISABLED);});} else {var span = lay.elem('span', {'class': ELEM_TIME_TEXT}), scroll = function(){ //滚动条定位lay(ul).find('ol').each(function(i){var ol = this,li = lay(ol).find('li')ol.scrollTop = 30*(that[startEnd][hms[i]] - 2);if(ol.scrollTop <= 0){li.each(function(ii, item){if(!lay(this).hasClass(DISABLED)){ol.scrollTop = 30*(ii - 2);return true;}});}});}, haveSpan = lay(elemHeader[2]).find('.'+ ELEM_TIME_TEXT);scroll()span.innerHTML = options.range ? [lang.startTime,lang.endTime][index] : lang.timeTipslay(that.elemMain[index]).addClass('laydate-time-show');if(haveSpan[0]) haveSpan.remove();elemHeader[2].appendChild(span);lay(ul).find('ol').each(function(i){var ol = this;//选择时分秒lay(ol).find('li').on('click', function(){var value = this.innerHTML | 0;if(lay(this).hasClass(DISABLED)) return;if(options.range){that[startEnd][hms[i]]  = value;} else {dateTime[hms[i]] = value;}lay(ol).find('.'+ THIS).removeClass(THIS);lay(this).addClass(THIS);setTimeStatus();scroll();(that.endDate || options.type === 'time') && that.done(null, 'change');//同步按钮可点状态that.setBtnStatus();});});}return that;};//记录列表切换后的年月Class.prototype.listYM = [];//关闭列表Class.prototype.closeList = function(){var that = this,options = that.config;lay.each(that.elemCont, function(index, item){lay(this).find('.'+ ELEM_LIST).remove();lay(that.elemMain[index]).removeClass('laydate-ym-show laydate-time-show');});lay(that.elem).find('.'+ ELEM_TIME_TEXT).remove();};//检测结束日期是否超出开始日期Class.prototype.setBtnStatus = function(tips, start, end){var that = this,options = that.config,isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM),isAlone = options.range && options.type !== 'date' && options.type !== 'time';if(isAlone){start = start || that.startDate;end = end || that.endDate;isOut = that.newDate(start).getTime() > that.newDate(end).getTime();//如果不在有效日期内,直接禁用按钮,否则比较开始和结束日期(that.limit(null, start) || that.limit(null, end))? elemBtn.addClass(DISABLED): elemBtn[isOut ? 'addClass' : 'removeClass'](DISABLED);//是否异常提示if(tips && isOut) that.hint(typeof tips === 'string' ? TIPS_OUT.replace(/日期/g, tips) : TIPS_OUT);}};//转义为规定格式的日期字符Class.prototype.parse = function(state, date){var that = this,options = that.config,dateTime = date || (state? lay.extend({}, that.endDate, that.endTime): (options.range ? lay.extend({}, that.startDate, that.startTime) : options.dateTime)),format = that.format.concat();//转义为规定格式lay.each(format, function(i, item){if(/yyyy|y/.test(item)){ //年format[i] = lay.digit(dateTime.year, item.length);} else if(/MM|M/.test(item)){ //月format[i] = lay.digit(dateTime.month + 1, item.length);} else if(/dd|d/.test(item)){ //日format[i] = lay.digit(dateTime.date, item.length);} else if(/HH|H/.test(item)){ //时format[i] = lay.digit(dateTime.hours, item.length);} else if(/mm|m/.test(item)){ //分format[i] = lay.digit(dateTime.minutes, item.length);} else if(/ss|s/.test(item)){ //秒format[i] = lay.digit(dateTime.seconds, item.length);} else if(/hh|h/.test(item)){ //半年format[i] = lay.digit(dateTime.month + 1, item.length).replace('1', "上").replace('2', "下");}});//返回日期范围字符if(options.range && !state){return format.join('') + ' '+ options.range +' ' + that.parse(1);}return format.join('');};//创建指定日期时间对象Class.prototype.newDate = function(dateTime){dateTime = dateTime || {};return new Date(dateTime.year || 1,dateTime.month || 0,dateTime.date || 1,dateTime.hours || 0,dateTime.minutes || 0,dateTime.seconds || 0);};//赋值Class.prototype.setValue = function(value){var that = this,options = that.config,elem = that.bindElem || options.elem[0],valType = that.isInput(elem) ? 'val' : 'html'options.position === 'static' || lay(elem)[valType](value || '');return this;};//标记范围内的日期Class.prototype.stampRange = function(){var that = this,options = that.config,startTime, endTime,tds = lay(that.elem).find('td');if(options.range && !that.endDate) lay(that.footer).find(ELEM_CONFIRM).addClass(DISABLED);if(!that.endDate) return;startTime = that.newDate({year: that.startDate.year,month: that.startDate.month,date: that.startDate.date}).getTime();endTime = that.newDate({year: that.endDate.year,month: that.endDate.month,date: that.endDate.date}).getTime();if(startTime > endTime) return that.hint(TIPS_OUT);lay.each(tds, function(i, item){var ymd = lay(item).attr('lay-ymd').split('-'),thisTime = that.newDate({year: ymd[0],month: ymd[1] - 1,date: ymd[2]}).getTime();lay(item).removeClass(ELEM_SELECTED + ' ' + THIS);if(thisTime === startTime || thisTime === endTime){lay(item).addClass(lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT)? ELEM_SELECTED: THIS);}if(thisTime > startTime && thisTime < endTime){lay(item).addClass(ELEM_SELECTED);}});};//执行done/change回调Class.prototype.done = function(param, type){var that = this,options = that.config,start = lay.extend({}, that.startDate ? lay.extend(that.startDate, that.startTime) : options.dateTime),end = lay.extend({}, lay.extend(that.endDate, that.endTime))lay.each([start, end], function(i, item){if(!('month' in item)) return;lay.extend(item, {month: item.month + 1});});param = param || [that.parse(), start, end];typeof options[type || 'done'] === 'function' && options[type || 'done'].apply(options, param);return that;};//选择日期Class.prototype.choose = function(td){var that = this,options = that.config,dateTime = options.dateTime,tds = lay(that.elem).find('td'),YMD = td.attr('lay-ymd').split('-'),setDateTime = function(one){var thisDate = new Date();//同步dateTimeone && lay.extend(dateTime, YMD);//记录开始日期if(options.range){that.startDate ? lay.extend(that.startDate, YMD) : (that.startDate = lay.extend({}, YMD, that.startTime));that.startYMD = YMD;}};YMD = {year: YMD[0] | 0,month: (YMD[1] | 0) - 1,date: YMD[2] | 0};if(td.hasClass(DISABLED)) return;//范围选择if(options.range){lay.each(['startTime', 'endTime'], function(i, item){that[item] = that[item] || {hours: 0,minutes: 0,seconds: 0};});if(that.endState){ //重新选择setDateTime();delete that.endState;delete that.endDate;that.startState = true;tds.removeClass(THIS + ' ' + ELEM_SELECTED);td.addClass(THIS);} else if(that.startState){ //选中截止td.addClass(THIS);that.endDate ? lay.extend(that.endDate, YMD) : (that.endDate = lay.extend({}, YMD, that.endTime));//判断是否顺时或逆时选择if(that.newDate(YMD).getTime() < that.newDate(that.startYMD).getTime()){var startDate = lay.extend({}, that.endDate, {hours: that.startDate.hours,minutes: that.startDate.minutes,seconds: that.startDate.seconds});lay.extend(that.endDate, that.startDate, {hours: that.endDate.hours,minutes: that.endDate.minutes,seconds: that.endDate.seconds});that.startDate = startDate;}options.showBottom || that.done();that.stampRange(); //标记范围内的日期that.endState = true;that.done(null, 'change');} else { //选中开始td.addClass(THIS);setDateTime();that.startState = true;}lay(that.footer).find(ELEM_CONFIRM)[that.endDate ? 'removeClass' : 'addClass'](DISABLED);} else if(options.position === 'static'){ //直接嵌套的选中setDateTime(true);that.calendar().done().done(null, 'change');} else if(options.type === 'date'){setDateTime(true);that.setValue(that.parse()).remove().done();} else if(options.type === 'datetime'){setDateTime(true);that.calendar().done(null, 'change');}};//底部按钮Class.prototype.tool = function(btn, type){var that = this,options = that.config,dateTime = options.dateTime,isStatic = options.position === 'static',active = {//选择时间datetime: function(){if(lay(btn).hasClass(DISABLED)) return;that.list('time', 0);options.range && that.list('time', 1);lay(btn).attr('lay-type', 'date').html(that.lang().dateTips);}//选择日期,date: function(){that.closeList();lay(btn).attr('lay-type', 'datetime').html(that.lang().timeTips);}//清空、重置,clear: function(){that.setValue('').remove();isStatic && (lay.extend(dateTime, that.firstDate),that.calendar())options.range && (delete that.startState,delete that.endState,delete that.endDate,delete that.startTime,delete that.endTime);that.done(['', {}, {}]);}//现在,now: function(){var thisDate = new Date();lay.extend(dateTime, that.systemDate(), {hours: thisDate.getHours(),minutes: thisDate.getMinutes(),seconds: thisDate.getSeconds()});that.setValue(that.parse()).remove();isStatic && that.calendar();that.done();}//确定,confirm: function(){if(options.range){if(!that.endDate) return that.hint('请先选择日期范围');if(lay(btn).hasClass(DISABLED)) return that.hint(options.type === 'time' ? TIPS_OUT.replace(/日期/g, '时间') : TIPS_OUT);} else {if(lay(btn).hasClass(DISABLED)) return that.hint('不在有效日期或时间范围内');}that.done();that.setValue(that.parse()).remove()}};active[type] && active[type]();};//统一切换处理Class.prototype.change = function(index){var that = this,options = that.config,dateTime = options.dateTime,isAlone = options.range && (options.type === 'year' || options.type === 'month'),elemCont = that.elemCont[index || 0],listYM = that.listYM[index],addSubYeay = function(type){var startEnd = ['startDate', 'endDate'][index],isYear = lay(elemCont).find('.laydate-year-list')[0],isMonth = lay(elemCont).find('.laydate-month-list')[0];//切换年列表if(isYear){listYM[0] = type ? listYM[0] - 15 : listYM[0] + 15;that.list('year', index);}if(isMonth){ //切换月面板中的年type ? listYM[0]-- : listYM[0]++;that.list('month', index);}if(isYear || isMonth){lay.extend(dateTime, {year: listYM[0]});if(isAlone) that[startEnd].year = listYM[0];options.range || that.done(null, 'change');that.setBtnStatus();options.range || that.limit(lay(that.footer).find(ELEM_CONFIRM), {year: listYM[0]});}return isYear || isMonth;};return {prevYear: function(){if(addSubYeay('sub')) return;dateTime.year--;that.checkDate('limit').calendar();options.range || that.done(null, 'change');},prevMonth: function(){var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub');lay.extend(dateTime, {year: YM[0],month: YM[1]});that.checkDate('limit').calendar();options.range || that.done(null, 'change');},nextMonth: function(){var YM = that.getAsYM(dateTime.year, dateTime.month);lay.extend(dateTime, {year: YM[0],month: YM[1]});that.checkDate('limit').calendar();options.range || that.done(null, 'change');},nextYear: function(){if(addSubYeay()) return;dateTime.year++that.checkDate('limit').calendar();options.range || that.done(null, 'change');}};};//日期切换事件Class.prototype.changeEvent = function(){var that = this,options = that.config;//日期选择事件lay(that.elem).on('click', function(e){lay.stope(e);});//年月切换lay.each(that.elemHeader, function(i, header){//上一年lay(header[0]).on('click', function(e){that.change(i).prevYear();});//上一月lay(header[1]).on('click', function(e){that.change(i).prevMonth();});//选择年月lay(header[2]).find('span').on('click', function(e){var othis = lay(this),layYM = othis.attr('lay-ym'),layType = othis.attr('lay-type');if(!layYM) return;layYM = layYM.split('-');that.listYM[i] = [layYM[0] | 0, layYM[1] | 0];that.list(layType, i);lay(that.footer).find(ELEM_TIME_BTN).addClass(DISABLED);});//下一月lay(header[3]).on('click', function(e){that.change(i).nextMonth();});//下一年lay(header[4]).on('click', function(e){that.change(i).nextYear();});});//点击日期lay.each(that.table, function(i, table){var tds = lay(table).find('td');tds.on('click', function(){that.choose(lay(this));});});//点击底部按钮lay(that.footer).find('span').on('click', function(){var type = lay(this).attr('lay-type');that.tool(this, type);});};//是否输入框Class.prototype.isInput = function(elem){return /input|textarea/.test(elem.tagName.toLocaleLowerCase());};//绑定的元素事件处理Class.prototype.events = function(){var that = this,options = that.config//绑定呼出控件事件,showEvent = function(elem, bind){elem.on(options.trigger, function(){bind && (that.bindElem = this);that.render();});};if(!options.elem[0] || options.elem[0].eventHandler) return;showEvent(options.elem, 'bind');showEvent(options.eventElem);//绑定关闭控件事件lay(document).on('click', function(e){if(e.target === options.elem[0]|| e.target === options.eventElem[0]|| e.target === lay(options.closeStop)[0]){return;}that.remove();}).on('keydown', function(e){if(e.keyCode === 13){if(lay('#'+ that.elemID)[0] && that.elemID === Class.thisElem){e.preventDefault();lay(that.footer).find(ELEM_CONFIRM)[0].click();}}});//自适应定位lay(window).on('resize', function(){if(!that.elem || !lay(ELEM)[0]){return false;}that.position();});options.elem[0].eventHandler = true;};//核心接口laydate.render = function(options){var inst = new Class(options);return thisDate.call(inst);};//得到某月的最后一天laydate.getEndDate = function(month, year){var thisDate = new Date();//设置日期为下个月的第一天thisDate.setFullYear(year || thisDate.getFullYear(),month || (thisDate.getMonth() + 1),1);//减去一天,得到当前月最后一天return new Date(thisDate.getTime() - 1000*60*60*24).getDate();};//暴露laywindow.lay = window.lay || lay;//加载方式isLayui ? (laydate.ready(),layui.define(function(exports){ //layui加载laydate.path = layui.cache.dir;exports(MOD_NAME, laydate);})) : ((typeof define === 'function' && define.amd) ? define(function(){ //requirejs加载return laydate;}) : function(){ //普通script标签加载laydate.ready();window.laydate = laydate}());}();

3.替换好之后将laydate组件包复制到项目中,引用

功能实现实例代码。

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<link rel="stylesheet" href="../../js/jqwidgets/styles/jqx.base.css" type="text/css" />
<title></title>
</head>
<script src="../../js/jquery/jquery.min.js"></script>
<script src="../../js/laydate/laydate.js"></script>
<script type="text/javascript" src="../../js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../js/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../js/jqwidgets/jqxinput.js"></script>
<script src="../../js/jqwidgets/jqxdropdownlist.js"></script><body>
<a href="/"> 官方教学:/</a>
<p>使用laydate.js 实现年,月,季,日, 半年度 的选择</p>
<table><tr><td>周期选择</td><td><div><div id="dateSpan" style="float:left;"><input type="text" id="date1" readonly></div><div id = "cycle" style="float:right;"></div></div></td><td><input type="button" id="getValue" value="获取值" ></td></tr>
</table>
<script type="text/javascript">$(function (){init();getLaydateValue();})/**处理日期值用于查询**/function getLaydateValue(){$("#getValue").jqxButton({template:'primary'}).on('click',function(){var cycle = $('#cycle').val();var date = $("#date1").val();var begin_date = '';var end_date = '';if(date == ''){alert('周期不能为空');}else{var sp = date.split(" ~ ");if(cycle == 'year'){begin_date = sp[0] + '0101';end_date = sp[1] + '1231';}else if(cycle == 'quarter'){for (var i = 0; i < sp.length; i++) {var spq = sp[i].split("年");var year = spq[0];var month = '';switch (spq[1]) {case '1季度':month = i == 0? '0101':'0331';break;case '2季度':month = i == 0? '0401':'0630';break;case '3季度':month = i == 0? '0701':'0930';break;case '4季度':month = i == 0? '1001':'1231';break;}i == 0?begin_date = year+month:end_date = year+month;}}else if(cycle == 'month'){begin_date = sp[0] + '01';end_date = sp[1]+getLastDayOfMonth(sp[1].substring(0,4),sp[1].substring(4,6));}else if(cycle == 'semiAnnual'){for (var i = 0; i < sp.length; i++) {var spq = sp[i].split("年-");var year = spq[0];var month = '';switch (spq[1]) {case '上半年':month = i == 0? '0101':'0630';break;case '下半年':month = i == 0? '0701':'1231';break;}i == 0?begin_date = year+month:end_date = year+month;}}else{begin_date = sp[0];end_date = sp[1];}}console.log("日期结果为:" +begin_date +" ~ "+ end_date);})}/***根据年份和月份,获取当月的最后一天@return 28,29,30,31*/function getLastDayOfMonth(year,month){var date = new Date(year,month-1,'01');//设置日期date.setDate(1);//设置月份date.setMonth(date.getMonth()+1);// 获取本月最后一天cdate = new Date(date.getTime() - 1000*60*60*24);//返回结果return cdate.getDate();}/**1.初始date为年月日的选择2.根据下拉框选择年,月,日,季度的选项,动态变换组件为只可选择年,只可选择季度,只可选择年月,只可选择半年度的操作半年度和季度laydate并没有提供,我们自己实现这个功能**/function init(){//初始化下拉框$("#cycle").jqxDropDownList({source:[{"ITEM_NAME":"日","ITEM_ID":"day"},{"ITEM_NAME":"月","ITEM_ID":"month"},{"ITEM_NAME":"季度","ITEM_ID":"quarter"},{"ITEM_NAME":"半年度","ITEM_ID":"semiAnnual"},{"ITEM_NAME":"年","ITEM_ID":"year"}],width:50,height:23,selectedIndex:0,//默认选中第一个,displayMember:"ITEM_NAME",valueMember:"ITEM_ID",enableBrowserBoundsDetection:true,checkboxes:false,autoDropDownHeight:true}) $("#date1").jqxInput({height:23,width:210});//初始化laydate为年月日的选择laydate.render({elem:'#date1',type:'date',range:'~', //range 为范围选择,加上初始化有两个日期选择器,去掉为一个日期选择器format:'yyyyMMdd'})//选择下拉框触发此事件				$("#cycle").on('change',function(event){//当选择下拉框时,根据选择重新初始化date插件$("#dateSpan").html("<input type='text' id='date1' readonly>")$("#date1").jqxInput({height:23,width:210})var ages = event.args;if(args){var value = args.item.value;//获取所选的值ITEM_IDswitch (value) {case "year"://type = year,日期插件只能选择年laydate.render({elem:'#date1',type:'year',range:'~', //range 为范围选择,加上初始化有两个日期选择器,去掉为一个日期选择器format:'yyyy'})break;case "semiAnnual"://type = month,将月选择替换为季度var dates = new Date();var timeScope = laydate.render({elem:'#date1',type:'month',range:'~', //range 为范围选择,加上初始化有两个日期选择器,去掉为一个日期选择器format: 'yyyy年-h半年',//value: dates.getFullYear() + "年-上半年  ~ "+  dates.getFullYear() +"年-下半年",ready: function () {var hd = $("#layui-laydate" + $("#date1").attr("lay-key"));if (hd.length > 0) {hd.click(function () {initSemiAnnual($(this));});}initSemiAnnual(hd);},});//解决:半年度模式下 只选择年份不选择年度 点击确定,或者初始化时点击之后什么也不选就点击确定 ,返回,如2020年上8半年~2020年下9半年的错误。timeScope.config.value = new Date().getFullYear() + "年-1半年  ~ "+  new Date().getFullYear() +"年-2半年";break;case "quarter"://type = month,将月选择替换为季度var timeScope = laydate.render({elem:'#date1',type:'month',range:'~', //range 为范围选择,加上初始化有两个日期选择器,去掉为一个日期选择器format:'yyyy年M季度',ready: function () {var hd = $("#layui-laydate" + $("#date1").attr("lay-key"));if (hd.length > 0) {hd.click(function () {initQuarter($(this));});}initQuarter(hd);}}); //解决:季度状态下只选择年份不选择季度点击确定,返回值为当前月的季度,如2020年8季度~20209季度var dates = new Date();timeScope.config.value = dates.getFullYear() + "年1季度  ~ "+  dates.getFullYear() +"年2季度";break;case "month"://type = month,日期插件只能选择年月laydate.render({elem:'#date1',type:'month',range:'~', //range 为范围选择,加上初始化有两个日期选择器,去掉为一个日期选择器format:'yyyyMM'})break;case "day"://type = date,日期插件只能选择年月日,默认可不加该属性laydate.render({elem:'#date1',type:'date',range:'~', //range 为范围选择,加上初始化有两个日期选择器,去掉为一个日期选择器format:'yyyyMMdd'})break;}}})		}/**初始化季度:**/
function initQuarter(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, "季度").replace(/一/g, "第1").replace(/二/g, "第2").replace(/三/g, "第3").replace(/四/g, "第4");} else {ele.style.display = "none";}});});
}/**初始化半年度:**/
function initSemiAnnual(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 < 2) {cx = cx.replace(/月/g, "半年");ele.innerHTML = cx.replace(/一/g, "上").replace(/二/g, "下");} else {ele.style.display = "none";}});});
}</script>
</body>
</html>

参考文章1:/
参考文章2:.html

实例百度网盘链接:
提取码:pc76

更多推荐

使用laydate组件 创建年度,季度,月,日期,半年度的选择

本文发布于:2024-03-09 14:28:14,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1725231.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:半年度   组件   季度   日期   年度

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!