jeDate日期控件 - (原生JS)
jeDate6.5.0是一款原生JS开发的不依赖任何第三方库大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护！
jeDate群01：516754269（已满） jeDate群02：73371254
此为部分个例展示，更多请看 详细日期控件API。
| {%=yearlist[i][y].y%}'+ytxt+' | {% if((y+1)%3==0){ %}
| {%=monthlist[i][m].m%}'+mtxt+' | {% if((m+1)%3==0){ %}
| {%=daylist[i][d].day%} | {% if((d+1)%7==0){ %}
{%=lang.times[0]%}
{%=lang.times[1]%}
{%=lang.times[2]%}
' + d + '' + lunartext + '
'; }else{ festivalStr = '' + d + '
'; } return festivalStr; }; //判断是否在限制的日期之中 var dateLimit = function(Y, M, D, isMonth){ var thatNum = parseInt(Y + "" + jet.digit(M) + "" + jet.digit(D)); if(isMonth){ if (thatNum >= minNum && thatNum <= maxNum) return true; }else { if (minNum > thatNum || maxNum < thatNum) return true; } }; var regExpDate = function (date,cls) { var inArray = function (search,array){ for(var i in array) if(array[i]==search) return true; return false; }; if(endval.length > 0 && endval[0]!=""){ if(/\%/g.test(endval[0])){ var reval = endval[0].replace(/\%/g,"").split(","), enArr = []; jet.each(reval,function (r,rel) { enArr.push(jet.digit(parseInt(rel))); }); var isfind = inArray(jet.digit(date), enArr) == false; cls = jet.isBool(endval[1]) ? (isfind ? " disabled" :cls) : (isfind ? cls :" disabled"); }else { var valreg = that.dateRegExp(endval[0]), regday = valreg.test(jet.digit(date)); cls = jet.isBool(endval[1]) ? (regday ? " disabled" : cls) : (regday ? cls : " disabled"); } } return cls; }; //var ymds = ymdarr[1] //上一月剩余天数 for (var p = prevDaysNum - firstWeek + 1; p <= prevDaysNum; p++, count++) { var pmark = setMark(prevM.y,prevM.m,p), pcls = dateLimit(prevM.y, prevM.m, p, false) ? "disabled" : "other"; pcls = regExpDate(p,pcls); daysArr.push({style:pcls,ymd:prevM.y+'-'+jet.digit(prevM.m)+'-'+jet.digit(p),day:(isfestival(prevM.y,prevM.m,p) + pmark)}); } //本月的天数 for(var b = 1; b <= daysNum; b++, count++){ var bmark = setMark(yd,md,b), bcls = ""; var dateval = parseInt(yd+""+jet.digit(md)+""+jet.digit(b)), parsdate = dateval > startDate, rangdate = dateval < endDate; if(dateLimit(yd, md, b, true)){ if(dateval == startDate || dateval == endDate){ bcls = " action"; }else if(parsdate&&rangdate){ bcls = " contain"; }else { bcls = ""; } }else { bcls = " disabled"; } bcls = regExpDate(b,bcls); daysArr.push({style:"normal"+bcls,ymd:yd+'-'+jet.digit(md)+'-'+jet.digit(b),day:(isfestival(yd,md,b) + bmark)}); } //下一月开始天数 for(var n = 1, nlen = 42 - count; n <= nlen; n++){ var nmark = setMark(nextM.y,nextM.m,n); var ncls = dateLimit(nextM.y, nextM.m, n, false) ? "disabled" : "other"; ncls = regExpDate(n,ncls); daysArr.push({style:ncls,ymd:nextM.y+'-'+jet.digit(nextM.m)+'-'+jet.digit(n),day:(isfestival(nextM.y,nextM.m,n) + nmark)}); } //将星期与日期拼接起来 return daysArr; }, eachTime : function (hmsArr,type) { var that = this,opts = that.$opts, range = opts.range,multi = opts.multiPane, minVal = [], maxVal = [], mhms = ["hh","mm","ss"], timeArr = [],hmsCls = '',format = that.format, ntVal = jet.trim(that.minDate).replace(/\s+/g," "), xtVal = jet.trim(that.maxDate).replace(/\s+/g," "), nVal = ntVal.split(" "), xVal = xtVal.split(" "); if(that.dlen>3 && /\:/.test(nVal) && /\:/.test(xVal)){ minVal = jet.reMatch(/\s/.test(ntVal)&&that.dlen>3 ? nVal[1] : ntVal); maxVal = jet.reMatch(/\s/.test(xtVal)&&that.dlen>3 ? xVal[1] : xtVal); } jet.each([24,60,60],function (s,lens) { timeArr[s] = []; var unhmsVal = minVal[s] == undefined || minVal[s] == 0 ? hmsArr[mhms[s]] : minVal[s], currVal = that.getValue() == "" ? unhmsVal : hmsArr[mhms[s]]; if(that.dlen>3 && /\:/.test(nVal) && type==1){ that.selectTime[0][mhms[s]] = currVal; } for (var h = 0; h < lens; h++) { var exists = new RegExp(mhms[s],"g").test(format); if(h == currVal){ hmsCls = exists ? "action" : "disabled"; }else if(!exists || !range && multi &&(h' + lunar.solarYear + '\u5E74' + lunar.solarMonth + '\u6708' + lunar.solarDate + '\u65E5 ' + lunar.inWeekDays + '
\u519C\u5386：' + lunar.shengxiao + '\u5E74 ' + lunar.lnongMonth + '\u6708' + lunar.lnongDate + '
' + lunar.ganzhiYear + '\u5E74 ' + lunar.ganzhiMonth + '\u6708 ' + lunar.ganzhiDate + '\u65E5
'; var Fesjieri = (lunar.solarFestival || lunar.lunarFestival) != "" ? '' + ("\u8282\u65E5："+lunar.solarFestival + lunar.lunarFestival) + '
' : ""; var Fesjieqi = lunar.jieqi != "" ? ''+(lunar.jieqi != "" ? "\u8282\u6C14："+lunar.jieqi : "") + '
': ""; var tiptext = (lunar.solarFestival || lunar.lunarFestival || lunar.jieqi) != "" ? (Fesjieri + Fesjieqi) : ""; jet.html(tipDiv,tiphtml + tiptext); document.body.appendChild(tipDiv); //获取并设置农历提示框出现的位置 var tipPos = that.lunarOrien(tipDiv, this); jet.setCss(tipDiv,{"zIndex": (opts.zIndex == undefined ? 10000 + 5 : opts.zIndex + 5),top:tipPos.top,left:tipPos.left,position:"absolute",display:"block"}); }); //鼠标移除提示框消失 jet.on(node,"mouseout",function () { document.body.removeChild($Q("#jedatetipscon")); }); }); if (that.dateCell.nodeType === 1 && !jet.hasClass(that.dateCell,"grid")) that.dateCell.className = that.dateCell.className + " grid"; }, //农历方位辨别 lunarOrien : function(obj, self, pos) { var tops, leris, ortop, orleri, rect =self.getBoundingClientRect(), boxW = obj.offsetWidth, boxH = obj.offsetHeight; leris = rect.right + boxW / 1.5 >= jet.docArea(true) ? rect.right - boxW : rect.left + (pos ? 0 : jet.docScroll(true)); tops = rect.bottom + boxH / 1 <= jet.docArea() ? rect.bottom - 1 : rect.top > boxH / 1.5 ? rect.top - boxH - 1 : jet.docArea() - boxH; if(leris + boxW > jet.docArea(true)) leris = rect.left - (boxW - rect.width); ortop = Math.max(tops + (pos ? 0 :jet.docScroll()) + 1, 1) + "px", orleri = leris + "px"; return {top: ortop, left: orleri } }, //辨别控件的方位 dateOrien : function(elbox, valCls, pos) { var that = this, tops, leris, ortop, orleri, rect = that.$opts.fixed ? valCls.getBoundingClientRect() : elbox.getBoundingClientRect(), leris = rect.left, tops = rect.bottom; if(that.$opts.fixed) { var boxW = elbox.offsetWidth, boxH = elbox.offsetHeight; //如果右侧超出边界 if(leris + boxW > jet.docArea(true)){ leris = leris - (boxW - rect.width); } //如果底部超出边界 if(tops + boxH > jet.docArea()){ tops = rect.top > boxH ? rect.top - boxH -2 : jet.docArea() - boxH -1; } //根据目标元素计算弹层位置 ortop = Math.max(tops + (pos ? 0 :jet.docScroll())+1, 1) + "px"; orleri = leris + "px"; }else{ //弹层位置位于页面上下左右居中 ortop = "50%"; orleri = "50%"; elbox.style.cssText = "marginTop:"+-(rect.height / 2)+";marginLeft:"+-(rect.width / 2); } jet.setCss(elbox,{top:ortop,left:orleri}); }, tips : function (text, time) { var that = this, tipCls = $Q(".jedate-tips",that.dateCell),tipTime; jet.html(tipCls,text||""); jet.setCss(tipCls,{display:"block"}); clearTimeout(tipTime); tipTime = setTimeout(function(){ jet.html(tipCls,""); jet.setCss(tipCls,{display:"none"}); }, (time||2.5)*1000); }, locateScroll : function () { var that = this, ulCell = $Q(".jedate-time",that.dateCell).querySelectorAll("ul"); jet.each(ulCell, function(i,cell) { var hmsCls = cell.querySelector(".action"); cell.scrollTop = hmsCls ? (hmsCls.offsetTop-145):0; }); if(that.dlen != 7) jet.setCss($Q(".jedate-time",that.dateCell),{display:'none'}); } }); //农历数据 function jeLunar(ly,lm,ld) { var lunarInfo=[19416,19168,42352,21717,53856,55632,91476,22176,39632,21970,19168,42422,42192,53840,119381,46400,54944,44450,38320,84343,18800,42160,46261,27216,27968,109396,11104,38256,21234,18800,25958,54432,59984,28309,23248,11104,100067,37600,116951,51536,54432,120998,46416,22176,107956,9680,37584,53938,43344,46423,27808,46416,86869,19872,42448,83315,21200,43432,59728,27296,44710,43856,19296,43748,42352,21088,62051,55632,23383,22176,38608,19925,19152,42192,54484,53840,54616,46400,46496,103846,38320,18864,43380,42160,45690,27216,27968,44870,43872,38256,19189,18800,25776,29859,59984,27480,21952,43872,38613,37600,51552,55636,54432,55888,30034,22176,43959,9680,37584,51893,43344,46240,47780,44368,21977,19360,42416,86390,21168,43312,31060,27296,44368,23378,19296,42726,42208,53856,60005,54576,23200,30371,38608,19415,19152,42192,118966,53840,54560,56645,46496,22224,21938,18864,42359,42160,43600,111189,27936,44448], sTermInfo = [ 0, 21208, 43467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758 ]; var Gan = "甲乙丙丁戊己庚辛壬癸", Zhi = "子丑寅卯辰巳午未申酉戌亥", Animals = "鼠牛虎兔龙蛇马羊猴鸡狗猪"; var solarTerm = [ "小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至" ]; var nStr1 = "日一二三四五六七八九十", nStr2 = "初十廿卅", nStr3 = [ "正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "腊"], sFtv1 = { "0101" : "*1元旦节", "0202" : "湿地日", "0214" : "情人节", "0308" : "妇女节", "0312" : "植树节", "0315" : "消费者权益日", "0401" : "愚人节", "0422" : "地球日", "0501" : "*1劳动节", "0504" : "青年节", "0512" : "护士节", "0518" : "博物馆日", "0520" : "母亲节", "0601" : "儿童节", "0623" : "奥林匹克日", "0630" : "父亲节", "0701" : "建党节", "0801" : "建军节", "0903" : "抗战胜利日", "0910" : "教师节", "1001" : "*3国庆节", "1201" : "艾滋病日", "1224" : "平安夜", "1225" : "圣诞节" }, sFtv2 = { "0100" : "除夕", "0101" : "*2春节", "0115" : "元宵节", "0505" : "*1端午节", "0707" : "七夕节", "0715" : "中元节", "0815" : "*1中秋节", "0909" : "*1重阳节", "1015" : "下元节", "1208" : "腊八节", "1223" : "小年" }; function flunar(Y) { var sTerm = function (j, i) { var h = new Date((31556925974.7 * (j - 1900) + sTermInfo[i] * 60000) + Date.UTC(1900, 0, 6, 2, 5)); return (h.getUTCDate()); }, d = function (k) { var h, j = 348; for (h = 32768; h > 8; h >>= 1) j += (lunarInfo[k - 1900] & h) ? 1 : 0; return (j + b(k)); }, ymdCyl = function (h) { return (Gan.charAt(h % 10) + Zhi.charAt(h % 12)); }, b = function (h) { var islp = (g(h)) ? ((lunarInfo[h - 1900] & 65536) ? 30 : 29) : (0); return islp; }, g = function (h) { return (lunarInfo[h - 1900] & 15) }, e = function (i, h) { return ((lunarInfo[i - 1900] & (65536 >> h)) ? 30 : 29); }, newymd = function (m) { var k, j = 0, h = 0, l = new Date(1900, 0, 31), n = (m - l) / 86400000; this.dayCyl = n + 40; this.monCyl = 14; for (k = 1900; k < 2050 && n > 0; k++) { h = d(k); n -= h; this.monCyl += 12; } if (n < 0) { n += h; k--; this.monCyl -= 12; } this.year = k; this.yearCyl = k - 1864; j = g(k); this.isLeap = false; for (k = 1; k < 13 && n > 0; k++) { if (j > 0 && k == (j + 1) && this.isLeap == false) { --k; this.isLeap = true; h = b(this.year); } else { h = e(this.year, k); } if (this.isLeap == true && k == (j + 1)) { this.isLeap = false; } n -= h; if (this.isLeap == false) this.monCyl++; } if (n == 0 && j > 0 && k == j + 1) { if (this.isLeap) { this.isLeap = false; } else { this.isLeap = true; --k; --this.monCyl; } } if (n < 0) { n += h; --k; --this.monCyl; } this.month = k; this.day = n + 1; }, digit = function (num) { return num < 10 ? "0" + (num | 0) : num; }, reymd = function (i, j) { var h = i; return j.replace(/dd?d?d?|MM?M?M?|yy?y?y?/g, function (k) { switch (k) { case "yyyy": var l = "000" + h.getFullYear(); return l.substring(l.length - 4); case "dd": return digit(h.getDate()); case "d": return h.getDate().toString(); case "MM": return digit((h.getMonth() + 1)); case "M": return h.getMonth() + 1; } }); }, lunarMD = function (i, h) { var j; switch (i, h) { case 10: j = "初十"; break; case 20: j = "二十"; break; case 30: j = "三十"; break; default: j = nStr2.charAt(Math.floor(h / 10)); j += nStr1.charAt(h % 10); } return j; }; this.isToday = false; this.isRestDay = false; this.solarYear = reymd(Y, "yyyy"); this.solarMonth = reymd(Y, "M"); this.solarDate = reymd(Y, "d"); this.solarWeekDay = Y.getDay(); this.inWeekDays = "星期" + nStr1.charAt(this.solarWeekDay); var X = new newymd(Y); this.lunarYear = X.year; this.shengxiao = Animals.charAt((this.lunarYear - 4) % 12); this.lunarMonth = X.month; this.lunarIsLeapMonth = X.isLeap; this.lnongMonth = this.lunarIsLeapMonth ? "闰" + nStr3[X.month - 1] : nStr3[X.month - 1]; this.lunarDate = X.day; this.showInLunar = this.lnongDate = lunarMD(this.lunarMonth, this.lunarDate); if (this.lunarDate == 1) { this.showInLunar = this.lnongMonth + "月"; } this.ganzhiYear = ymdCyl(X.yearCyl); this.ganzhiMonth = ymdCyl(X.monCyl); this.ganzhiDate = ymdCyl(X.dayCyl++); this.jieqi = ""; this.restDays = 0; if (sTerm(this.solarYear, (this.solarMonth - 1) * 2) == reymd(Y, "d")) { this.showInLunar = this.jieqi = solarTerm[(this.solarMonth - 1) * 2]; } if (sTerm(this.solarYear, (this.solarMonth - 1) * 2 + 1) == reymd(Y, "d")) { this.showInLunar = this.jieqi = solarTerm[(this.solarMonth - 1) * 2 + 1]; } if (this.showInLunar == "清明") { this.showInLunar = "清明节"; this.restDays = 1; } this.solarFestival = sFtv1[reymd(Y, "MM") + reymd(Y, "dd")]; if (typeof this.solarFestival == "undefined") { this.solarFestival = ""; } else { if (/\*(\d)/.test(this.solarFestival)) { this.restDays = parseInt(RegExp.$1); this.solarFestival = this.solarFestival.replace(/\*\d/, ""); } } this.showInLunar = (this.solarFestival == "") ? this.showInLunar : this.solarFestival; this.lunarFestival = sFtv2[this.lunarIsLeapMonth ? "00" : digit(this.lunarMonth) + digit(this.lunarDate)]; if (typeof this.lunarFestival == "undefined") { this.lunarFestival = ""; } else { if (/\*(\d)/.test(this.lunarFestival)) { this.restDays = (this.restDays > parseInt(RegExp.$1)) ? this.restDays : parseInt(RegExp.$1); this.lunarFestival = this.lunarFestival.replace(/\*\d/, ""); } } if (this.lunarMonth == 12 && this.lunarDate == e(this.lunarYear, 12)) { this.lunarFestival = sFtv2["0100"]; this.restDays = 1; } this.showInLunar = (this.lunarFestival == "") ? this.showInLunar : this.lunarFestival; } return new flunar(new Date(ly, lm, ld)); } return jeDate; }); ================================================ FILE: test/demo.js ================================================ /** * jeDate 演示 */ var enLang = { name : "en", month : ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], weeks : [ "SUN","MON","TUR","WED","THU","FRI","SAT" ], times : ["Hour","Minute","Second"], timetxt: ["Time","Start Time","End Time"], backtxt:"Back", clear : "Clear", today : "Now", yes : "Confirm", close : "Close" } //常规选择 jeDate("#test01",{ //festival:true, //multiPane:false, format: "YYYY" }); jeDate("#test02",{ format: "YYYY-MM" }); jeDate("#test03",{ //onClose:false, format: "MM-DD-YYYY" }); jeDate("#test04",{ festival:true, minDate:"1900-01-01", //最小日期 maxDate:"2099-12-31", //最大日期 method:{ choose:function (params) { } }, format: "YYYY-MM-DD hh:mm:ss" }); var jds = jeDate("#test05",{ minDate:"01:02:08", //最小日期 maxDate:"15:25:35", //最大日期 format: "hh:mm:ss" }); console.log(jds) //英文语言 jeDate("#enYMD",{ language:enLang, format: "YYYY-MM-DD" }); jeDate("#enYMDhms",{ language:enLang, format: "YYYY-MM-DD hh:mm:ss" }); jeDate("#enhms",{ language:enLang, format: "hh:mm:ss" }); //自定义主题色 jeDate("#testblue",{ theme:{bgcolor:"#00A1CB",pnColor:"#00CCFF"}, multiPane:false, range:" ~ ", format: "YYYY-MM-DD hh:mm:ss" }); jeDate("#testgray",{ theme:{bgcolor:"#00A680",pnColor:"#00DDAA"}, multiPane:false, range:" ~ ", format: "YYYY-MM-DD hh:mm:ss" }); jeDate("#testred",{ theme:{bgcolor:"#D91600",pnColor:"#FF6653"}, multiPane:false, range:" ~ ", format: "YYYY-MM-DD hh:mm:ss" }); //区域范围选择 jeDate("#test06",{ format: "YYYY", range:" ~ " }); jeDate("#test07",{ format: "YYYY-MM", range:" To " }); jeDate("#test08",{ format: "YYYY-MM-DD", range:" 至 " }); //区域范围双面板选择 var jd = jeDate("#test09",{ format: "YYYY", multiPane:false, range:" ~ " }); jeDate("#test10",{ format: "YYYY-MM", multiPane:false, range:" To " }); jeDate("#test11",{ format: "YYYY-MM-DD", multiPane:false, range:" 至 " }); jeDate("#test11A",{ format: "YYYY-MM-DD hh:mm:ss", multiPane:false, range:" 至 " }); jeDate("#test11B",{ minDate:"03:02:04", //最小日期 maxDate:"14:30:45", format: "hh:mm:ss", multiPane:false, range:" 至 " }); jeDate("#test11C",{ format: "hh:mm", multiPane:false, range:" 至 " }); //自定义格式选择 jeDate("#test12",{ format: "YYYY年MM月DD日" }); jeDate("#test13",{ format: "MM-DD-YYYY" }); jeDate("#test14",{ format: "DD/MM/YYYY" }); //一次绑定多个选择 var jel = document.querySelectorAll(".moredate"); for(var j=0;j