突然发现,公司系统居然连一个像样的日期控件都没有,不得了,所以,自己花时间写了一个简单的,慢慢改进扩展。顺便熟悉了一下apply的写法!
不多说了,上代码
代码
  1 /*
  2 * 函数名称: iClinicDate
  3 * 作    者: yithcn
  4 * 功能说明: 日历控件
  5 * 使用说明: new iClinicDate().view('date1'),new iClinicDate().view(this)
  6 * 创建日期: 2010.10.25
  7 */
  8 function iClinicDate() {
  9 };
 10 iClinicDate.prototype = {
 11     initPar: { key: new Date().getTime(), zIndex: 1000, monthRow: 5, dayArr: [] },
 12     ImgArr: { closeBtn: "images/button_close.gif", navLeft: "images/navLeft.gif", Left: "images/left.gif", navRight: "images/navRight.gif", Right: "images/right.gif" },
 13     CtrlBtn: { dest: null, selMonth: null, selYear: null, Left: null, navLeft: null, Right: null, navRight: null, viewDiv: null, closeBtn: null, viewInfo: null },
 14     DateFormat: {
 15         Week: ["<font color='red'>Sun</font>""Mon""Tue""Wed""Thur""Fri""<font color='red'>Sat</font>"],
 16         Month: ["January""February""March""April""May""June""July""August""September""October""November""December"],
 17         MonthDay: [312831303130313130313031],
 18         base: 60 * 60 * 24 * 1000,
 19         Add: function(num, sDate) {
 20             num = num || 0;
 21             var base = this.base * num;
 22             var todayMs = sDate.getTime();
 23             todayMs += base;
 24             sDate.setTime(todayMs);
 25             return sDate;
 26         },
 27         getFormat: function(dateStr) {
 28             var m = dateStr ? dateStr.getMonth() : new Date().getMonth() + 1;
 29             dateStr = dateStr || new Date();
 30             return { y: parseInt(dateStr.getFullYear()), m: parseInt(m), d: parseInt(dateStr.getDate()) };
 31         }
 32     },
 33     Style: {
 34         tdStyle: "font-size: 12px;height: 20;font-family: verdana, arial, helvetica;",
 35         thStyle: "font-size: 11px;height: 25;font-family: verdana, arial, helvetica;background-color:#ebf4fc;width:10%",
 36         selStyle: "color:black; background:white; font-family:verdana, arial, helvetica; font-size:11px;  BORDER-BOTTOM:#DDE3E6 solid 1px; BORDER-LEFT:#ADC3C6 solid 1px; BORDER-RIGHT:#DDE3E6 solid 1px; BORDER-TOP:#ADC3C6 solid 1px;",
 37         btnStyle: "cursor:pointer; color:black; background:#f0f0f0; font-family:verdana, arial, helvetica; font-size:12px; height:18px;line-height:18px; width:20px;text-align:center;BORDER-BOTTOM:#909090 solid 1px; BORDER-LEFT:#e0e0e0 solid 1px; BORDER-RIGHT:#909090 solid 1px; BORDER-TOP:#e0e0e0 solid 1px"
 38     },
 39     buildTH: function(vle) {
 40         return '<th style="' + this.Style.thStyle + '">' + vle + '</th>';
 41     },
 42     create: function(dateStr) {
 43         var that = this;
 44         var thStyle = that.Style.thStyle;
 45         var tdStyle = that.Style.tdStyle;
 46         that.initPar.dayArr.length = 0;
 47         var y = parseInt(dateStr.getFullYear());
 48         var m = parseInt(dateStr.getMonth());
 49         var d = parseInt(dateStr.getDate());
 50         dateStr = new Date((m + 1+ "/1/" + y);
 51         var dayofweek = parseInt(dateStr.getDay());
 52         var html = '<table style="border-collapse: collapse;border: 1px solid #fcfcfc" cellspacing="0" cellpadding="0" width="100%" align="center" border="1">';
 53         html += '<tr>';
 54         for (var i = 0, len = that.DateFormat.Week.length; i < len; i++)
 55             html += that.buildTH(that.DateFormat.Week[i]);
 56         html += '</tr>';
 57         if (m == 1) {
 58             if (parseInt(y) % 4 == 0)
 59                 that.DateFormat.MonthDay[m] = 29;
 60             else
 61                 that.DateFormat.MonthDay[m] = 28;
 62         }
 63         var nowprintday = 0;
 64         var truedayMonth = that.DateFormat.MonthDay[m];
 65         var html_week = "";
 66         for (var j = 0; j < 6; j++) {
 67             that.initPar.monthRow = j;
 68             dayofweek = parseInt(dateStr.getDay());
 69             html_week += '<tr align="center">';
 70             for (var w = 0; w < dayofweek; w++) {
 71                 if (m == 0)
 72                     m = 12;
 73                 var x = parseInt(parseInt(that.DateFormat.MonthDay[m - 1]) - dayofweek + (w + 1));
 74                 html_week += '<td><font color="#d3d3d3">' + x + '</font></td>';
 75             }
 76             for (var tw = dayofweek; tw < 7; tw++) {
 77                 nowprintday++;
 78                 if (nowprintday == d) {
 79                     html_week += '<td id="td_' + nowprintday + '" style="' + tdStyle + 'background-color:#ebf4fc;"><b>' + nowprintday + '</b></td>';
 80                 }
 81                 else {
 82                     html_week += '<td id="td_' + nowprintday + '" style="' + tdStyle + '">' + nowprintday + '</td>';
 83                 }
 84                 dateStr = that.DateFormat.Add(1, dateStr);
 85                 that.initPar.dayArr[nowprintday - 1= "td_" + nowprintday;
 86                 if (nowprintday >= truedayMonth)
 87                     break;
 88             }
 89             html_week += '</tr>';
 90             if (nowprintday >= truedayMonth)
 91                 break;
 92         }
 93         html += html_week;
 94         html += '</table>';
 95         return html;
 96     },
 97     initCalendar: function(dateStr) {
 98         if (dateStr == "")
 99             dateStr = new Date();
100         if (typeof dateStr == "string")
101             dateStr = new Date(dateStr);
102         dateStr = dateStr || new Date();
103         var that = this;
104         var ymd = that.DateFormat.getFormat(dateStr);
105         var key = that.initPar.key;
106         var btnStyle = that.Style.btnStyle;
107         var selStyle = that.Style.selStyle;
108         var closeImg = that.initPar.closeImg;
109         var html = '';
110         html += '<div id="viewdiv_' + key + '" style="position: absolute; display: none; width: 260px; height: 178px;cursor:pointer;z-index: ' + (that.initPar.zIndex + 1+ ';background-color:white;border:1px solid #6D84B4">';
111         html += '<div style="background-color:#6D84B4;padding:0px 5px;height:30px;line-height:30px;">';
112         html += '<div style="width:88%;float:left;text-align:left;padding:6px 0px;"><table cellspacing="0" cellpadding="0" style="width:100%" align="center">';
113         html += '<tr><td><img src="' + that.ImgArr.navLeft + '" id="left_2_' + key + '"></td><td><img src="' + that.ImgArr.Left + '" id="left_1_' + key + '"></td>';
114         html += '<td>';
115         html += '<select style="' + selStyle + 'width: 90px" size="1" id="monthList_' + key + '">';
116         for (var i = 0; i < 12; i++)
117             html += '<option value="' + (i + 1+ '' + (i == ymd.m ? "selected=true" : ""+ '>' + that.DateFormat.Month[i] + '</option>';
118         html += '</select>';
119         html += '</td><td>';
120         html += '<select style="' + selStyle + 'width: 60px" size="1" id="yearList_' + key + '">';
121         for (var i = 1900; i < ymd.y + 20; i++)
122             html += '<option value="' + i + '' + (i == ymd.y ? "selected=true" : ""+ '>' + i + '</option>';
123         html += '</select>';
124         html += '</td><td><img src="' + that.ImgArr.Right + '" id="right_1_' + key + '"></td><td><img src="' + that.ImgArr.navRight + '" id="right_2_' + key + '"></td>';
125         html += '</tr></table></div>';
126         html += '<div style="width:12%;float:right;text-align:right;padding:6px 0px;"><img id="but_close_' + key + '" src="' + that.ImgArr.closeBtn + '"></div>';
127         html += '</div>';
128         html += '<div id="info_' + key + '" style="cursor:pointer">';
129         html += this.create(dateStr);
130         html += '</div>';
131         ymd = that.DateFormat.getFormat();
132         html += '<div style="background-color:#ebf4fc;height:20px;line-height:20px;text-align:right;font-family:verdana, arial, helvetica; font-size:12px;">Today: ' + (ymd.m + "/" + ymd.d + "/" + ymd.y) + '&nbsp;</div>';
133         html += '</div>';
134         return html;
135     },
136     getPosXY: function(e) {
137         if (e) {
138             var t = e.offsetTop;
139             var l = e.offsetLeft;
140             var height = e.offsetHeight;
141             while (e = e.offsetParent) {
142                 t += e.offsetTop;
143                 l += e.offsetLeft;
144             }
145             return { top: t + height, left: l };
146         }
147         else
148             return { top: 0, left: 0 };
149     },
150     addEventHandler: function(oTarget, sEventType, fnHandler) {
151         if (oTarget.addEventListener) { //FF
152             oTarget.addEventListener(sEventType, fnHandler, false);
153         } else if (oTarget.attachEvent) {   //IE
154             oTarget.attachEvent("on" + sEventType, fnHandler);
155         } else {
156             oTarget["on" + sEventType] = fnHandler;
157         }
158     },
159     setHeight: function() {
160         var that = this;
161         if (that.initPar.monthRow > 4)
162             that.CtrlBtn.viewDiv.style.height = 200 + "px";
163         else
164             that.CtrlBtn.viewDiv.style.height = 178 + "px";
165     },
166     setValue: function(that, vle) {
167         return function() {
168             that.CtrlBtn.dest.value = vle;
169             that.CtrlBtn.viewDiv.style.display = "none";
170         };
171     },
172     modifyValue: function(that, type, status, num) {
173         return function() {
174             var d = 0, m = 0, y = 0;
175             d = new Date().getDate();
176             if (status == 0) {
177                 m = that.CtrlBtn.selMonth.value;
178                 y = that.CtrlBtn.selYear.value;
179             }
180             else {
181                 m = parseInt(that.CtrlBtn.selMonth.value);
182                 y = parseInt(that.CtrlBtn.selYear.value);
183                 if (type == "m") {
184                     m += num;
185                     if (m > 12) {
186                         y += 1;
187                         m -= 12;
188                     }
189                     if (m <= 0) {
190                         y -= 1;
191                         m = 12 - m;
192                     }
193                 }
194                 if (type == "y") {
195                     y += num;
196                 }
197                 if (y > parseInt(that.CtrlBtn.selYear.options[that.CtrlBtn.selYear.length - 1].value)) {
198                     y = parseInt(that.CtrlBtn.selYear.options[that.CtrlBtn.selYear.length - 1].value);
199                 }
200                 if (y < parseInt(that.CtrlBtn.selYear.options[0].value)) {
201                     y = parseInt(that.CtrlBtn.selYear.options[0].value);
202                 }
203                 that.CtrlBtn.selMonth.value = m;
204                 that.CtrlBtn.selYear.value = y;
205             }
206             var dateStr = m + "/" + d + "/" + y;
207             that.CtrlBtn.viewInfo.innerHTML = that.create(new Date(dateStr));
208             that.bindEvent2();
209             that.setHeight();
210         };
211     },
212     bindEvent: function() {
213         var that = this;
214         that.addEventHandler(that.CtrlBtn.closeBtn, 'click'function() { that.CtrlBtn.viewDiv.style.display = "none"; });
215         that.addEventHandler(that.CtrlBtn.selMonth, 'change', that.modifyValue.apply(that.CtrlBtn.selMonth, [that, "m"0]));
216         that.addEventHandler(that.CtrlBtn.selYear, 'change', that.modifyValue.apply(that.CtrlBtn.selYear, [that, "y"0]));
217         that.addEventHandler(that.CtrlBtn.Left, 'click', that.modifyValue.apply(that.CtrlBtn.Left, [that, "m"1-1]));
218         that.addEventHandler(that.CtrlBtn.navLeft, 'click', that.modifyValue.apply(that.CtrlBtn.navLeft, [that, "y"1-1]));
219         that.addEventHandler(that.CtrlBtn.Right, 'click', that.modifyValue.apply(that.CtrlBtn.Right, [that, "m"11]));
220         that.addEventHandler(that.CtrlBtn.navRight, 'click', that.modifyValue.apply(that.CtrlBtn.navRight, [that, "y"11]));
221         that.bindEvent2();
222         that.setHeight();
223     },
224     bindEvent2: function() {
225         var that = this;
226         for (var i = 0, len = that.initPar.dayArr.length; i < len; i++) {
227             var tdObj = document.getElementById(that.initPar.dayArr[i]);
228             var m = that.CtrlBtn.selMonth.value;
229             m = m < 10 ? "0" + m : m;
230             var d = (i + 1< 10 ? "0" + (i + 1) : (i + 1);
231             var text = m + "/" + d + "/" + that.CtrlBtn.selYear.value;
232             that.addEventHandler(tdObj, 'click', that.setValue.apply(tdObj, [that, text]));
233         }
234     },
235     setObject: function() {
236         var that = this;
237         var key = that.initPar.key;
238         that.CtrlBtn.viewDiv = document.getElementById("viewdiv_" + key);
239         that.CtrlBtn.selMonth = document.getElementById("monthList_" + key);
240         that.CtrlBtn.selYear = document.getElementById("yearList_" + key);
241         that.CtrlBtn.closeBtn = document.getElementById("but_close_" + key);
242         that.CtrlBtn.Left = document.getElementById("left_1_" + key);
243         that.CtrlBtn.navLeft = document.getElementById("left_2_" + key);
244         that.CtrlBtn.Right = document.getElementById("right_1_" + key);
245         that.CtrlBtn.navRight = document.getElementById("right_2_" + key);
246         that.CtrlBtn.viewInfo = document.getElementById("info_" + key);
247     },
248     view: function(dest) {
249         if (!dest || dest == "") {
250             alert("No target!");
251             return;
252         }
253         var that = this;
254         if (typeof dest == "string")
255             dest = document.getElementById(dest);
256         that.CtrlBtn.dest = dest;
257         if (document.getElementById("body_div_temp_"))
258             document.getElementById("body_div_temp_").innerHTML = that.initCalendar(that.CtrlBtn.dest.value);
259         if (!document.getElementById("body_div_temp_")) {
260             var div = document.createElement("div");
261             div.id = "body_div_temp_";
262             div.innerHTML = that.initCalendar(that.CtrlBtn.dest.value);
263             document.body.appendChild(div);
264         }
265         that.setObject();
266         that.bindEvent();
267         var o = that.getPosXY(that.CtrlBtn.dest);
268         that.CtrlBtn.viewDiv.style.top = o.top;
269         that.CtrlBtn.viewDiv.style.left = o.left;
270         that.CtrlBtn.viewDiv.style.display = "";
271     }
272 };
273 

 

posted on 2010-10-25 15:16  Yithcn  阅读(250)  评论(1编辑  收藏  举报