Rumah > hujung hadapan web > tutorial js > 转一个日期输入控件,支持FF_时间日期

转一个日期输入控件,支持FF_时间日期

WBOY
Lepaskan: 2016-05-16 19:14:16
asal
1081 orang telah melayarinya


日期选择器
<script> <BR>/** <BR>* 返回日期 <BR>* @param d the delimiter <BR>* @param p the pattern of your date <BR>* @author Xinge(修改) <BR>*/ <BR>String.prototype.toDate = function(x, p) { <BR> if(x == null) x = "-"; <BR> if(p == null) p = "ymd"; <BR> var a = this.split(x); <BR> var y = parseInt(a[p.indexOf("y")]); <BR> //remember to change this next century ;) <BR> if(y.toString().length <= 2) y += 2000; <BR> if(isNaN(y)) y = new Date().getFullYear(); <BR> var m = parseInt(a[p.indexOf("m")]) - 1; <BR> var d = parseInt(a[p.indexOf("d")]); <BR> if(isNaN(d)) d = 1; <BR> return new Date(y, m, d); <BR>} <br><br>/** <BR>* 格式化日期 <BR>* @param d the delimiter <BR>* @param p the pattern of your date <BR>* @author Xinge(修改) <BR>*/ <BR>Date.prototype.format = function(style) { <BR> var o = { <BR> "M+" : this.getMonth() + 1, //month <BR> "d+" : this.getDate(), //day <BR> "h+" : this.getHours(), //hour <BR> "m+" : this.getMinutes(), //minute <BR> "s+" : this.getSeconds(), //second <BR> "w+" : "天一二三四五六".charAt(this.getDay()), //week <BR> "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter <BR> "S" : this.getMilliseconds() //millisecond <BR> } <BR> if(/(y+)/.test(style)) { <BR> style = style.replace(RegExp.$1, <BR> (this.getFullYear() + "").substr(4 - RegExp.$1.length)); <BR> } <BR> for(var k in o){ <BR> if(new RegExp("("+ k +")").test(style)){ <BR> style = style.replace(RegExp.$1, <BR> RegExp.$1.length == 1 ? o[k] : <BR> ("00" + o[k]).substr(("" + o[k]).length)); <BR> } <BR> } <BR> return style; <BR>}; <br><br>/** <BR>* 日历类 <BR>* @param beginYear 1990 <BR>* @param endYear &#322010; <BR>* @param lang &#320;(中文)|1(英语) 可自由扩充 <BR>* @param dateFormatStyle "yyyy-MM-dd"; <BR>* @version 2007-03-16 <BR>* @author Xinge(修改) <BR>* @update <BR>*/ <BR>function Calendar(lang,beginYear,endYear,dateFormatStyle) { <BR> this.beginYear = 1990; <BR> this.endYear = 2010; <BR> this.lang = 0; //0(中文) | 1(英文) <BR> this.dateFormatStyle = "yyyy-MM-dd"; <br><br> if (beginYear != null && endYear != null){ <BR> this.beginYear = beginYear; <BR> this.endYear = endYear; <BR> } <BR> if (lang != null){ <BR> this.lang = lang <BR> } <br><br> if (dateFormatStyle != null){ <BR> this.dateFormatStyle = dateFormatStyle <BR> } <br><br> this.dateControl = null; <BR> this.panel = this.getElementById("calendarPanel"); <BR> this.form = null; <br><br> this.date = new Date(); <BR> this.year = this.date.getFullYear(); <BR> this.month = this.date.getMonth(); <br><br><BR> this.colors = { <BR> "cur_word" : "#FFFFFF", //当日日期文字颜色 <BR> "cur_bg" : "#00FF00", //当日日期单元格背影色 <BR> "sun_word" : "#FF0000", //星期天文字颜色 <BR> "sat_word" : "#0000FF", //星期六文字颜色 <BR> "td_word_light" : "#000000", //单元格文字颜色 <BR> "td_word_dark" : "#CCCCCC", //单元格文字暗色 <BR> "td_bg_out" : "#FFFFFF", //单元格背影色 <BR> "td_bg_over" : "#FFCC00", //单元格背影色 <BR> "tr_word" : "#FFFFFF", //日历头文字颜色 <BR> "tr_bg" : "#FF6600", //日历头背影色 <BR> "input_border" : "#CCCCCC", //input控件的边框颜色 <BR> "input_bg" : "#EFEFEF" //input控件的背影色 <BR> } <br><br> this.draw(); <BR> this.bindYear(); <BR> this.bindMonth(); <BR> this.changeSelect(); <BR> this.bindData(); <BR>} <br><br>/** <BR>* 日历类属性(语言包,可自由扩展) <BR>*/ <BR>Calendar.language = { <BR> "year" : [[""], [""]], <BR> "months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], <BR> ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"] <BR> ], <BR> "weeks" : [["日","一","二","三","四","五","六"], <BR> ["SUN","MON","TUR","WED","THU","FRI","SAT"] <BR> ], <BR> "clear" : [["清空"], ["CLS"]], <BR> "today" : [["今天"], ["TODAY"]], <BR> "close" : [["关闭"], ["CLOSE"]] <BR>} <br><br>Calendar.prototype.draw = function() { <BR> calendar = this; <br><br> var mvAry = []; <BR> mvAry[mvAry.length] = ' <form name="calendarForm" style="margin: 0px;">'; <BR> mvAry[mvAry.length] = ' <table width="100%" border="0" cellpadding="0" cellspacing="0">'; <BR> mvAry[mvAry.length] = ' <tr>'; <BR> 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;" name="prevMonth" type="button" id="prevMonth" value="<" />'; <BR> mvAry[mvAry.length] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;width:50%;"><select name="calendarMonth" id="calendarMonth" style="font-size:12px;width:50%;">'; <BR> 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;" name="nextMonth" type="button" id="nextMonth" value=">" />'; <BR> mvAry[mvAry.length] = ' '; <BR> mvAry[mvAry.length] = ' '; <BR> mvAry[mvAry.length] = ' <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#DDD" border="0" cellpadding="3" cellspacing="1">'; <BR> mvAry[mvAry.length] = ' <tr>'; <BR> for(var i = 0; i < 7; i++) { <BR> 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] + ''; <BR> } <BR> mvAry[mvAry.length] = ' '; <BR> for(var i = 0; i < 6;i++){ <BR> mvAry[mvAry.length] = ' <tr align="center">'; <BR> for(var j = 0; j < 7; j++) { <BR> if (j == 0){ <BR> mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';">'; <BR> } else if(j == 6) { <BR> mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';">'; <BR> } else { <BR> mvAry[mvAry.length] = ' <td style="cursor:default;">'; <BR> } <BR> } <BR> mvAry[mvAry.length] = ' '; <BR> } <BR> mvAry[mvAry.length] = ' <tr style="background-color:' + calendar.colors["input_bg"] + ';">'; <BR> mvAry[mvAry.length] = ' <th colspan="2"><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:100%;height:20px;font-size:12px;"/>'; <BR> mvAry[mvAry.length] = ' <th colspan="3"><input name="calendarToday" type="button" id="calendarToday" value="' + Calendar.language["today"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/>'; <BR> mvAry[mvAry.length] = ' <th colspan="2"><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:100%;height:20px;font-size:12px;"/>'; <BR> mvAry[mvAry.length] = ' '; <BR> mvAry[mvAry.length] = ' '; <BR> mvAry[mvAry.length] = ' '; <BR> this.panel.innerHTML = mvAry.join(""); <BR> this.form = document.forms["calendarForm"]; <br><br> this.form.prevMonth.onclick = function () {calendar.goPrevMonth(this);} <BR> this.form.nextMonth.onclick = function () {calendar.goNextMonth(this);} <br><br> this.form.calendarClear.onclick = function () {calendar.dateControl.value = "";calendar.hide();} <BR> this.form.calendarClose.onclick = function () {calendar.hide();} <BR> this.form.calendarYear.onchange = function () {calendar.update(this);} <BR> this.form.calendarMonth.onchange = function () {calendar.update(this);} <BR> this.form.calendarToday.onclick = function () { <BR> var today = new Date(); <BR> calendar.date = today; <BR> calendar.year = today.getFullYear(); <BR> calendar.month = today.getMonth(); <BR> calendar.changeSelect(); <BR> calendar.bindData(); <BR> calendar.dateControl.value = today.format(calendar.dateFormatStyle); <BR> calendar.hide(); <BR> } <br><br>} <br><br>//年份下拉框绑定数据 <BR>Calendar.prototype.bindYear = function() { <BR> var cy = this.form.calendarYear; <BR> cy.length = 0; <BR> for (var i = this.beginYear; i <= this.endYear; i++){ <BR> cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i); <BR> } <BR>} <br><br>//月份下拉框绑定数据 <BR>Calendar.prototype.bindMonth = function() { <BR> var cm = this.form.calendarMonth; <BR> cm.length = 0; <BR> for (var i = 0; i < 12; i++){ <BR> cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i); <BR> } <BR>} <br><br>//向前一月 <BR>Calendar.prototype.goPrevMonth = function(e){ <BR> if (this.year == this.beginYear && this.month == 0){return;} <BR> this.month--; <BR> if (this.month == -1) { <BR> this.year--; <BR> this.month = 11; <BR> } <BR> this.date = new Date(this.year, this.month, 1); <BR> this.changeSelect(); <BR> this.bindData(); <BR>} <br><br>//向后一月 <BR>Calendar.prototype.goNextMonth = function(e){ <BR> if (this.year == this.endYear && this.month == 11){return;} <BR> this.month++; <BR> if (this.month == 12) { <BR> this.year++; <BR> this.month = 0; <BR> } <BR> this.date = new Date(this.year, this.month, 1); <BR> this.changeSelect(); <BR> this.bindData(); <BR>} <br><br>//改变SELECT选中状态 <BR>Calendar.prototype.changeSelect = function() { <BR> var cy = this.form.calendarYear; <BR> var cm = this.form.calendarMonth; <BR> for (var i= 0; i < cy.length; i++){ <BR> if (cy.options[i].value == this.date.getFullYear()){ <BR> cy[i].selected = true; <BR> break; <BR> } <BR> } <BR> for (var i= 0; i < cm.length; i++){ <BR> if (cm.options[i].value == this.date.getMonth()){ <BR> cm[i].selected = true; <BR> break; <BR> } <BR> } <BR>} <br><br>//更新年、月 <BR>Calendar.prototype.update = function (e){ <BR> this.year = e.form.calendarYear.options[e.form.calendarYear.selectedIndex].value; <BR> this.month = e.form.calendarMonth.options[e.form.calendarMonth.selectedIndex].value; <BR> this.date = new Date(this.year, this.month, 1); <BR> this.changeSelect(); <BR> this.bindData(); <BR>} <br><br>//绑定数据到月视图 <BR>Calendar.prototype.bindData = function () { <BR> var calendar = this; <BR> var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth()); <BR> var tds = this.getElementById("calendarTable").getElementsByTagName("td"); <BR> for(var i = 0; i < tds.length; i++) { <BR> //tds[i].style.color = calendar.colors["td_word_light"]; <BR> tds[i].style.backgroundColor = calendar.colors["td_bg_out"]; <BR> tds[i].onclick = function () {return;} <BR> tds[i].onmouseover = function () {return;} <BR> tds[i].onmouseout = function () {return;} <BR> if (i > dateArray.length - 1) break; <BR> tds[i].innerHTML = dateArray[i]; <BR> if (dateArray[i] != " "){ <BR> tds[i].onclick = function () { <BR> if (calendar.dateControl != null){ <BR> calendar.dateControl.value = new Date(calendar.date.getFullYear(), <BR> calendar.date.getMonth(), <BR> this.innerHTML).format(calendar.dateFormatStyle); <BR> } <BR> calendar.hide(); <BR> } <BR> tds[i].onmouseover = function () { <BR> this.style.backgroundColor = calendar.colors["td_bg_over"]; <BR> } <BR> tds[i].onmouseout = function () { <BR> this.style.backgroundColor = calendar.colors["td_bg_out"]; <BR> } <BR> if (new Date().format(calendar.dateFormatStyle) == <BR> new Date(calendar.date.getFullYear(), <BR> calendar.date.getMonth(), <BR> dateArray[i]).format(calendar.dateFormatStyle)) { <BR> //tds[i].style.color = calendar.colors["cur_word"]; <BR> tds[i].style.backgroundColor = calendar.colors["cur_bg"]; <BR> tds[i].onmouseover = function () { <BR> this.style.backgroundColor = calendar.colors["td_bg_over"]; <BR> } <BR> tds[i].onmouseout = function () { <BR> this.style.backgroundColor = calendar.colors["cur_bg"]; <BR> } <BR> }//end if <BR> } <BR> } <BR>} <br><br>//根据年、月得到月视图数据(数组形式) <BR>Calendar.prototype.getMonthViewArray = function (y, m) { <BR> var mvArray = []; <BR> var dayOfFirstDay = new Date(y, m, 1).getDay(); <BR> var daysOfMonth = new Date(y, m + 1, 0).getDate(); <BR> for (var i = 0; i < 42; i++) { <BR> mvArray[i] = " "; <BR> } <BR> for (var i = 0; i < daysOfMonth; i++){ <BR> mvArray[i + dayOfFirstDay] = i + 1; <BR> } <BR> return mvArray; <BR>} <br><br>//扩展 document.getElementById(id) 多浏览器兼容性 <BR>Calendar.prototype.getElementById = function(id){ <BR> if (typeof(id) != "string" || id == "") return null; <BR> if (document.getElementById) return document.getElementById(id); <BR> if (document.all) return document.all(id); <BR> try {return eval(id);} catch(e){ return null;} <BR>} <br><br>//扩展 object.getElementsByTagName(tagName) <BR>Calendar.prototype.getElementsByTagName = function(object, tagName){ <BR> if (document.getElementsByTagName) return document.getElementsByTagName(tagName); <BR> if (document.all) return document.all.tags(tagName); <BR>} <br><br>//取得HTML控件绝对位置 <BR>Calendar.prototype.getAbsPoint = function (e){ <BR> var x = e.offsetLeft; <BR> var y = e.offsetTop; <BR> while(e = e.offsetParent){ <BR> x += e.offsetLeft; <BR> y += e.offsetTop; <BR> } <BR> return {"x": x, "y": y}; <BR>} <br><br>//显示日历 <BR>Calendar.prototype.show = function (dateControl, popControl) { <BR> if (dateControl == null){ <BR> throw new Error("arguments[0] is necessary") <BR> } <BR> this.dateControl = dateControl; <BR> if (dateControl.value.length > 0){ <BR> this.date = new Date(dateControl.value.toDate()); <BR> this.year = this.date.getFullYear(); <BR> this.month = this.date.getMonth(); <BR> this.changeSelect(); <BR> this.bindData(); <BR> } <BR> if (popControl == null){ <BR> popControl = dateControl; <BR> } <BR> var xy = this.getAbsPoint(popControl); <BR> this.panel.parentNode.style.left = xy.x + "px"; <BR> this.panel.parentNode.style.top = (xy.y + dateControl.offsetHeight) + "px"; <BR> this.panel.parentNode.style.visibility = "visible"; <BR>} <br><br>//隐藏日历 <BR>Calendar.prototype.hide = function() { <BR> this.panel.parentNode.style.visibility = "hidden"; <BR>} <br><br><BR>var html = '<div style="\ <BR> position:absolute;visibility:hidden;z-index:9999;background-color:#fff;border:2px solid #ccc;width:225px;font-size:12px;\ <BR> "><iframe style="position:absolute;width:100%;height:199px;z-index:-1;border:none">\ <BR> <div id="calendarPanel">\ <BR> '; <BR>document.write(html); <br><br></script>



readOnly size="23" value="2007-03-16" name=postTime>

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan