Board logo

標題: [mooTools] Calendar - 可拖曳的月曆, 超美觀! [打印本頁]
作者: wmh    時間: 2008-8-9 14:35     標題: [mooTools] Calendar - 可拖曳的月曆, 超美觀!

Calendar: A Javascript class for Mootools
http://www.electricprism.com/aeron/calendar/
美觀又實用的月曆

先前曾經介紹過一篇 jQuery 月曆的用法，最近看到一位仁兄分享了許多新的風格(theme)，不過都大同小異，不怎麼美觀。因此今天特別介紹一下 mootools 這個漂亮的月曆，功能上絕不輸 jQuery 的月曆，快來看看範例吧：

[jsg.example]
<div><input id="date" name="date" type="text" style="float: left" /></div>

<link rel="stylesheet" type="text/css" href="_lib/mootools/plugins/calendar/calendar.css" />
<script type="text/javascript" src="_lib/mootools/plugins/calendar/mootools.js"></script>
<script type="text/javascript" src="_lib/mootools/plugins/calendar/calendar.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y-m-d' }); });
</script>
[/jsg.example]

有沒有覺得很棒呢？

對了，官方連結似乎沒有提供整個完整的下載包，因此我自己包了一個預設風格的壓縮檔給大家下載：
mootools_calendar.zip

使用方式非常簡單，先看看 HTML 的部份:
<div><input id="date" name="date" type="text" style="float: left" /></div>
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>


JavaScript 的部份是在 domready 事件執行 new Calendar():
window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y-m-d' }); });
new Calendar() 還有很多參數，這部份還請參考官方所提供的說明。
作者: wing_hk    時間: 2008-11-14 17:03

如果預設月份是當前月份就好了
作者: hanmin888    時間: 2008-12-12 23:24     標題: 試不出來

太悶了....一直搞不出來

有錯請指正
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">   
<title>moontool月曆測試</title>   
<!--JavaScript-->   
<script type="text/javascript" src="mooltool.js"></script>
<script type="text/javascript" src="calendar.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y/m/d' }); });
</script>
  
<!--JavaScript-->    
<!--CSS-->    
<link rel="stylesheet" type="text/css" href="calendar.css" />   
<!--CSS-->    
</head>   
<body>   
<input type="text" name="date" id="date" style="float: left">
  
</body>   
</html>
作者: opalmon    時間: 2009-3-18 16:56

mooltool.js→mootools.js 檔名打錯了...
作者: rmp45    時間: 2010-4-7 13:57

請問我要如何才能改變text的大小? (我直接用"<input id="date" name="date" type="text" size="50" value="" style="float: left">"卻沒有反應耶 )
作者: wmh    時間: 2010-4-7 21:13

檢查看看是不是 CSS 有設定
作者: rmp45    時間: 2010-4-8 09:24

嗯嗯~有! 找到了! 再這一段裡面:
...
input.calendar,
select.calendar {
        width: 130px;
}
...
另外,想請問目前星期的縮寫是S,M,T,W,T,F,S. 有人知道要在哪邊改這些縮寫嗎? 感恩
作者: wmh    時間: 2010-4-8 23:13

那些應該是寫在 JavaScript 內的字串
作者: like1002    時間: 2010-7-27 10:38

昨日在實作修改功能的時候~日期欄位的地方因新增資料的時候假設無填入日期資料資料庫預設為"0000-00-00"
所以在做修改的時候日期欄位echo 出來就是0000-00-00，點選拖曳月曆會失效!!
我想說是不是哪裡出問題，打開firfox錯誤主控台就發現JS錯誤關鍵字[J.month]
不過為了能交件~只好新增資料的時候日期部份預設必填欄位
作者: a87877474    時間: 2010-11-18 00:38

請問為何寫於php中小圖示無法換行
會像是
|            |


echo "<TD><script type='text/javascript' src='js/mootools.js'></script>
          <script type='text/javascript' src='js/calendar.rc4.js'></script>
          <input type='text' name='date' style='float: left'  /><br>
                                  <head>
                    <script language=javascript type=text/javascript>
                  window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y-m-d' }); });
                   </script>
                           <link rel='stylesheet' type='text/css' href='css/calendar.css' media='screen' />

</TD>" ;
作者: fishman    時間: 2015-4-7 11:17

回復 1# wmh


    你好:

剛接觸新手，JS使用方法還不是很熟，想詢問mootools_calendar.zip裡的檔案要放在麼位置給C#去使用??



歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)