簡潔JS 日曆控件 支持日期和月份選擇

以下這個JS日曆控件是我的閒暇之餘自己編寫的,所有的代碼全部在IE7/IE8/Firefox下面測試通過,

而且可以解決被iframe層遮蓋的問題。現在只提供兩種風格(簡潔版和古典版)和兩種語言(英文和中文)。支持自定義日期格式,設定時間範圍。

默認爲古典版,英文,下面來看簡單的縮略圖。

首先是簡潔版:

簡潔JS 日曆控件 支持日期和月份選擇 - 雪舞殘鴻 - 你若安好,便是晴天!日期選擇器簡潔JS 日曆控件 支持日期和月份選擇 - 雪舞殘鴻 - 你若安好,便是晴天!月份選擇器

古典版:

簡潔JS 日曆控件 支持日期和月份選擇 - 雪舞殘鴻 - 你若安好,便是晴天!日期選擇器簡潔JS 日曆控件 支持日期和月份選擇 - 雪舞殘鴻 - 你若安好,便是晴天!日期選擇器中文語言簡潔JS 日曆控件 支持日期和月份選擇 - 雪舞殘鴻 - 你若安好,便是晴天!月份選擇器

下面是使用方法:

在要使用這個控件的頁面上引入這個JS

<script type="text/javascript" src="javascript/DatePicker.js"></script>

使用月份選擇器,默認時間格式爲yyyy-MM

<input id="begintime" type="text" οnclick="setmonth(this)" readonly="readonly" />

使用日期選擇器,默認時間格式爲yyyy-MM-dd
<input id="endtime" type="text" οnfοcus="setday(this)" readonly="readonly" />

使用日期選擇器,一共提供五個參數,其中第一個參數是Object類型,指需要填入日期的元素對象;第二個參數是時間的格式,默認爲yyyy-MM-dd;第三、四個參數分別爲開始時間和結束時間;第五個參數是語言種類,這個1表示中文,0爲英文(默認採用英文)
<input id="endtime" type="text" οnfοcus="setday(this,‘yyyy-MM-dd’,'2010-01-01','2010-12-30',1)" readonly="readonly" />

風格默認使用古典版,如果需要使用簡潔版,則進入代碼中

簡潔JS 日曆控件 支持日期和月份選擇 - 雪舞殘鴻 - 你若安好,便是晴天!
將上述代碼中的上部分代碼(30行-56行)註釋,在把他換成下面部分的代碼(57行-83行)。則風格就可以改爲簡潔版了。

說了這麼多,下面附上這個日曆控件的JS文件:

http://files.cnblogs.com/coraldane/DatePicker.js

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章