Calendar 日期下拉選擇控件

// 版權說明
// written by Tan Ling Wee on 2 Dec 2001
// last updated 20 June 2003
// email : fuushikaden@yahoo.com

// 修改版 2010/02/10 by chino lin (http://blogger.mbdmt.com/)
// 支援IE6.7.8、Firefox 3.x、google chrome，加上顏色的設定值
// 使用語法: onclick="popUpCalendar(this, this,'yyyy-mm-dd','預設年月日')"
// 2010/09/09更新 加入預設年月日

 

這款下拉日期選擇的控件是我找了好久，覺得非常好用

他可以很快的下拉年份和月份並選擇，我個人在修改過讓它可以在其他瀏覽器正常顯示

並且加了幾個顏色的設定可以在不同網站色系調整使用自行配色。

=================================================================================
看看他的預覽圖:
=================================================================================



=================================================================================
Calendar 日期下拉選擇控件 DEMO:
=================================================================================

請選擇日期：
預設日期為value值





預設日期為今天




預設日期為指定日期1966-09-09




請選擇日期(鎖住自填)：





=================================================================================
Calendar 日期下拉選擇控件 安裝方式:
=================================================================================

1.js程式放到<BODY>之前(路徑要正確)

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


2.文字框加入以下紅色代碼

<input onclick="popUpCalendar(this, this,'yyyy-mm-dd')" readonly="readonly" size="10" name="startdate" />

yyyy-mm-dd 格式可自行調整

readonly="readonly" 加這個會鎖住輸入框不能自填，一定用選擇的

如果你想預設一個日期選擇可以在後面多設定一組日期參數，如下方代碼，如果文字框為空，則預設日期會是1975-01-01，不指定就是當天。

<input onclick="popUpCalendar(this, this,'yyyy-mm-dd','1975-01-01')" size="10" name="startdate" />


3.其他選項設定(非必要).

1) 用文字編輯器打開calendar/calendar.js
2) 找到一些設定值並調整

var menubgcolor = "#A9A9A9" //選單背景色
var menubordercolor = "#CFCFCF" //選單線框色
var menubordercolor2 = "#F6F6F6" //hover選單線框色
var startAt = 1 // 0 - sunday ; 1 - monday 一週開頭星期幾?
var showToday = 1 // 0 - don't show; 1 - show 是否顯示當天日期
var imgDir = "calendar/" // directory for images ... e.g. var imgDir="img/" 本控件相關圖片路徑

 

完成嚕~~!

 

完整下載包請至部落格文章下載
http://blogger.mbdmt.com/?p=112

本網頁教學由 chino lin (http://blogger.mbdmt.com) 製作
版權為原作者所有