Calendar 日期下拉選擇控件
發表於 : 11-02-2010 | 作者 : mbdmt chino
分類 : HTML & JAVASCRIPT |
0
Calendar 日期下拉選擇控件
這款下拉日期選擇的控件是我找了好久，覺得非常好用
他可以很快的下拉年份和月份並選擇，我個人在修改過讓它可以在其他瀏覽器正常顯示
並且加了幾個顏色的設定可以在不同網站色系調整使用自行配色。
另外這款並沒有把CSS分出來
我個人懶的弄
這樣應該不錯了~
// 版權說明
// 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，加上顏色的設定值
=====================================================
Calendar 日期下拉選擇控件 預覽圖:
=====================================================
=====================================================
Calendar 日期下拉選擇控件 安裝方式:
=====================================================
1.js程式放到<BODY>之前(路徑要正確)
<script language="JavaScript" src="calendar/calendar.js" type="text/javascript"></script>
2.文字框加入onclick代碼
<input onclick="popUpCalendar(this, this,'yyyy-mm-dd')" readonly="readonly" size="10" name="startdate" />
yyyy-mm-dd 格式可自行調整
readonly=』readonly』 加這個會鎖住輸入框不能自填，一定用選擇的
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/" 本控件相關圖片路徑
完成嚕~~!
=====================================================
Calendar 日期下拉選擇控件 DEMO:
=====================================================
http://www.mbdmt.com/calendar/
下載完整程式
本網頁教學由 chino lin (http://blogger.mbdmt.com) 製作
版權為原作者所有