台灣最大的程式設計社群網站
線上人數
893
 
會員總數:355015
討論主題:190859
免費程式:2730
歡迎您免費加入會員
首頁 >> 程式下載 >> 程式資料檢視
程式資料
名稱 日期選擇元件
類別 各種元件 使用者介面 元件
程式語言 Java Script 開發狀態 100% - 成熟
語系 英文 難易度 難度三(適合一般程度)
原創者 Mihai Bazon  原創者網址 http://www.bazon.net/mishoo/
提供者 大師 執行網址 http://www.bazon.net/mishoo/
版權 開放源碼 評分
(共有 16 人投票,總分 74)
我要評分 : 不好<- 1 2 3 4 5 -> 很好   這個程式不能有問題歐! 加入我的收藏夾!
說明
可以選擇日期以及時間的萬年歷組件
使用方法:
先解壓縮於您指定的目錄, 例如jscalendar/

1. 於<head>...</head>之間加入
<!-- calendar stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="jscalendar/calendar-win2k-cold-1.css" title="win2k-cold-1" />

<!-- main calendar program -->
<script type="text/javascript" src="jscalendar/calendar.js"></script>

<!-- language for the calendar -->
<script type="text/javascript" src="jscalendar/lang/calendar-en.js"></script>

<!-- the following script defines the Calendar.setup helper function, which makes
adding a calendar a matter of 1 or 2 lines of code. -->
<script type="text/javascript" src="jscalendar/calendar-setup.js"></script>

2. 於<form>...</form>之間加入
<input type="text" id="mydate" name="mydate" />
<button id="trigger">...</button>

3. 於</form>之後加入
<script type="text/javascript">
Calendar.setup(
{
inputField : "mydate", // 與輸入區的ID一樣
ifFormat : "%m-%d-%Y", // the date format
button : "trigger" // 與按鈕的ID一樣
}
);
</script>

附註: 請暫時使用英文(calendar-en.js)插件, 中文有點怪怪的:p
預覽畫面
檔名 : jscalendar.gif
檔案大小 : 44816 Bytes  上傳時間:2005-08-17 09:02
檢視圖片
--
日期選擇畫面
檔案列表
檔名 : jscalendar-1.0.zip  下載數:484
檔案大小:396401 Bytes  上傳時間:2005-08-17 08:53
下載此檔案
--
日歷組件
網友回應  
如要發送訊息請先登入.
民國年的問題 chunhsing [2008-08-07 11:20]
請問小月曆上面的西元年,有辦法改成民國年嗎??
還有帶入的日期是在那段JAVASCRIPT裡面,看了好久~~
找不太到
請大師指點指點

週數發生問題  [2007-12-02 15:31]
請問我套用中文後,是星期一放在最前面,請問我要如何將星期日放在最前面,因為星期一在最前面的話,週數會發生問題。

這個元件可將年份改為民國年嗎? Mercury [2007-10-29 17:50]
這個元件可將年份改為民國年嗎?
或只有取得之年份為民國年?

日期選擇元件_請問如何更改日期表現方式 phoebe [2006-12-17 10:21]
我有這樣做也,但是發現沒用
後來把jscalendar資料夾裡面有時間的格式的語法都改正了
就可以達到我要的了也
回應 : 日期選擇元件_請問如何更改日期表現方式 [2006-12-18 12:05] 大師
偷偷教你一個方法, 可以顯示中文, 而且日期格式也正確的用法,
於<head>...</head>加入下列程式
<!-- 月曆選擇元件開始 -->
<!-- calendar stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="jscalendar/calendar-win2k-cold-1.css" title="win2k-cold-1">

<!-- main calendar program -->
<script type="text/javascript" src="jscalendar/calendar.js"></script>

<!-- language for the calendar -->
<script type="text/javascript" src="jscalendar/lang/calendar-big5.js"></script>

<!-- the following script defines the Calendar.setup helper function, which makes
adding a calendar a matter of 1 or 2 lines of code. -->
<script type="text/javascript">
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "startdate" || cal.sel.id == "enddate"))
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}

// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close" button. It just hides the calendar without
// destroying it.
function closeHandler(cal) {
cal.hide(); // hide the calendar
// cal.destroy();
_dynarch_popupCalendar = null;
}

// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format, showsTime, showsOtherMonths) {
var el = document.getElementById(id);
if (_dynarch_popupCalendar != null) {
// we already have some calendar created
_dynarch_popupCalendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(1, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
if (typeof showsTime == "string") {
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
if (showsOtherMonths) {
cal.showsOtherMonths = true;
}
_dynarch_popupCalendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
_dynarch_popupCalendar.setDateFormat(format); // set the specified date format
_dynarch_popupCalendar.parseDate(el.value); // try to parse the text in field
_dynarch_popupCalendar.sel = el; // inform it what input field we use

// the reference element that we pass to showAtElement is the button that
// triggers the calendar. In this example we align the calendar bottom-right
// to the button.
_dynarch_popupCalendar.showAtElement(el.nextSibling, "Br"); // show the calendar

return false;
}
</script>
<!-- 月曆選擇元件結尾 -->

調用方式如下:
<input type="text" id="mydate" name="mydate">
<button title="選擇日期" onclick="return showCalendar('mydate', '%m-%d-%Y');">...</button>

請偷偷善加利用喔, 有好康的要告訴我喔!!!


日期選擇元件_請問如何更改日期表現方式 phoebe [2006-12-14 16:27]
http://www.blueshop.com.tw/download/show.asp?pgmcde=PGM200508170852354UO&extcde=PGMLSTCAT

請問如何更改日期表現方式
原來:12-31-2006
我想要的:2006-12-31
回應 : 日期選擇元件_請問如何更改日期表現方式 [2006-12-16 23:10] 大師
修改這一段
ifFormat : "%m-%d-%Y", // the date format
成為
ifFormat : "%Y-%m-%d", // the date format
就會顯示成為您需要的格式了