源码详解js实现日期控件

今天早上，下了几个js日期控件，源码分析分析，先看效果：

html文件：

[html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Cross browser javascript calendar</title>

</head>

<body>

<form>

<table>

<tr><td>Date input(YYYY/MM/DD): </td><td><td><input type="text" value="2012/12/12" readonly name="theDate"><input type="button" value="Cal" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)"></td></tr>

</table>

</body>

</html>

js文件：

[javascript]

/************************************************************************************************************

JS Calendar

This library is free software; you can redistribute it and/or

modify it under the terms of the GNU Lesser General Public

License as published by the Free Software Foundation; either

version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU

Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public

License along with this library; if not, write to the Free Software

Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script

written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006

Owner of DHTMLgoodies.com

************************************************************************************************************/

/* Update log:

Version 1.2, November 8th - 2005 - Added <iframe> background in IE

Version 1.3, November 12th - 2005 - Fixed top bar position in Opera 7

Version 1.4, December 28th - 2005 - Support for Spanish and Portuguese

Version 1.5, January 18th - 2006 - Fixed problem with next-previous buttons after a month has been selected from dropdown

Version 1.6, February 22nd - 2006 - Added variable which holds the path to images.

Format todays date at the bottom by use of the todayStringFormat variable

Pick todays date by clicking on todays date at the bottom of the calendar

Version 2.0 May, 25th - 2006 - Added support for time(hour and minutes) and changing year and hour when holding mouse over + and - options. (i.e. instead of click)

Version 2.1 July, 2nd - 2006 - Added support for more date formats(example: d.m.yyyy, i.e. one letter day and month).

// Modifications by Gregg Buntin

Version 2.1.1 8/9/2007 gfb - Add switch to turn off Year Span Selection

This allows me to only have this year & next year in the drop down

Version 2.1.2 8/30/2007 gfb - Add switch to start week on Sunday

Add switch to turn off week number display

Fix bug when using on an HTTPS page

var turnOffYearSpan = false; // true = Only show This Year and Next, false = show +/- 5 years

var weekStartsOnSunday = false; // true = Start the week on Sunday, false = start the week on Monday

var showWeekNumber = true; // true = show week number, false = do not show week number

var languageCode = 'en'; // Possible values: en,ge,no,nl,es,pt-br,fr

// en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8 doctype for hungarian)

var calendar_display_time = true;

// Format of current day at the bottom of the calendar

// [todayString] = the value of todayString

// [dayString] = day of week (examle: mon, tue, wed...)

// [UCFdayString] = day of week (examle: Mon, Tue, Wed...) ( First letter in uppercase)

// [day] = Day of month, 1..31

// [monthString] = Name of current month

// [year] = Current year

var todayStringFormat = '[todayString] [UCFdayString]. [day]. [monthString] [year]';

var pathToImages = 'images/'; // Relative to your HTML file

var speedOfSelectBoxSliding = 200; // Milliseconds between changing year and hour when holding mouse over "-" and "+" - lower value = faster

var intervalSelectBox_minutes = 5; // Minute select box - interval between each option (5 = default)

var calendar_offsetTop = 0; // Offset - calendar placement - You probably have to modify this value if you're not using a strict doctype

var calendar_offsetLeft = 0; // Offset - calendar placement - You probably have to modify this value if you're not using a strict doctype

var calendarDiv = false;

var MSIE = false;

var Opera = false; &

补充：web前端 , JavaScript ,

上一个：Javascript网页打印大全
下一个：Extjs中store的load监听的回调函数

更多图片编程知识:

更多JS疑问解答：: 几个验证11位手机号码格式的js代码; js把图片转换成 base64代码; js把base代码转换成图片; JS 将 base64编码的图片转化为图片文件; js中的定时器; js如何获得FCKeditor控件的值; 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...; JS验证，这块“牛皮”反复修改都不能实现; 在JS中使用DOM模型; 如何用JS 获取本地文件夹的文件列表; js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？; 求实现自动生成图片缩略图的JS代码; JS脚本网页问题; js，代码中"object"和"Object"区别？; js+flash实现网页图片切换效果，出现边框，单击激活此控件。