免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
兼容 FireFox 的 js 日歷——支持時間的獲取
分類： Javascript 2009-03-04 21:55 3089人閱讀 評論(17) 收藏 舉報

 應(yīng)網(wǎng)友要求，花了五六個小時，為我經(jīng)常用的 js 日歷添加時間的獲取。

 

[javascript] view plaincopy
  1. <!--  
  2. var cal;  
  3. var isFocus=false; //是否為焦點  
  4. var pickMode ={  
  5.     "second":1,  
  6.     "minute":2,  
  7.     "hour":3,  
  8.     "day":4,  
  9.     "month":5,  
  10.     "year":6  };  
  11.       
  12. var topY=0,leftX=0;  //自定義定位偏移量 2007-02-11 由 寒羽楓添加  
  13. //選擇日期 → 由 寒羽楓 2007-06-10 添加，通過 ID 來選日期  
  14. function SelectDateById(id,strFormat,x,y)  
  15. {  
  16.     var obj = document.getElementById(id);  
  17.     if(obj == null){return false;}  
  18.     obj.focus();  
  19.     if(obj.onclick != null){obj.onclick();}  
  20.     else if(obj.click != null){obj.click();}  
  21.     else{SelectDate(obj,strFormat,x,y)}  
  22. }  
  23.   
  24. //選擇日期 → 由 寒羽楓 2006-06-25 添加  
  25. function SelectDate(obj,strFormat,x,y)  
  26. {  
  27.   
  28.     leftX =(x == null) ? leftX : x;  
  29.     topY  =(y == null) ? topY : y;//自定義定位偏移量 2007-02-11 由 寒羽楓添加   
  30.     if(document.getElementById("ContainerPanel")==null){InitContainerPanel();}  
  31.     var date = new Date();  
  32.     var by = date.getFullYear()-50;  //最小值 → 50 年前  
  33.     var ey = date.getFullYear()+50;  //最大值 → 50 年后  
  34.     //cal = new Calendar(by, ey,1,strFormat);    //初始化英文版，0 為中文版  
  35.     cal = (cal==null) ? new Calendar(by, ey, 0) : cal;    //不用每次都初始化 2006-12-03 修正  
  36.     cal.DateMode =pickMode["second"]; //復(fù)位  
  37.       if(strFormat.indexOf('s')< 0) {cal.DateMode =pickMode["minute"];}//精度為分  
  38.       if(strFormat.indexOf('m')< 0) {cal.DateMode =pickMode["hour"];}//精度為時  
  39.       if(strFormat.indexOf('h')< 0) {cal.DateMode =pickMode["day"];}//精度為日  
  40.       if(strFormat.indexOf('d')< 0) {cal.DateMode =pickMode["month"];}//精度為月  
  41.       if(strFormat.indexOf('M')< 0) {cal.DateMode =pickMode["year"];}//精度為年  
  42.       if(strFormat.indexOf('y')< 0) {cal.DateMode =pickMode["second"];}//默認精度為秒  
  43.     cal.dateFormatStyleOld = cal.dateFormatStyle;  
  44.     cal.dateFormatStyle = strFormat;  
  45.     cal.show(obj);  
  46. }  
  47. /**//**//**//**//**//**//**//** 
  48.  * 返回日期 
  49.  * @param d the delimiter 
  50.  * @param p the pattern of your date 
  51.  2006-06-25 由 寒羽楓 修改為根據(jù)用戶指定的 style 來確定； 
  52.  */  
  53. String.prototype.toDate = function(style) {  
  54.   var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年  
  55.   var M = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月  
  56.   var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日  
  57.   var h = this.substring(style.indexOf('h'),style.lastIndexOf('h')+1);//時  
  58.   var m = this.substring(style.indexOf('m'),style.lastIndexOf('m')+1);//分  
  59.   var s = this.substring(style.indexOf('s'),style.lastIndexOf('s')+1);//秒  
  60.   
  61.   if(s == null ||s == "" || isNaN(s)) {s = new Date().getSeconds();}  
  62.   if(m == null ||m == "" || isNaN(m)) {m = new Date().getMinutes();}  
  63.   if(h == null ||h == "" || isNaN(h)) {h = new Date().getHours();}  
  64.   if(d == null ||d == "" || isNaN(d)) {d = new Date().getDate();}  
  65.   if(M == null ||M == "" || isNaN(M)) {M = new Date().getMonth()+1;}  
  66.   if(y == null ||y == "" || isNaN(y)) {y = new Date().getFullYear();}  
  67.   var dt ;  
  68.   eval ("dt = new Date('"+ y+"', '"+(M-1)+"','"+ d+"','"+ h+"','"+ m+"','"+ s +"')");  
  69.   return dt;  
  70. }  
  71.   
  72. /**//**//**//**//**//**//**//** 
  73.  * 格式化日期 
  74.  * @param   d the delimiter 
  75.  * @param   p the pattern of your date 
  76.  * @author  meizz 
  77.  */  
  78. Date.prototype.format = function(style) {  
  79.   var o = {  
  80.     "M+" : this.getMonth() + 1, //month  
  81.     "d+" : this.getDate(),      //day  
  82.     "h+" : this.getHours(),     //hour  
  83.     "m+" : this.getMinutes(),   //minute  
  84.     "s+" : this.getSeconds(),   //second  
  85.     "w+" : "天一二三四五六".charAt(this.getDay()),   //week  
  86.     "q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter  
  87.     "S"  : this.getMilliseconds() //millisecond  
  88.   }  
  89.   if(/(y+)/.test(style)) {  
  90.     style = style.replace(RegExp.$1,  
  91.     (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
  92.   }  
  93.   for(var k in o){  
  94.     if(new RegExp("("+ k +")").test(style)){  
  95.       style = style.replace(RegExp.$1,  
  96.         RegExp.$1.length == 1 ? o[k] :  
  97.         ("00" + o[k]).substr(("" + o[k]).length));  
  98.     }  
  99.   }  
  100.   return style;  
  101. }  
  102.   
  103. //2007-09-14  由寒羽楓添加返回所選日期  
  104. Calendar.prototype.ReturnDate = function(dt) {  
  105.     if (this.dateControl != null){this.dateControl.value = dt;}  
  106.     calendar.hide();  
  107.     if(this.dateControl.onchange == null){return;}    
  108.     //將 onchange 轉(zhuǎn)成其它函數(shù)，以免觸發(fā)驗證事件  
  109.     var ev = this.dateControl.onchange.toString(); //找出函數(shù)的字串  
  110.     ev = ev.substring(  
  111.             ((ev.indexOf("ValidatorOnChange();")> 0) ? ev.indexOf("ValidatorOnChange();") + 20 : ev.indexOf("{") + 1)  
  112.                 , ev.lastIndexOf("}"));//去除驗證函數(shù) ValidatorOnChange();  
  113.     var fun = new Function(ev);     //重新定義函數(shù)  
  114.     this.dateControl.changeEvent = fun;   
  115.     this.dateControl.changeEvent();//觸發(fā)自定義 changeEvent 函數(shù)  
  116. }  
  117.   
  118. /**//**//**//**//**//**//**//** 
  119.  * 日歷類 
  120.  * @param   beginYear 1990 
  121.  * @param   endYear   2010 
  122.  * @param   lang      0(中文)|1(英語) 可自由擴充 
  123.  * @param   dateFormatStyle  "yyyy-MM-dd"; 
  124.  * @version 2006-04-01 
  125.  * @author  KimSoft (jinqinghua [at] gmail.com) 
  126.  * @update 
  127.  */  
  128. function Calendar(beginYear, endYear, lang, dateFormatStyle) {  
  129.   this.beginYear = 1950;  
  130.   this.endYear = 2050;  
  131.   this.lang = 0;            //0(中文) | 1(英文)  
  132.   this.dateFormatStyle = "yyyy-MM-dd hh:mm:ss";  
  133.   
  134.   if (beginYear != null && endYear != null){  
  135.     this.beginYear = beginYear;  
  136.     this.endYear = endYear;  
  137.   }  
  138.   if (lang != null){  
  139.     this.lang = lang  
  140.   }  
  141.   
  142.   if (dateFormatStyle != null){  
  143.     this.dateFormatStyle = dateFormatStyle  
  144.   }  
  145.   
  146.   this.dateControl = null;  
  147.   this.panel = this.getElementById("calendarPanel");  
  148.   this.container = this.getElementById("ContainerPanel");  
  149.   this.form  = null;  
  150.   
  151.   this.date = new Date();  
  152.   this.year = this.date.getFullYear();  
  153.   this.month = this.date.getMonth();  
  154.     
  155.   this.day = this.date.getDate();  
  156.   this.hour = this.date.getHours();  
  157.   this.minute = this.date.getMinutes();  
  158.   this.second = this.date.getSeconds();  
  159.   
  160.   this.colors = {  
  161.   "cur_word"      : "#FFFFFF",  //當(dāng)日日期文字顏色  
  162.   "cur_bg"        : "#00FF00",  //當(dāng)日日期單元格背影色  
  163.   "sel_bg"        : "#FFCCCC",  //已被選擇的日期單元格背影色 2006-12-03 寒羽楓添加    
  164.   "sun_word"      : "#FF0000",  //星期天文字顏色    
  165.   "sat_word"      : "#0000FF",  //星期六文字顏色    
  166.   "td_word_light" : "#333333",  //單元格文字顏色    
  167.   "td_word_dark"  : "#CCCCCC",  //單元格文字暗色    
  168.   "td_bg_out"     : "#EFEFEF",  //單元格背影色  
  169.   "td_bg_over"    : "#FFCC00",  //單元格背影色  
  170.   "tr_word"       : "#FFFFFF",  //日歷頭文字顏色    
  171.   "tr_bg"         : "#666666",  //日歷頭背影色  
  172.   "input_border"  : "#CCCCCC",  //input控件的邊框顏色    
  173.   "input_bg"      : "#EFEFEF"   //input控件的背影色  
  174.   }  
  175. /* //2008-01-29 放到了 show ，因為要做 pickMode 判斷 
  176.   this.draw(); 
  177.   this.bindYear(); 
  178.   this.bindMonth(); 
  179.   */  
  180.   //this.changeSelect();  
  181.   //this.bindData(); //2006-12-30 由民工.磚家注釋  
  182. }  
  183.   
  184. /**//**//**//**//**//**//**//** 
  185.  * 日歷類屬性（語言包，可自由擴展） 
  186.  */  
  187. Calendar.language = {  
  188.   "year"   : [[""], [""]],  
  189.   "months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],  
  190.         ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]  
  191.          ],  
  192.   "weeks"  : [["日","一","二","三","四","五","六"],  
  193.         ["SUN","MON","TUR","WED","THU","FRI","SAT"]  
  194.          ],  
  195.   "hour"  : [["時"], ["H"]],  
  196.   "minute"  : [["分"], ["M"]],  
  197.   "second"  : [["秒"], ["S"]],  
  198.   "clear"  : [["清空"], ["CLS"]],  
  199.   "today"  : [["今天"], ["TODAY"]],  
  200.   "pickTxt"  : [["確定"], ["OK"]],//pickMode 精確到年、月時把今天變成“確定”  
  201.   "close"  : [["關(guān)閉"], ["CLOSE"]]  
  202. }  
  203.   
  204. Calendar.prototype.draw = function() {  
  205.   calendar = this;  
  206.   
  207.   var mvAry = [];  
  208.   //mvAry[mvAry.length]  = '  <form name="calendarForm" style="margin: 0px;">'; //因 <form> 不能嵌套， 2006-12-01 由寒羽楓改用 Div  
  209.   mvAry[mvAry.length]  = '  <div name="calendarForm" style="margin: 0px;">';  
  210.   mvAry[mvAry.length]  = '    <table width="100%" border="0" cellpadding="0" cellspacing="1" style="font-size:12px;">';  
  211.   mvAry[mvAry.length]  = '      <tr>';  
  212.   mvAry[mvAry.length]  = '        <th align="left" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;';  
  213.   if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到年時隱藏“月”  
  214.   mvAry[mvAry.length]  ='" name="prevMonth" type="button" id="prevMonth" value="<" /></th>';  
  215.   mvAry[mvAry.length]  = '        <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;';  
  216.   if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到年時隱藏“月”  
  217.   mvAry[mvAry.length]  = '"></select></th>';  
  218.   mvAry[mvAry.length]  = '        <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;';  
  219.   if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到年時隱藏“月”  
  220.   mvAry[mvAry.length]  ='" name="nextMonth" type="button" id="nextMonth" value=">" /></th>';  
  221.   mvAry[mvAry.length]  = '      </tr>';  
  222.   mvAry[mvAry.length]  = '    </table>';  
  223.   mvAry[mvAry.length]  = '    <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF;font-size:12px;';  
  224.   if(calendar.DateMode >= pickMode["month"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到年、月時隱藏“天”  
  225.   mvAry[mvAry.length]  = '" border="0" cellpadding="3" cellspacing="1">';  
  226.   mvAry[mvAry.length]  = '      <tr>';  
  227.   for(var i = 0; i < 7; i++) {  
  228.     mvAry[mvAry.length]  = '      <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>';  
  229.   }  
  230.   mvAry[mvAry.length]  = '      </tr>';  
  231.   for(var i = 0; i < 6;i++){  
  232.     mvAry[mvAry.length]  = '    <tr align="center">';  
  233.     for(var j = 0; j < 7; j++) {  
  234.       if (j == 0){  
  235.         mvAry[mvAry.length]  = '  <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>';  
  236.       } else if(j == 6) {  
  237.         mvAry[mvAry.length]  = '  <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>';  
  238.       } else {  
  239.         mvAry[mvAry.length]  = '  <td style="cursor:default;"></td>';  
  240.       }  
  241.     }  
  242.     mvAry[mvAry.length]  = '    </tr>';  
  243.   }  
  244.   
  245. //2009-03-03 添加的代碼，放置時間的行  
  246.   mvAry[mvAry.length]  = '      <tr style="';  
  247.     if(calendar.DateMode >= pickMode["day"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到時日隱藏“時間”  
  248.     mvAry[mvAry.length]  = '"><td align="center" colspan="7">';  
  249.   mvAry[mvAry.length]  = '      <select name="calendarHour" id="calendarHour" style="font-size:12px;"></select>' + Calendar.language["hour"][this.lang];  
  250.   mvAry[mvAry.length]  = '<span style="'  
  251.     if(calendar.DateMode >= pickMode["hour"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到小時時隱藏“分”  
  252.   mvAry[mvAry.length]  = '"><select name="calendarMinute" id="calendarMinute" style="font-size:12px;"></select>' + Calendar.language["minute"][this.lang]+'</span>';  
  253.     mvAry[mvAry.length]  = '<span style="'  
  254.     if(calendar.DateMode >= pickMode["minute"]){mvAry[mvAry.length]  = 'display:none;';}//pickMode 精確到小時、分時隱藏“秒”  
  255.    mvAry[mvAry.length]  = '"><select name="calendarSecond" id="calendarSecond" style="font-size:12px;"></select>'+ Calendar.language["second"][this.lang]+'</span>';  
  256.   mvAry[mvAry.length]  = '      </td></tr>';  
  257.     
  258.   mvAry[mvAry.length]  = '    </table>';  
  259.   //mvAry[mvAry.length]  = '  </from>';  
  260.   mvAry[mvAry.length]  = '      <div align="center" style="padding:4px 4px 4px 4px;background-color:' + calendar.colors["input_bg"] + ';">';  
  261.   mvAry[mvAry.length]  = '        <input name="calendarClear" type="button" id="calendarClear" value="' + Calendar.language["clear"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:40px;height:20px;font-size:12px;cursor:pointer;"/>';  
  262.   mvAry[mvAry.length]  = '        <input name="calendarToday" type="button" id="calendarToday" value="'   
  263.   mvAry[mvAry.length]  = (calendar.DateMode == pickMode["day"]) ? Calendar.language["today"][this.lang] : Calendar.language["pickTxt"][this.lang];  
  264.   mvAry[mvAry.length]  = '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:60px;height:20px;font-size:12px;cursor:pointer"/>';  
  265.   mvAry[mvAry.length]  = '        <input name="calendarClose" type="button" id="calendarClose" value="' + Calendar.language["close"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:40px;height:20px;font-size:12px;cursor:pointer"/>';  
  266.   mvAry[mvAry.length]  = '      </div>';  
  267.     
  268.   mvAry[mvAry.length]  = '  </div>';  
  269.   this.panel.innerHTML = mvAry.join("");  
  270.     
  271.   /**//**//**//******** 以下代碼由寒羽楓 2006-12-01 添加 **********/  
  272.   var obj = this.getElementById("prevMonth");  
  273.   obj.onclick = function () {calendar.goPrevMonth(calendar);}  
  274.   obj.onblur = function () {calendar.onblur();}  
  275.   this.prevMonth= obj;  
  276.     
  277.   obj = this.getElementById("nextMonth");  
  278.   obj.onclick = function () {calendar.goNextMonth(calendar);}  
  279.   obj.onblur = function () {calendar.onblur();}  
  280.   this.nextMonth= obj;    
  281.   
  282.   obj = this.getElementById("calendarClear");  
  283.   obj.onclick = function ()   
  284.   { calendar.ReturnDate(""); /*calendar.dateControl.value = "";calendar.hide();*///2007-09-14 由寒羽楓注釋  
  285.   }  
  286.   this.calendarClear = obj;  
  287.     
  288.   obj = this.getElementById("calendarClose");  
  289.   obj.onclick = function () {calendar.hide();}  
  290.   this.calendarClose = obj;  
  291.     
  292.   obj = this.getElementById("calendarYear");  
  293.   obj.onchange = function () {calendar.update(calendar);}  
  294.   obj.onblur = function () {calendar.onblur();}  
  295.   this.calendarYear = obj;  
  296.     
  297.   obj = this.getElementById("calendarMonth");  
  298.   with(obj)  
  299.   {  
  300.     onchange = function () {calendar.update(calendar);}  
  301.     onblur = function () {calendar.onblur();}  
  302.   }this.calendarMonth = obj;  
  303.     
  304.   obj = this.getElementById("calendarHour");  
  305.   obj.onchange = function () {calendar.hour = this.options[this.selectedIndex].value;}  
  306.   obj.onblur = function () {calendar.onblur();}  
  307.   this.calendarHour = obj;  
  308.      
  309.   obj = this.getElementById("calendarMinute");  
  310.   obj.onchange = function () {calendar.minute = this.options[this.selectedIndex].value;}  
  311.   obj.onblur = function () {calendar.onblur();}  
  312.   this.calendarMinute = obj;  
  313.     
  314.   obj = this.getElementById("calendarSecond");  
  315.   obj.onchange = function () {calendar.second = this.options[this.selectedIndex].value;}  
  316.   obj.onblur = function () {calendar.onblur();}  
  317.   this.calendarSecond = obj;  
  318.   
  319.   obj = this.getElementById("calendarToday");  
  320.   obj.onclick = function () {  
  321.   var today = (calendar.DateMode != pickMode["day"]) ?  
  322.                     new Date(calendar.year,calendar.month,calendar.day,calendar.hour,calendar.minute,calendar.second)  
  323.                     : new Date();//2008-01-29  
  324.     calendar.ReturnDate(today.format(calendar.dateFormatStyle));  
  325.   }  
  326.   this.calendarToday = obj;  
  327. }  
  328.   
  329. //年份下拉框綁定數(shù)據(jù)  
  330. Calendar.prototype.bindYear = function() {  
  331.   var cy = this.calendarYear;//2006-12-01 由寒羽楓修改  
  332.   cy.length = 0;  
  333.   for (var i = this.beginYear; i <= this.endYear; i++){  
  334.     cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i);  
  335.   }  
  336. }  
  337.   
  338. //月份下拉框綁定數(shù)據(jù)  
  339. Calendar.prototype.bindMonth = function() {  
  340.   var cm = this.calendarMonth;//2006-12-01 由寒羽楓修改  
  341.   cm.length = 0;  
  342.   for (var i = 0; i < 12; i++){  
  343.     cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i);  
  344.   }  
  345. }  
  346.   
  347. //小時下拉框綁定數(shù)據(jù)  
  348. Calendar.prototype.bindHour = function() {  
  349.   var ch = this.calendarHour;  
  350.   if(ch.length > 0){return;}//2009-03-03 不需要重新綁定，提高性能  
  351.   //ch.length = 0;  
  352.   var h;  
  353.   for (var i = 0; i < 24; i++){  
  354.     h = ("00" + i +"").substr(("" + i).length);  
  355.     ch.options[ch.length] = new Option(h, h);  
  356.   }  
  357. }  
  358.   
  359. //分鐘下拉框綁定數(shù)據(jù)  
  360. Calendar.prototype.bindMinute = function() {  
  361.   var cM = this.calendarMinute;  
  362.   if(cM.length > 0){return;}//2009-03-03 不需要重新綁定，提高性能  
  363.   //cM.length = 0;  
  364.   var M;  
  365.   for (var i = 0; i < 60; i++){  
  366.     M = ("00" + i +"").substr(("" + i).length);  
  367.     cM.options[cM.length] = new Option(M, M);  
  368.   }  
  369. }  
  370.   
  371. //秒鐘下拉框綁定數(shù)據(jù)  
  372. Calendar.prototype.bindSecond = function() {  
  373.   var cs = this.calendarSecond;  
  374.   if(cs.length > 0){return;}//2009-03-03 不需要重新綁定，提高性能  
  375.   //cs.length = 0;  
  376.   var s;  
  377.   for (var i = 0; i < 60; i++){  
  378.     s = ("00" + i +"").substr(("" + i).length);  
  379.     cs.options[cs.length] = new Option(s, s);  
  380.   }  
  381. }  
  382.   
  383. //向前一月  
  384. Calendar.prototype.goPrevMonth = function(e){  
  385.   if (this.year == this.beginYear && this.month == 0){return;}  
  386.   this.month--;  
  387.   if (this.month == -1) {  
  388.     this.year--;  
  389.     this.month = 11;  
  390.   }  
  391.   this.date = new Date(this.year, this.month, 1);  
  392.   this.changeSelect();  
  393.   this.bindData();  
  394. }  
  395.   
  396. //向后一月  
  397. Calendar.prototype.goNextMonth = function(e){  
  398.   if (this.year == this.endYear && this.month == 11){return;}  
  399.   this.month++;  
  400.   if (this.month == 12) {  
  401.     this.year++;  
  402.     this.month = 0;  
  403.   }  
  404.   this.date = new Date(this.year, this.month, 1);  
  405.   this.changeSelect();  
  406.   this.bindData();  
  407. }  
  408.   
  409. //改變SELECT選中狀態(tài)  
  410. Calendar.prototype.changeSelect = function() {  
  411.   var cy = this.calendarYear;//2006-12-01 由寒羽楓修改  
  412.   var cm = this.calendarMonth;  
  413.   var ch = this.calendarHour;  
  414.   var cM = this.calendarMinute;  
  415.   var cs = this.calendarSecond;  
  416. //2006-12-30 由民工.磚家修改，減少運算次數(shù)  
  417.   cy[this.date.getFullYear()-this.beginYear].selected = true;  
  418.   cm[this.date.getMonth()].selected =true;  
  419.     
  420. //2009-03-03 添加，初始化時間的值  
  421.   ch[this.hour].selected =true;  
  422.   cM[this.minute].selected =true;  
  423.   cs[this.second].selected =true;  
  424. }  
  425.   
  426. //更新年、月  
  427. Calendar.prototype.update = function (e){  
  428.   this.year  = e.calendarYear.options[e.calendarYear.selectedIndex].value;//2006-12-01 由寒羽楓修改  
  429.   this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value;  
  430.   this.date = new Date(this.year, this.month, 1);  
  431.   //this.changeSelect();  
  432.   this.bindData();  
  433. }  
  434.   
  435. //綁定數(shù)據(jù)到月視圖  
  436. Calendar.prototype.bindData = function () {  
  437.   var calendar = this;  
  438.     if(calendar.DateMode >= pickMode["month"]){return;}//2008-01-29  
  439.  // var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());  
  440.   //2006-12-30 由民工.磚家修改 在Firefox 下年份錯誤  
  441.   var dateArray = this.getMonthViewArray(this.date.getFullYear(), this.date.getMonth());  
  442.  var tds = this.getElementById("calendarTable").getElementsByTagName("td");  
  443.   for(var i = 0; i < tds.length; i++) {  
  444.   tds[i].style.backgroundColor = calendar.colors["td_bg_out"];  
  445.     tds[i].onclick = function () {return;}  
  446.     tds[i].onmouseover = function () {return;}  
  447.     tds[i].onmouseout = function () {return;}  
  448.     if (i > dateArray.length - 1) break;  
  449.     tds[i].innerHTML = dateArray[i];  
  450.     if (dateArray[i] != " "){  
  451.       tds[i].bgColorTxt = "td_bg_out"; //2009-03-03 保存背景色的class  
  452.         var cur = new Date();  
  453.         tds[i].isToday = false;  
  454.       if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth() && cur.getDate() == dateArray[i]) {  
  455.       //是今天的單元格  
  456.         tds[i].style.backgroundColor = calendar.colors["cur_bg"];  
  457.         tds[i].bgColorTxt = "cur_bg";  
  458.         tds[i].isToday = true;  
  459.         }  
  460.     if(calendar.dateControl != null )  
  461.     {  
  462.       cur = calendar.dateControl.value.toDate(calendar.dateFormatStyle);  
  463.       if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth()&& cur.getDate() == dateArray[i]) {  
  464.       //是已被選中的單元格  
  465.         calendar.selectedDayTD = tds[i];  
  466.         tds[i].style.backgroundColor = calendar.colors["sel_bg"];  
  467.         tds[i].bgColorTxt = "sel_bg";  
  468.       }  
  469.     }  
  470.       tds[i].onclick = function () {  
  471.             if(calendar.DateMode == pickMode["day"]) //2009-03-03 當(dāng)選擇日期時，點擊格子即返回值  
  472.             {  
  473.                 calendar.ReturnDate(new Date(calendar.date.getFullYear(),  
  474.                                                     calendar.date.getMonth(),  
  475.                                                     this.innerHTML).format(calendar.dateFormatStyle));  
  476.             }  
  477.             else  
  478.             {  
  479.                 if(calendar.selectedDayTD != null) //2009-03-03 清除已選中的背景色  
  480.                 {  
  481.                     calendar.selectedDayTD.style.backgroundColor =(calendar.selectedDayTD.isToday)? calendar.colors["cur_bg"] : calendar.colors["td_bg_out"];  
  482.                 }  
  483.                 this.style.backgroundColor = calendar.colors["sel_bg"];  
  484.                 calendar.day = this.innerHTML;  
  485.                 calendar.selectedDayTD = this; //2009-03-03 記錄已選中的日子  
  486.             }  
  487.           }  
  488.       tds[i].style.cursor ="pointer"; //2007-08-06 由寒羽楓添加，鼠標變成手指狀  
  489.       tds[i].onmouseover = function () {  
  490.         this.style.backgroundColor = calendar.colors["td_bg_over"];  
  491.       }  
  492.       tds[i].onmouseout = function () {  
  493.         if(calendar.selectedDayTD != this) {  
  494.         this.style.backgroundColor = calendar.colors[this.bgColorTxt];}  
  495.       }  
  496.       tds[i].onblur = function () {calendar.onblur();}  
  497.     }  
  498.   }  
  499. }  
  500.   
  501. //根據(jù)年、月得到月視圖數(shù)據(jù)(數(shù)組形式)  
  502. Calendar.prototype.getMonthViewArray = function (y, m) {  
  503.   var mvArray = [];  
  504.   var dayOfFirstDay = new Date(y, m, 1).getDay();  
  505.   var daysOfMonth = new Date(y, m + 1, 0).getDate();  
  506.   for (var i = 0; i < 42; i++) {  
  507.     mvArray[i] = " ";  
  508.   }  
  509.   for (var i = 0; i < daysOfMonth; i++){  
  510.     mvArray[i + dayOfFirstDay] = i + 1;  
  511.   }  
  512.   return mvArray;  
  513. }  
  514.   
  515. //擴展 document.getElementById(id) 多瀏覽器兼容性 from meizz tree source  
  516. Calendar.prototype.getElementById = function(id){  
  517.   if (typeof(id) != "string" || id == "") return null;  
  518.   if (document.getElementById) return document.getElementById(id);  
  519.   if (document.all) return document.all(id);  
  520.   try {return eval(id);} catch(e){ return null;}  
  521. }  
  522.   
  523. //擴展 object.getElementsByTagName(tagName)  
  524. Calendar.prototype.getElementsByTagName = function(object, tagName){  
  525.   if (document.getElementsByTagName) return document.getElementsByTagName(tagName);  
  526.   if (document.all) return document.all.tags(tagName);  
  527. }  
  528.   
  529. //取得HTML控件絕對位置  
  530. Calendar.prototype.getAbsPoint = function (e){  
  531.   var x = e.offsetLeft;  
  532.   var y = e.offsetTop;  
  533.   while(e = e.offsetParent){  
  534.     x += e.offsetLeft;  
  535.     y += e.offsetTop;  
  536.   }  
  537.   return {"x": x, "y": y};  
  538. }  
  539.   
  540. //顯示日歷  
  541. Calendar.prototype.show = function (dateObj, popControl) {  
  542.   if (dateObj == null){  
  543.     throw new Error("arguments[0] is necessary")  
  544.   }  
  545.   this.dateControl = dateObj;  
  546.   var now =  new Date();  
  547.   this.date = (dateObj.value.length > 0) ? new Date(dateObj.value.toDate(this.dateFormatStyle)) : now.format(this.dateFormatStyle).toDate(this.dateFormatStyle) ;//2008-01-29 寒羽楓添加 → 若為空則根據(jù)dateFormatStyle初始化日期  
  548.   
  549.   if(this.panel.innerHTML==""||cal.dateFormatStyleOld != cal.dateFormatStyle)//2008-01-29 把構(gòu)造表格放在此處，2009-03-03 若請示的樣式改變，則重新初始化  
  550.   {  
  551.     this.draw();  
  552.     this.bindYear();  
  553.     this.bindMonth();  
  554.     this.bindHour();  
  555.     this.bindMinute();  
  556.     this.bindSecond();  
  557.   }  
  558.   this.year = this.date.getFullYear();  
  559.   this.month = this.date.getMonth();  
  560.   this.day = this.date.getDate();  
  561.   this.hour = this.date.getHours();  
  562.   this.minute = this.date.getMinutes();  
  563.   this.second = this.date.getSeconds();  
  564.   this.changeSelect();  
  565.   this.bindData();  
  566.   
  567.   if (popControl == null){  
  568.     popControl = dateObj;  
  569.   }  
  570.   var xy = this.getAbsPoint(popControl);  
  571.   //this.panel.style.left = xy.x + "px";  
  572.   //this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px";  
  573.   this.panel.style.left = (xy.x + leftX)+ "px"; //由寒羽楓 2007-02-11 修改 → 加入自定義偏移量  
  574.   this.panel.style.top = (xy.y + topY + dateObj.offsetHeight) + "px";  
  575.     
  576.   //由寒羽楓 2006-06-25 修改 → 把 visibility 變?yōu)?nbsp;display，并添加失去焦點的事件  //this.setDisplayStyle("select", "hidden");  
  577.   //this.panel.style.visibility = "visible";  
  578.   //this.container.style.visibility = "visible";  
  579.   this.panel.style.display = "";  
  580.   this.container.style.display = "";  
  581.     
  582.   if( !this.dateControl.isTransEvent)  
  583.   {  
  584.     this.dateControl.isTransEvent = true;  
  585.     /* 已寫在返回值的時候  ReturnDate 函數(shù)中，去除驗證事件的函數(shù) 
  586.     this.dateControl.changeEvent = this.dateControl.onchange;//將 onchange 轉(zhuǎn)成其它函數(shù)，以免觸發(fā)驗證事件 
  587.     this.dateControl.onchange = function() 
  588.     {if(typeof(this.changeEvent) =='function'){this.changeEvent();}}*/  
  589.     if(this.dateControl.onblur != null){  
  590.     this.dateControl.blurEvent = this.dateControl.onblur;}//2007-09-14 保存主文本框的 onblur ，使其原本的事件不被覆蓋  
  591.     this.dateControl.onblur = function()  
  592.     {calendar.onblur();if(typeof(this.blurEvent) =='function'){this.blurEvent();}  
  593.     }  
  594.   }  
  595.     
  596.   this.container.onmouseover = function(){isFocus=true;}  
  597.   this.container.onmouseout = function(){isFocus=false;}  
  598. }  
  599.   
  600. //隱藏日歷  
  601. Calendar.prototype.hide = function() {  
  602.   //this.setDisplayStyle("select", "visible");  
  603.   //this.panel.style.visibility = "hidden";  
  604.   //this.container.style.visibility = "hidden";  
  605.   this.panel.style.display = "none";  
  606.   this.container.style.display = "none";  
  607.   isFocus=false;  
  608. }  
  609.   
  610. //焦點轉(zhuǎn)移時隱藏日歷 → 由寒羽楓 2006-06-25 添加  
  611. Calendar.prototype.onblur = function() {  
  612.     if(!isFocus){this.hide();}  
  613. }  
  614.   
  615. //以下由寒羽楓 2007-07-26 修改 → 確保日歷容器節(jié)點在 body 最后，否則 FireFox 中不能出現(xiàn)在最上方  
  616. function InitContainerPanel() //初始化容器  
  617. {  
  618.     var str = '<div id="calendarPanel" style="position: absolute;display: none;z-index:9999; background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;"></div>';  
  619.     if(document.all)  
  620.     {  
  621.         str += '<iframe style="position:absolute;z-index:2000;width:(this.previousSibling.offsetWidth);';  
  622.         str += 'height:expression(this.previousSibling.offsetHeight);';  
  623.         str += 'left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);';  
  624.         str += 'display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>';  
  625.     }  
  626.     var div = document.createElement("div");  
  627.     div.innerHTML = str;  
  628.     div.id = "ContainerPanel";  
  629.     div.style.display ="none";  
  630.     document.body.appendChild(div);  
  631. }//調(diào)用calendar.show(dateControl, popControl);  
  632. //-->  

 

將上述代碼另存為 WebCalendar.js，頁面調(diào)用代碼：

[xhtml] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head id="Head1">  
  5.         <script src="WebCalendar.js" type="text/javascript"></script>  
  6. </head>  
  7. <body>  
  8.     <form name="form1" method="post" action="WebForm1.aspx" id="form1">  
  9. <input type="text" value="" maxlength="100" id="Txt_CreateDateST01"  onclick="SelectDate(this,'yyyy 年')" readonly="true" style="width:265px;cursor:pointer" /><br />  
  10. <input type="text" value="" maxlength="100" id="Txt_CreateDateST02"  onclick="SelectDate(this,'yyyy 年 MM 月')" readonly="true" style="width:265px;cursor:pointer" /><br />  
  11. <input type="text" value="" maxlength="100" id="Txt_CreateDateST03"  onclick="SelectDate(this,'yyyy//MM//dd')" readonly="true" style="width:265px;cursor:pointer" /><br />  
  12. <input type="text" value="" maxlength="100" id="Text1"  onclick="SelectDate(this,'yyyy-MM-dd hh時')" readonly="true" style="width:265px;cursor:pointer" /><br />  
  13. <input type="text" value="" maxlength="100" id="Text3"  onclick="SelectDate(this,'yyyy-MM-dd hh:mm')" readonly="true" style="width:265px;cursor:pointer" /><br />  
  14. <input type="text" value="" maxlength="100" id="Text4"  onclick="SelectDate(this,'yyyy年MM月dd日 hh時mm分ss秒',0,-150)" readonly="true" style="width:265px;cursor:pointer" /><br />  
  15. </form>  
  16. </body>  
  17. </html>  

 

調(diào)用方法：

      1、傳入對象：SelectDate(this,'yyyy 年')

      2、傳入 ID：SelectDateById('Txt_CreateDateST01','yyyy 年')

      3、參數(shù) SelectDate(this,'yyyy 年',0,-150)

               格式（注意大小寫）：yyyy→年，MM→月，dd→天，hh→24小時制，mm→分鐘，ss→秒

               0 → 相對于文本框的橫向偏移量

               -150 → 相對于文本框的縱向偏移量

分享到：
查看評論
17樓 zhangxianjie 2013-01-30 11:35發(fā)表 [回復(fù)]
使用了您寫的WebCalendar.js ，有一個問題，就是當(dāng)顯示 yyyy-mm時，月份選擇2月，但是顯示3月，請問如何解決。能發(fā)到我郵箱里嗎？zhzy_zxj@126.com，謝謝
16樓 冰玉翔龍 2012-09-11 18:50發(fā)表 [回復(fù)]
nice!!!
15樓 chenjiafeng321 2012-09-01 14:22發(fā)表 [回復(fù)]
寒羽楓，您好，用了您的日歷發(fā)現(xiàn)一個時區(qū)問題，一直用著好好的，昨天9月31號，選擇月份的時候會出現(xiàn)選擇二月就會變?nèi)?，您能幫個忙給個解決辦法嗎？麻煩您了，我的QQ郵箱381563760@qq.com
14樓 intandy1 2011-12-22 10:51發(fā)表 [回復(fù)]
控件很好用，謝謝！
如果想在月頭和月尾分別顯示上個月末的幾天和下個月初的幾天，應(yīng)該怎么修改呢。
13樓 zhijianpan 2011-11-21 15:48發(fā)表 [回復(fù)]
var topY=0,leftX=0;

上面例子，由于最后一個設(shè)置了偏移，操作過最后一個input后，再點擊前面的幾個，也跟著偏移了
12樓 lichong_87 2011-08-25 17:43發(fā)表 [回復(fù)]
你好，我想問一下你有沒有遇到過將該js文件加入到，myeclipse工程中以后在打開工程或者修改這個js文件的時候就會出現(xiàn)棧溢出……然后會提示是否關(guān)閉工程，還有就是在單獨的一個html中使用的時候是可以的，但是加入到myeclipse中以后IE點擊的時候就會報錯……如果你知道怎么解決請盡快通知我，謝謝~~~~~
11樓 shexunyu 2011-08-18 09:48發(fā)表 [回復(fù)]
你好，寒羽楓，你的時鐘控件很好用，我有個想法，你的控件失去焦點后，可否把時間保存起來，在第二次聚焦的時候，可否直接設(shè)置到之前的時間上面去？如果有哪位大俠知道，也麻煩聯(lián)系我，我的QQ121197769，或發(fā)到我郵箱里來
10樓 zldy2818 2010-11-29 20:31發(fā)表 [回復(fù)]
選擇2月份的時候好像有問題，比如我選擇2010年2月，就會變成3月，只顯示年和月，不知道是bug還是我這邊的問題
9樓 匿名用戶 2010-06-10 11:02發(fā)表 [回復(fù)]
xiexie
8樓 lala1943 2010-06-02 15:42發(fā)表 [回復(fù)]
謝謝寒羽楓！我頭疼了好幾天的事，一下就幫我解決了。萬分感謝！[e10]
7樓 cyhcyhhychyc 2009-12-21 09:19發(fā)表 [回復(fù)]
楓哥，多寫些文章呀，向mvp進軍。
6樓 M_arlboro 2009-04-23 00:10發(fā)表 [回復(fù)]
我還得努力。！
5樓 skey_chen 2009-03-19 10:17發(fā)表 [回復(fù)]
有個bug:這個日期控件在input中的初始值非正常值時,比如value="009"時控件不顯示
還有一個bug是在當(dāng)前input中的日期不在控件生成的日期范圍內(nèi)的時候,會有腳本錯誤
4樓 skey_chen 2009-03-19 10:16發(fā)表 [回復(fù)]
有個bug:這個日期控件在input中的初始值非正常值時,比如value="009"
還有一個bug是在當(dāng)前input中的日期不在控件生成的日期范圍內(nèi)的時候,會有腳本錯誤
3樓 hn_mayu 2009-03-18 14:43發(fā)表 [回復(fù)]
呵呵,謝謝您的郵件!
提兩點人性化的建議,第二個不要左右箭頭,第三個及以下的點擊左右箭頭的話,月份的下拉列表應(yīng)該變動!
再次感謝寒羽楓!!
2樓 cityhunter172 2009-03-13 18:11發(fā)表 [回復(fù)]
沒意見，歡迎轉(zhuǎn)裁、修改、傳播。
呵呵……
1樓 skey_chen 2009-03-10 10:51發(fā)表 [回復(fù)]
您好,我改了您的日歷,修改了一些BUG和重新構(gòu)建了一下結(jié)構(gòu),http://blog.csdn.net/skey_chen/archive/2009/03/08/3968681.aspx
如果您有意見,我可以馬上刪除
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
常用作帖、發(fā)帖代碼集萃
總結(jié)一些js自定義的函數(shù)
兩種防刷新的高亮導(dǎo)航菜單制作 記錄cookies和根據(jù)Url網(wǎng)址
javaScript通用數(shù)據(jù)類型校驗
JavaScript連載23-String對象及其常用方法
js的trim
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服