js实现日期选择控件Word文档格式.docx

1、* author FreshFlower * site * version 1.0.2*/var JTC = ;JTC.config = /日期背景颜色与字体颜色 依次: 可选择; 今天; 鼠标移过; 不可选择 dayBgColor : #B1ED89, #FF66E0#F9D23A,#EDECF0, dayColor :#303136#6F6F6F forward : 0 , /控制日期可选择的范围 0:无限制; 1:仅可选择过去的日期; 2.仅可选择未来的日期 includeToday : 1 , /是否可以选择今天: 0: 不可选 1: 可以选择; format : yyyy-MM-dd

2、, /返回日期值的格式 outObject : null , bgDivID :JTC_BG_DIV, yearSpan :JTC_TheCurYear yearSelectSpan :JTC_SelectYearLayer yearSelectCtrl :JTC_SelectYearCtrl monthSpan :JTC_TheCurMonth monthSelectSpan :JTC_SelectMonthLayer monthSelectCtrl :JTC_SelectMonthCtrl dayPanelId :JTC_TheCurDay;JTC.$ = function（id,doc）

3、 var doc = doc | document; return doc.getElementById（id）;JTC.$ = function（name, doc） return doc.createElement（name）;JTC.browser = （function（） var ua = navigator.userAgent.toLowerCase（）; return VERSION: ua.match（/（msie|firefox|webkit|opera）/:s（d+）/） ? RegExp.$2 :0 IE: （ua.indexOf（msie） -1 & ua.indexO

4、f（opera） = -1）, GECKO:geckokhtml WEBKIT:applewebkit -1）, OPERA: -1） ;）（）;JTC.util = createTable : function（doc） var table = JTC.$（table,doc）; table.cellPadding = 0; table.cellSpacing = 0; table.border = 0; return table: table, cell: table.insertRow（0）.insertCell（0）; , formatDate : function（date, for

5、mat） var lang = M+ : date.getMonth（） + 1,d+ date.getDate（） if（/（y+）/.test（format） format = format.replace（RegExp.$1, （date.getFullYear（） + ）.substr（4 - RegExp.$1.length）; for（var key in lang） if（new RegExp（ + key + ）.test（format） format = format.replace（RegExp.$1, RegExp.$1.length=1 ? langkey : （00

6、+ langkey）.substr（ + langkey）.length）; return format; addEvent : function（el, event, listener） if （el.addEventListener） el.addEventListener（event, listener, false）; else if （el.attachEvent） el.attachEvent（on + event, listener）; getCoords : function（ev） ev = ev | window.event; x : ev.clientX, y : ev.

7、clientY getDocumentElement : function（doc） doc = doc | document; return （patMode != CSS1Compat） ? doc.body : doc.documentElement; getScrollPos : function（） var x, y; if （JTC.browser.IE | JTC.browser.OPERA） var el = this.getDocumentElement（）; x = el.scrollLeft; y = el.scrollTop; else x = window.scrol

8、lX; y = window.scrollY; return x : x, y : y; getElementPos : function（el） var x = 0, y = 0; if （el.getBoundingClientRect） var box = el.getBoundingClientRect（）; var pos = this.getScrollPos（）; x = box.left + pos.x - el.clientLeft; y = box.top + pos.y - el.clientTop; x = el.offsetLeft; y = el.offsetTop

9、; var parent = el.offsetParent; while （parent） x += parent.offsetLeft; y += parent.offsetTop; parent = parent.offsetParent;JTC.dialog = function（） this.getYMSelect = function（） var table = JTC.util.createTable（）.table; table.setAttribute（stylewidth:100%;cursor:default;font-size:12px;）; table.style.c

10、ssText = ; var row = table.insertRow（0）; var cell = row.insertCell（0）; cell.style.width = 50px cell.style.textAlign = right var html = span id=+ JTC.config.yearSpan + title=点击这里选择年份 style=50px;pointer; onclick=JTC.events.beginToSelectYear（）2010 html += + JTC.config.yearSelectSpan +display:none; widt

11、h: cell.innerHTML = html; cell = row.insertCell（1）;40pxleft html = + JTC.config.monthSpan +点击这里选择月份40px;JTC.events.beginToSelectMonth（）10+ JTC.config.monthSelectSpan + return table; this.getHeadPanel = function（）height: cell.setAttribute（23px; height:26px; cell.style.cssText = cell.title = 往前翻 月 cel

12、l.innerHTML = button value=JTC.events.turnTheMonth（-1） cell.appendChild（this.getYMSelect（）; cell = row.insertCell（2）;往后翻 月JTC.events.turnTheMonth（1） this.getWeekPanel = function（） font-size: table.cellSpacing = 1; var weekDay = 日一二三四五六; for（var i = 0; i 7; i+） var cell = row.insertCell（i）;20px cell.

13、style.height = cell.style.backgroundColor = #858F5Fcenter cell.innerHTML = weekDayi; this.getDayPanel = function（） var count = 0; for（var i=0;= 5; i+） var row = table.insertRow（i）; for（var j=0; j 36） cell.colSpan = 5;关闭45px;JTC.events.hideLayout（） break; count +; this.getBottomPanel = function（） tab

14、le.style.width = 140px25px往前翻 年25px;auto;JTC.events.turnTheYear（-1）今天JTC.events.resetToToday（） cell = row.insertCell（3）; cell = row.insertCell（4）;往后翻 年JTC.events.turnTheYear（1） var load = JTC.util.createTable（）.table; load.setAttribute（140px;160px;background-color:#ffffff; position:absolute;border-c

15、ollapse:collapse; load.style.cssText = load.border = 1; load.borderColor = var row = load.insertRow（0）; cell.appendChild（this.getHeadPanel（）; row = load.insertRow（1）; cell = row.insertCell（0）; cell.appendChild（this.getWeekPanel（）; row = load.insertRow（2）; cell.appendChild（this.getDayPanel（）; row = l

16、oad.insertRow（3）; cell.appendChild（this.getBottomPanel（）; var div = JTC.$（div div.id = JTC.config.bgDivID; div.setAttribute（position:142;166;z-index:20000; background-color:lightgreen; div.style.cssText = div.appendChild（load）; document.body.appendChild（div）; JTC.util.addEvent（document, keydown,JTC.events.keyDown）;mousedown,JTC.events.mouseDown）;JTC.events = /是否为闰年 isLeapYear : function（year） if（ 0=year%4 & （year% 100 != 0）|（year% 400