分享
 
 
 

meizz(梅花雨)用javascript写的一个日期输入控件!

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

Web Calendar ver 3.0 网页日历

在WEB页面与用户交互时,常常遇到用户输入日期的时候.可是经常发生用户输入的日期格式与你当初设想的出入很大,这时你就要花上很大的精力来验证用户的日期输入的正确性上.基于这个麻烦的地方,我就着手写了这么一个日历控件,将WEB程序员从日期验证的苦恼中解脱出来.

这个东东是我一个写出来的,有时候考虑得难免不周全,希望大家多多指正,多提一些宝贵的意见和建议.我在这里先谢过大家了!

版本描述

Web Calendar ver 3.0 是综合 JavaScript DHTML HTML CSS 的产品,且封装在 WebCalendar 实例中,调用与设置都非常方便

Web Calendar ver 3.0 新加的功能:

1.对日历控件的对象式编程

2.对不同浏览器的兼容

3.对日历控件的样式颜色设置

4.对是否返回时分秒的设置

5.对年份下拉框的年跨度值的设置

6.增加了用方向键快捷键选择年月

7.增加了日历对网页空间的自适应显示

8.对日历日期显示机制的全新设计

Web Calendar ver 3.0 Author: meizz(梅花雪疏影横斜) mail: meizz@hzcnc.com

Web Calendar ver 2.0 Author: walkingpoison(水晶龙) mail: wayx@kali.com.cn http://expert.csdn.net/Expert/TopicView1.asp?id=1264734

Web Calendar ver 1.0 Author: meizz(梅花雪疏影横斜) mail: meizz@hzcnc.com http://expert.csdn.net/Expert/TopicView1.asp?id=1080595

在此我要特别感谢 walkingpoison(水晶龙) 和 emu(ston) 的大力支持,再次感谢!!

调用日历的代码示例

Web Calendar 的第一种调用方法:

代码:<input onfocus="calendar()">

Web Calendar 的第二种调用方法:

代码:<input name="txt" onfocus="calendar()"><input type=button

value=calendar onclick="calendar(document.form1.txt)">

对日历控件的定制

定义年下拉框的年跨值(两倍)

定义返回的日期格式(可以用数字,分隔符 - /)

定义是否返回时分秒

定义控件是否能被拖动

控件的暗色

控件的亮色

控件的按钮背景色

控件的文字颜色

控件的暗文字颜色

日期数字背景色

今天在日历上的标示背景色

日期显示的立体表达色

标准调用示例

<script language="JavaScript" src="calendar.js"></script>

注:下面这段日历定制的 JavaScript 代码你可以一个都不定义,使用其默认值

<script language="JavaScript"><!--

WebCalendar.yearFall = 50; //定义年下拉框的年差值

WebCalendar.format = "yyyy-mm-dd" | "2003-06-07"; //回传日期的格式

WebCalendar.timeShow = false | true; //是否返回时间

WebCalendar.drag = true | false;//是否允许拖动

WebCalendar.darkColor = "#0000D0"; //控件的暗色

WebCalendar.lightColor = "#FFFFFF"; //控件的亮色

WebCalendar.btnBgColor = "#FFFFF5"; //控件的按钮背景色

WebCalendar.wordColor = "#000080"; //控件的文字颜色

WebCalendar.wordDark = "#DCDCDC"; //控件的暗文字颜色

WebCalendar.dayBgColor = "#E6E6FA"; //日期数字背景色

WebCalendar.todayColor = "#FF0000"; //今天在日历上的标示背景色

WebCalendar.DarkBorder = "#D4D0C8"; //日期显示的立体表达色

//--></script>

<input onfocus="calendar()">

Web Calendar 里的自定义函数名及其说明

函数名 函数的用途说明(在主页面里自定义函数时请不要与以下的函数名冲突)

calendar()

用户的主调函数

writeIframe()

对iframe进行初始化

WebCalendar()

初始化日历的设置

funMonthSelect()

月份的下拉框

funYearSelect()

年份的下拉框

prevM()

往前翻月份

nextM()

往后翻月份

prevY()

往前翻 Year

nextY()

往后翻 Year

hiddenSelect()

隐藏年份与月份的下拉框

hiddenCalendar()

隐藏日历控件

appendZero(n)

日期自动补零程序

dayMouseOver()

日历里日期的 onmouseover 事件

dayMouseOut()

日历里日期的 onmouseout 事件

writeCalendar()

对日历显示数据的核心处理程序

returnDate()

根据日期格式等返回用户选定的日期

document.onclick()

if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();

若你要使用主网页的 document.onclick() 事件时,请加上上面这句代码(这句代码日历控件里已存在),

这句代码是当你点击日历以外的地方时日历自动关闭,若不使用 document.onclick() 事件就不需要再定义了.

全局变量WebCalendar

日历控件的实例,你可以通过它对日历进行定制

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有