- 浏览: 162066 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
2047699523:
java jstl标签库demo使用实例教程源代码下载:htt ...
JSTL常用标签汇总 -
ganglong99:
maxer025 写道maxer025 写道找到了,编译第二部 ...
安装Perl及Perl模块Net::SSH2 -
maxer025:
maxer025 写道找到了,编译第二部libssh2,这个错 ...
安装Perl及Perl模块Net::SSH2 -
maxer025:
找到了,编译第二部libssh2,这个错误怎么解决?/usr/ ...
安装Perl及Perl模块Net::SSH2 -
ganglong99:
maxer025 写道./configure 没有这个命令?解 ...
安装Perl及Perl模块Net::SSH2
自己做了一个日历日期控件,说实话,还存在很多问题,不过基本可以用,呵呵,先发出来再慢慢改。
目录结构见附件图片。
date.js源代码:
var monthArr = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一", "十二"); function $(id) { return document.getElementById(id); } function showMonthDiv() { var monthDiv = $("monthDiv"); monthDiv.style.display = "block"; } function closeMonthDiv() { var monthDiv = $("monthDiv"); monthDiv.style.display = "none"; } function mInuptOnfocus() { var month = $("month"); month.style.border = "solid 1px #38B1B9"; month.style.background = "#FFFFFF"; month.style.cursor = "text"; showMonthDiv(); } function mInputOnblur() { var month = $("month"); month.style.border = "solid 1px transparent"; month.style.background = "transparent"; month.style.cursor = "pointer"; closeMonthDiv(); } var backYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"backYear()\">←</td>"; var xYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeYearDiv()\">x</td>"; var forwardYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"forwardYear()\">→</td>"; function showYearDiv() { var yearDiv = $("yearDiv"); var year = parseInt($("year").value); var html = "<table>"; for (var i = 0; i < 5; i++) { html += "<tr><td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i-2) + ")\">" + (year+i-2) + "</td></tr>"; } html += "<tr>"; html += backYearTd + xYearTd + forwardYearTd; html += "</tr>"; html += "<table>"; yearDiv.innerHTML = html; yearDiv.style.display = "block"; } function backYear() { var yearDiv = $("yearDiv"); var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue); var html = "<table>"; for (var i = 0; i < 5; i++) { html += "<tr><td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i-1) + ")\">" + (year+i-1) + "</td></tr>"; } html += "<tr>"; html += backYearTd + xYearTd + forwardYearTd; html += "</tr>"; html += "<table>"; yearDiv.innerHTML = html; yearDiv.style.display = "block"; } function forwardYear() { var yearDiv = $("yearDiv"); var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue); var html = "<table>"; for (var i = 0; i < 5; i++) { html += "<tr><td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i+1) + ")\">" + (year+i+1) + "</td></tr>"; } html += "<tr>"; html += backYearTd + xYearTd + forwardYearTd; html += "</tr>"; html += "<table>"; yearDiv.innerHTML = html; yearDiv.style.display = "block"; } function closeYearDiv() { var yearDiv = $("yearDiv"); yearDiv.style.display = "none"; } function yInuptOnfocus() { var year = $("year"); year.style.border = "solid 1px #38B1B9"; year.style.background = "#FFFFFF"; year.style.cursor = "text"; showYearDiv(); } function yInputOnblur() { var year = $("year"); year.style.border = "solid 1px transparent"; year.style.background = "transparent"; year.style.cursor = "pointer"; closeYearDiv(); } function getDaysInMonth(month,year) { var days; if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31; else if (month==4 || month==6 || month==9 || month==11) days=30; else if (month==2) { if (isLeapYear(year)) { days=29; } else { days=28; } } return days; } function isLeapYear (Year) { if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return true; } else { return false; } } function overdate(obj) { obj.style.background = "#B3E6EA"; obj.style.cursor = "pointer"; } function outdate(obj) { obj.style.background = "#EDFBFB"; } function displayCalendar(month, year) { var dateDiv = $("dateDiv"); var html = "<table id=\"dateTab\"><tr class=\"day\"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"; month = parseInt(month); year = parseInt(year); var i = 0; var days = getDaysInMonth(month + 1, year); var firstOfMonth = new Date(year, month, 1);//创建某年某月的第一天日期对象 var startingPos = firstOfMonth.getDay();//得到这个月第一天是星期几 var today = new Date(); var tDate = today.getDate(); var tMonth = today.getMonth(); var tYear = today.getYear(); days += startingPos; html += "<tr class='date'>"; for (i = 0; i < startingPos; i++) { html += "<td> </td>"; } var j = 0; for (i = startingPos; i < days; i++) { j++; var date = ""; if ( i%7 == 0 ) html += "</tr><tr class='date'>"; if (i - startingPos + 1 < 10) date += "0"; date += i - startingPos + 1; if (i%7 == 0 || (i+1)%7 == 0) {// 周六或周日 if (j == tDate && tMonth == month && tYear == year) // 今天 html += "<td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>"; else html += "<td class='weekday' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>"; } else {// 周一至周五 if (j == tDate && tMonth == month && tYear == year) // 今天 html += "<td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>"; else html += "<td onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>"; } } if (days < 35 && days > 28) { for (i = days; i < 35; i++) { html += "<td> </td>"; } } else if (days > 35) { for (i = days; i < 42; i++) { html += "<td> </td>"; } } html += "</tr></table>"; dateDiv.innerHTML = html; } function isFourDigitYear(year) { if (year.length != 4) { alert ("Sorry, the year must be four-digits in length."); $("year").select(); $("year").focus(); return false; } else { return true; } } function getMonthIndex(month) { for (var i = 0; i < monthArr.length; i++) { if (month == monthArr[i]) { return i; } } return 0; } function setPreviousYear() { var year = $("year").value; if (isFourDigitYear(year)) { var month = getMonthIndex($("month").value); year--; $("year").value = year; displayCalendar(month, year); } } function setPreviousMonth() { var year =$("year").value; if (isFourDigitYear(year)) { var month = getMonthIndex($("month").value); if (month == 0) { month = 11; if (year > 1000) { year--; $("year").value = year; } } else { month--; } $("month").value = monthArr[month]; displayCalendar(month, year); } } function setNextMonth() { var year =$("year").value; if (isFourDigitYear(year)) { var month = getMonthIndex($("month").value); if (month == 11) { month = 0; year++; $("year").value = year; } else { month++; } $("month").value = monthArr[month]; displayCalendar(month, year); } } function setNextYear() { var year =$("year").value; if (isFourDigitYear(year)) { var month = getMonthIndex($("month").value); year++; $("year").value = year; displayCalendar(month, year); } } function leftFill(str, digit, char) { var string = str.toString(); var ret = ""; if (string.length < digit) { for (var i = 0; i < digit - string.length; i++) { ret += char; } } else { return string; } ret += string; return ret; } //设置今天日期 function setToday() { var now = new Date(); var day = now.getDate(); var month = now.getMonth(); var year = now.getYear(); var hour = leftFill(now.getHours(), 2, "0"); var minute = leftFill(now.getMinutes(), 2, "0"); var second = leftFill(now.getSeconds(), 2, "0"); if (year < 2000) // Y2K Fix, Isaac Powell year = year + 1900; $("month").value = monthArr[month]; $("year").value = year; displayCalendar(month, year); $("hh").value = hour; $("mm").value = minute; $("ss").value = second; } function selectMonth(month) { var year = $("year").value; $("month").value = monthArr[month]; displayCalendar(month, year); closeMonthDiv(); } function selectYear(year) { var month = getMonthIndex($("month").value); $("year").value = year; displayCalendar(month, year); closeYearDiv(); } var curFocus = null; function selectInput(obj) { curFocus = obj; obj.select(); } function increaseTime() { var hh = $("hh"); if (curFocus == null) { return; } var curValue = parseInt(curFocus.value, 10); var value; if ((curFocus == hh && curValue < 23) || (curFocus != hh && curValue < 59)) { value = curValue + 1; } else { value = 0; } curFocus.value = leftFill(value, 2, "0"); curFocus.focus(); } function decreaseTime() { var hh = $("hh"); if (curFocus == null) { return; } var curValue = parseInt(curFocus.value, 10); var value; if (curValue > 0) { value = curValue - 1; } else { if (curFocus == hh) value = 23; else value = 59; } curFocus.value = leftFill(value, 2, "0"); curFocus.focus(); } function getScriptPath() { var elements = document.getElementsByTagName("script"); for (var i = 0; i < elements.length; i++) { if (elements[i].src && elements[i].src.match(/date[\w\-\.]*\.js/) != null) { return elements[i].src.substring(0, elements[i].src.lastIndexOf('/') + 1); } } return ""; } var object = null; var mainDiv = null; var scriptPath = getScriptPath(); function DateHandler(obj) { closeDate();//确保已存在的日期窗口被关闭,一个页面中同时只能存在一个日期窗口 object = obj; var str = "" + "<div class='WdateDiv'>" + "<div id='dpTitle'>" + "<div style='float:left;margin:2px;width:45px'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/navLeft.gif' onclick='setPreviousYear()'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/left.gif' onclick='setPreviousMonth()'>" + "</div>" + "<div style='float:left;margin:2px;'>" + "<div style='width:62px' class='ymsel' id='monthDiv'>" + "<table>"; for (var i = 0; i < 6; i++) { var monthTd1 = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + i + ")\">" + monthArr[i] + "</td>"; var monthTd2 = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + (i+7) + ")\">" + monthArr[i+7] + "</td>"; var xTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeMonthDiv()\">x</td>"; str += "<tr>"; if (i != 5) { str += monthTd1 + monthTd2; } else { str += monthTd1 + xTd; } str += "</tr>"; } str += "</table>" + "</div>" + "<input id='month' style='margin-top:1px;width:30px;' maxlength='3' onfocus='mInuptOnfocus()' onblur='mInputOnblur()' onkeydown='return false' />" + "</div>" + "<div style='float:left;margin:2px;'>" + "<div class='ymsel' id=\"yearDiv\"></div>" + "<input id=\"year\" style='width:40px;' maxlength=4 onfocus=\"yInuptOnfocus()\" onblur=\"yInputOnblur()\">" + "</div>" + "<div style='float:right;margin:2px;'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/right.gif' onclick='setNextMonth()'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/navRight.gif' onclick='setNextYear()'>" + "</div>" + "</div>" + "<div id=\"dateDiv\"></div>" + "<div style='float:left;>" + "<div id='timeDiv' style='float:left;margin-top:3px;text-align:left;'>" + "<table class='timeTab'><tr><td rowspan='2'><span class='time'>时间</span>" + "<span class='timeSpan'><input id='hh' class='time' type='text' value='' size='2' onfocus='selectInput(this)' />:" + "<input id='mm' class='time' type='text' value='' size='2' onfocus='selectInput(this)' />:" + "<input id='ss' class='time' type='text' value='' size='2' onfocus='selectInput(this)' /></span></td>" + "<td><button class='selTimeBtn' onclick='increaseTime()'><img style='cursor:pointer' src='" + scriptPath + "images/timeUp.gif' /></button></td></tr>" + "<tr><td><button class='selTimeBtn' onclick='decreaseTime()'><img style='cursor:pointer;margin-left:1px;' src='" + scriptPath + "images/timeDown.gif' /></button></td></tr></table>" + "</div>" + "<div id=dpButton style='float:right;margin-top:3px;text-align:right;'>" + "<input class=\"bttn\" type=button value=\"今天\" onclick=\"setToday()\" />" + "</div>" + "</div>" + "</div>"; if (mainDiv == null) { mainDiv = document.createElement("div"); mainDiv.innerHTML = str; var top = object.offsetTop + object.clientTop; var left = object.offsetLeft + object.clientLeft; var height = object.clientHeight; mainDiv.style.position = "absolute"; mainDiv.style.left = left+7 + "px"; mainDiv.style.top = top + height+17 + "px"; document.body.appendChild(mainDiv); } mainDiv.style.display = "block"; setToday(); } function closeDate() { if (mainDiv != null) { mainDiv.style.display = "none"; mainDiv.innerHTML = ""; mainDiv = null; } } function selectDate(obj) { var year = $("year").value; var month = getMonthIndex($("month").value) + 1; var date = obj.childNodes[0].nodeValue; var str = year + "-"; str += leftFill(month, 2, "0"); str += "-" + date; str += " " + $("hh").value + ":" + $("mm").value + ":" + $("ss").value; object.value = str; closeDate(); }
date.css源代码:
.WdateDiv{ width:190px; background-color:#FFFFFF; border:#C5E1E4 1px solid; padding:2px; } .WdateDiv *{font-size:9pt;} .WdateDiv #dpTitle{ height:24px; border: solid 1px #C5E1E4; color:#13777E; background:url(images/bg.jpg) repeat #EDFBFB; margin-bottom:2px; } /* 年份月份选择框 DIV */ .ymsel{ position:absolute; margin-left:0px; top:28px; background-color:#FFFFFF; padding:2px; border:#A3C6C8 1px solid; display:none; text-align:center; } #month { background:transparent; border:solid 1px transparent; color:#08575B; cursor:pointer; } #year { background:transparent; border:solid 1px transparent; color:#08575B; cursor:pointer; } .bttn { background:#CFEBEE; border:solid 1px #38B1B9; color:#08575B; text-align:center; padding-top:2px; } .timeSpan { border:solid 1px #38B1B9; } .time { color:#085758; background:#FFFFFF; border:none; text-align:center; } .timeTab { border-collapse:collapse; border-spacing:0px; border:none; } .selTimeBtn { background:#FFFFFF; border:none; text-align:center; height:8px; } #dateTab { background:#EDFBFB; width:100%; border-collapse:collapse; border: solid 1px #C5E1E4; } .day { background:#BDEBEE; margin:0px; padding:0px; } .day td { color:#13777E; width:14%; margin:0px; padding:2px; text-align:center; } .date { background:#EDFBFB; } .date td { color:#13777E; margin:0px; padding:2px; text-align:center; } td.weekday { color:#CD527B; } td.thisDay { color:red; } .mouseover{ background:#B3E6EA; cursor:pointer; color:#13777E; text-align:center; } .mouseout { background:#FFFFFF; color:#13777E; text-align:center; }
images目录下放置了所有使用到的图片.
下面是一个使用这个空间的测试页面:
<?xml version="1.0" encoding="GBK" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./date/date.css"/> <script type="text/javascript" src="./date/date.js"></script> </head> <body> <input type="text" onfocus="new DateHandler(this)"/> </body> </html>
发表评论
-
扩展JavaScript的String对象方法
2010-08-17 20:27 1030扩展JavaScript的String对象方法: 1. ... -
【转载】Javascript正则表达式笔记
2010-08-17 20:04 1589^ The caret (^) tells the ... -
js创建对象的几种常用方式
2010-07-27 10:33 1282第一种模式:工厂方式 var lev=function(){ ... -
IE vs FireFox
2010-07-15 09:16 13781. event对象(1) 在IE下通过window.even ... -
JS实现类似Java的StringBuffer类
2010-07-05 21:45 1955实现了一个类似Java中StringBuffer的append ... -
图片切换效果
2010-03-19 14:03 2124图片预览效果 可通 ... -
动态改变背景颜色的小控件
2010-03-15 17:23 2074动态改变背景颜色的小控件 可以通过样式修改控件的位置及控 ... -
悟透JavaScript
2010-02-09 15:27 949首先说明,这是别人写的一篇文章,写得很好,对理解JavaScr ... -
JS上下无缝滚动效果
2010-02-09 13:56 6523JS上下无缝滚动效果: 可自定义每次滚动的px量,滚动的 ... -
【转载】document对象
2010-01-21 10:54 2382document对象 代表给定浏览器窗口中的 HTML ... -
动态获取页面中选中的文本
2010-01-21 10:42 1898<!DOCTYPE html PUBLIC " ... -
JS控制只能往输入框中输入数字
2010-01-20 10:04 6250<!DOCTYPE HTML PUBLIC " ... -
各种浏览器下用JS获取文件域的文件路径的方法
2010-01-19 10:41 14741.ie6: var file_url = documen ... -
JavaScript实现动态增加文件域表单
2009-02-11 19:29 1227对于上传多个文件,可以通过js来动态生成文件域,下面是源代码, ...
相关推荐
"ext4.2 日历日期控件,可以选择时分秒"是一个专门针对这个需求的组件,它允许用户在网页应用中方便地选择日期、时间和秒数。这个控件是EXTJS库的一个组成部分,EXTJS是一个基于JavaScript的富客户端应用框架,广泛...
在JavaScript(JS)编程中,创建一个功能完备的日历日期控件,特别是带有时分秒选择功能,是一项常见的需求。这种控件常用于网页表单,让用户能够方便地选取精确到秒的时间点。本篇文章将深入探讨如何使用原生...
在IT行业中,日历控件是一种常见的用户界面元素,它允许用户方便地选择日期,常用于事件安排、日期输入等场景。本项目是基于JSP(JavaServer Pages)和JavaScript技术实现的一个日历控件。下面我们将深入探讨这两个...
在WPS Office的Excel应用中,日期控件是一种非常实用的功能,它允许用户在工作表中插入一个可交互的日历小部件,以便于选择和输入日期。标题“wps中excel日期控件下载”提示我们要关注如何在WPS Excel中获取和安装这...
在IT领域,日历控件是一种常见的用户界面元素,它允许用户方便地选择日期或进行日期相关的操作。在“日历控件12”中,我们可能会遇到一系列关于如何集成、自定义以及优化这种控件的知识点。下面将详细介绍这些内容。...
在EXCEL中,可以通过双击单元格,调出日历控件,通过对日历控件的操作,将所选日期更新到单元格中,该控件代码完全开放免费,供大家学习和使用,感兴趣的同学可以多多关注www.allmlp.com,让我们共同成长共同学习。
在IT领域,尤其是在前端开发中,"可多选的日期控件"是一个常见的需求,它允许用户在日历界面中选择多个日期,而非只能选择单个日期。这种控件广泛应用于各种应用程序,如行程规划、会议安排或者数据分析等场景。在本...
【强大的日历控件】是一种在软件开发中广泛使用的组件,尤其在Web应用程序和桌面应用程序中,它为用户提供了一个直观的界面来选择日期或者进行日期相关的操作。在信息技术领域,日历控件是用户界面(UI)设计的一个...
在IT行业中,日期控件和日期时间控件是软件开发中不可或缺的部分,特别是在构建用户界面时。PowerBuilder作为一款强大的Windows应用程序开发工具,提供了丰富的控件库,包括用于处理日期和时间的控件。这些控件允许...
在Excel中,日历控件是一种非常实用的功能,它允许用户通过一个直观的日历界面来选择日期,这对于处理与时间相关的数据尤其有用。标题提到的"提供excel 日历控件9.0下载"指的是为不支持或缺少此功能的Excel版本提供...
"ActiveX日历控件.ocx"就是这样一个专门用于显示日期和时间的组件。 日历控件是用户界面设计中的常见元素,它允许用户方便地选择日期,常用于事件预订、任务管理或任何形式的日期输入。在ActiveX框架下,这个`.ocx`...
在本场景中,我们关注的是一个特定的GUI组件,即“滑动日历选择控件”,它常用于PC和IPC(Industrial Personal Computer,工业个人计算机)上的用户界面,以帮助用户方便地选取日期。这个控件对于需要用户输入日期的...
微软日历控件“Microsoft Date and Time Picker Control 6.0”是一款强大的日期和时间选择组件,能够以直观的方式展示和选择日期和时间。它支持多种格式,包括但不限于日期、时间和星期显示,为用户提供灵活的选择...
8. **国际化和本地化**: 为了支持多语言环境,日历控件需要考虑日期格式、星期的起始日以及节假日等本地化信息。Qt提供了QLocale类来处理这些需求。 9. **性能优化**: 对于大型日历或实时更新的需求,性能优化是...
在这个场景中,"js日历控件日期多选Kalendajs" 提供了一种功能强大的解决方案,允许用户在日历上选择多个日期,甚至可以跨越多个月份。 Kalendajs是一款专门设计的日历插件,它具有日期多选功能,可以极大地提升...
本项目聚焦于利用wxPython设计一个日历控件,这个控件允许用户选择日期,并能打印所选日期,同时支持月份的翻转。在Python的GUI领域,虽然Tkinter是一个常见的选择,但wxPython因其更接近原生操作系统界面的外观和...
JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件,它通过在页面上动态创建一个可浮动的DIV元素来展示日历,用户可以选择日期并将其值返回到页面上的特定输入元素。 **1. JS基础知识** JavaScript(简称JS...
1. **日期选择器(Date Chooser)**:这是最常见的日期控件,它提供一个日历界面,用户可以通过点击日期来选择。日期选择器通常具有“今天”、“上月”和“下月”的按钮,便于快速导航。 2. **文本框(TextBox)**:...
在PowerBuilder(简称PB)开发环境中,日历控件是一种常用的用户界面元素,它允许用户方便地选择日期,常用于日期输入字段。本教程将详细解释如何在PowerBuilder中调用和使用日历控件,以`dateitemfunc.pbl`、`...
- 考虑到用户体验,可以启用日期控件的日历功能,让用户通过弹出的日历界面选择日期,而不是手动输入,降低输入错误的可能性。 - 在数据窗口中,考虑使用动态绑定日期控件,使得数据窗口可以根据不同的查询条件...