在编程序的过程中,通常遇到这样的情况,要求用户输入日期,结果,他们输入的不规范,导致程序结果最后出现错误,今天,我从网上,搜了一下,找了相应的代码。效果不错,与大家分享一下。
先看看演示吧:
演示:http://jed.dzhope.com/yanshi.php
怎么样?不错吧
第一步:
在< head>和< /head>之间加上:
<script language="JavaScript" src="Calendar30.js"></script>
第二步:
<INPUT name=date type=text id="date" size=30 onfocus="calendar()">
或者
<INPUT name=notice_jdate type=text id="notice_jdate" size=30 onfocus="calendar()"><input type=button value=日期 onclick="calendar(document.form1.txt)">
下载Calendar30.js
如果觉得日历弹窗的样式不好看,还可以定制。
修改Calendar30.js里的
function TWebCalendar() //初始化日历的设置
{
this.regInfo = "关闭的快捷键:[Esc]";
this.regInfo += " ";
this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.day = new Array(39); //定义日历展示用的数组
this.dayObj = new Array(39); //定义日期展示控件数组
this.dateStyle = null; //保存格式化后日期数组
this.objExport = null; //日历回传的显示控件
this.eventSrc = null; //日历显示的触发控件
this.inputDate = null; //转化外的输入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定义年的变量的初始值
this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值
this.thisDay = new Date().getDate(); //定义日的变量的初始值
this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)
this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
this.calendar = getObjectById("meizzCalendarLayer"); //日历的层
this.dateReg = ""; //日历格式验证的正则式
this.yearFall = 50; //定义年下拉框的年差值
this.format = "yyyy-mm-dd"; //回传日期的格式
this.timeShow = false; //是否返回时间
this.drag = true; //是否允许拖动
this.darkColor = "#0000D0"; //控件的暗色
this.lightColor = "#FFFFFF"; //控件的亮色
this.btnBgColor = "#FFFFF5"; //控件的按钮背景色
this.wordColor = "#000080"; //控件的文字颜色
this.wordDark = "#DCDCDC"; //控件的暗文字颜色
this.dayBgColor = "#E6E6FA"; //日期数字背景色
this.todayColor = "#FF0000"; //今天在日历上的标示背景色
this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色
} var WebCalendar = new TWebCalendar();
演示文件下载:
本来,很简单的事情,让我给讲复杂了。有不明白的就留言吧!
先看看演示吧:
演示:http://jed.dzhope.com/yanshi.php
怎么样?不错吧
第一步:
在< head>和< /head>之间加上:
<script language="JavaScript" src="Calendar30.js"></script>
第二步:
<INPUT name=date type=text id="date" size=30 onfocus="calendar()">
或者
<INPUT name=notice_jdate type=text id="notice_jdate" size=30 onfocus="calendar()"><input type=button value=日期 onclick="calendar(document.form1.txt)">
下载Calendar30.js
下载文件
如果觉得日历弹窗的样式不好看,还可以定制。
修改Calendar30.js里的
function TWebCalendar() //初始化日历的设置
{
this.regInfo = "关闭的快捷键:[Esc]";
this.regInfo += " ";
this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.day = new Array(39); //定义日历展示用的数组
this.dayObj = new Array(39); //定义日期展示控件数组
this.dateStyle = null; //保存格式化后日期数组
this.objExport = null; //日历回传的显示控件
this.eventSrc = null; //日历显示的触发控件
this.inputDate = null; //转化外的输入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定义年的变量的初始值
this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值
this.thisDay = new Date().getDate(); //定义日的变量的初始值
this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)
this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
this.calendar = getObjectById("meizzCalendarLayer"); //日历的层
this.dateReg = ""; //日历格式验证的正则式
this.yearFall = 50; //定义年下拉框的年差值
this.format = "yyyy-mm-dd"; //回传日期的格式
this.timeShow = false; //是否返回时间
this.drag = true; //是否允许拖动
this.darkColor = "#0000D0"; //控件的暗色
this.lightColor = "#FFFFFF"; //控件的亮色
this.btnBgColor = "#FFFFF5"; //控件的按钮背景色
this.wordColor = "#000080"; //控件的文字颜色
this.wordDark = "#DCDCDC"; //控件的暗文字颜色
this.dayBgColor = "#E6E6FA"; //日期数字背景色
this.todayColor = "#FF0000"; //今天在日历上的标示背景色
this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色
} var WebCalendar = new TWebCalendar();
演示文件下载:
下载文件
本来,很简单的事情,让我给讲复杂了。有不明白的就留言吧!
jed
2008-3-12 17:06
友情提示:firefox浏览器不支持JS时间控件!
jed
2006-12-17 10:49
我把演示页面也提供下载了,你下载下来研究研究吧!
3
2006-12-15 17:08
我以前都用起了,这次弄了好久,还是没有反映。
分页: 1/1 1