以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

JavaScript 日曆

1/18 10' icon

JavaScript 日曆,隨便 Google 一下,總有個十個八個,例如這裡,就幫使用者網羅了不少作品,有免費的,也有商業版的。

這幾年各式 Javascript API/Library 多了,日曆也幾乎是標準配備,像 YUI 2 : Calendar jQuery DatepickermooTools Calendar 等。這些作品都相當方便好用。不過我個人偏愛的是由 HTMLArea 作者 Mishoo 所提供的 JSCalendar 。目前的版本別是第二代的 1.7 版。固定式的外觀看起來像是:

選取式的操作則像:

使用起來也相當方便,首先,到官網下載最新版本。

解開壓縮檔,預設的文件夾名稱是 JSCal2-1.7。文件夾結構如下:

jscalendar files

步驟一:連結必要檔案

jscal2.js 是主要程式檔,而 b5.js 則是語系檔,官網下載的壓縮包中沒有附上正體中文版,我改了一個,可以按這裡下載(UTF-8BIG5 )。基本的 CSS 樣式則為 jscal2.css,有了這三個檔案,基本就也就可以使用了。

如果你想美化一點,可以加入圓角設定,以及套用不同面板,在檔案結構中 CSS 目錄下,除了 img 文件夾是存放圖檔以外,每個資料夾都有一份樣式,加入連結即可,例如:

觸發式設計

常用設定是:

更多使用說明,請參考官網。更多範例,請按此

固定式設計

固定式設計指直接畫面上呈現日曆,而不是經由觸發啟動,設計方式略有不同,如下:

注意指定 cont 用來存放日曆,其餘設定同觸發式。

Javascript Calendar
官網:http://www.dynarch.com/projects/calendar/
下載:http://www.dynarch.com/projects/calendar/download/
正體中文語系檔:UTF-8BIG5
API 說明:http://www.dynarch.com/projects/calendar/doc/
更 多範例:請按此

 

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

foot pain on top of foot   2017/6/7 下午 12:42:00

Since the admin of this site is working, no hesitation very rapidly it will be well-known, due to its feature contents.

manicure   2017/5/4 上午 09:57:00

Hey there just wanted to give you a quick heads up.
The words in your article seem to be running off the screen in Firefox.
I'm not sure if this is a format issue or something to do with internet browser compatibility but I thought I'd post to
let you know. The design and style look great though!
Hope you get the issue resolved soon. Cheers

manicure   2017/4/11 下午 06:33:00

These are truly fantastic ideas in about blogging.
You have touched some nice things here. Any way keep up wrinting.

KEN   2012/11/27 上午 12:41:00

請問版主如果我使用了日期 想多一個'選取式'的 時段
ex: 已經好日期了 然後想選取 7:00-8:00
因為我需要用在表格身上
請問要如何增加

卜維丰   2011/11/8 下午 04:47:00

林, 有喔, 可加 max 和 min

   2011/10/28 上午 11:18:00

版主您好

請問這支月曆程式是否有欄位驗證的功能?譬如昨天的日期不能選,只能選今天及之後的日期,如果有此功能該如何設定,敬請解答 謝謝!!



mslin   2011/10/28 上午 09:25:00

版主您好

請問這支月曆程式是否有欄位驗證的功能?譬如昨天的日期不能選,只能選今天及之後的日期,如果有此功能該如何設定,敬請解答 謝謝!!

popy   2011/7/26 下午 12:26:00

上述網址是txt檔案,請改成html並將js的相對路徑修改即可

我的問題是
1、td及input都是動態新增的,在呼叫時是不是有什麼限制
2、在新增完html的元素後都沒問題,可是在img的click,要呼叫calendar時卻出現了「'q.__.data' 是 null 或不是一個物件」,這會是什麼造成的?
再麻煩大大幫我看一下吧

Rita   2011/7/1 下午 01:57:00

您好 參考範例後 按下送出button想讓原本選好的日期不被清除的話該怎麼做 ? 本來在TEXT VALUE 設定 != NULL 就 POST 其本來輸入的值 ~ 但卻失效了 .....

   2011/5/27 下午 06:02:00

很感謝版主的提供
找了好久一直沒找到合適的及引用的方法,剛好看到這一篇,下載來試試看, 感謝!!!

homaster   2011/3/28 下午 11:58:00

謝謝分享...

homaster   2011/3/28 下午 11:56:00

謝謝分享...



elaine   2011/2/11 上午 11:43:00

找到原因了!
將元件放在<form></form>裡時便會有這樣的狀況
但還是不知道怎麼解決?

elaine   2011/2/8 下午 04:00:00

版大您好,
我按照您的教學文做,
但是在IE8可以執行
在chrome和firefox卻都無法執行(按下button沒有反應),
不知道是什麼原因呢?
感恩!
以下是我的程式碼:
<!--******以下為程式碼********-->

<input name="sDateT" type="text" disabled><input name="sDateBtn" type="button" value="" >
<script type="text/javascript">
new Calendar({
inputField: "sDateT",
dateFormat: "%Y/%m/%d",
trigger: "sDateBtn",
bottomBar: true,
weekNumbers: true,
showTime: 24,
onSelect: function() {this.hide();}
});

Irice   2011/1/17 下午 05:37:00

查了一下,發現是因為1.8抓的時間是國際標準時間,所以會少8小時
解決方法如下,先打開jscal2.js
搜尋'utc'更改這二項
'aG.getUTCHours' ->'aG.getHours'
'aG.getUTCMinutes' ->'aG.getMinutes'

jim2010   2010/12/24 下午 12:02:00

你好,我也遇到與andyto202 、Jaws一樣的問題,就是1.8版的時間顯示與實際時間相差8小時,請問如何調整?謝謝。

vicky   2010/12/16 下午 01:35:00

您好,我也使用了這個日曆....但是發生了一個問題...如果我的日曆有用24小時制時間~它的分鐘是每次加5分鐘,(譬如:59,04,09,14...)...可是,我希望有整點的分鐘(譬如:00,05,10,15...) 但一直找不到修改or設定的地方...不知道您這邊是否知道??><

以下是我的程式:
new Calendar({
inputField: "<%=publicDate.ClientID%>",
dateFormat: "%Y-%m-%d %H:%M",
trigger: "publicDateButton",
bottomBar: true,
weekNumbers: false,
showTime: 24,
onSelect: function () { this.hide(); }
});

謝謝!

jaws   2010/12/9 下午 05:04:00

您好~
請問月曆中的時間如何調到台灣的時區(GMT+8)呢?
感謝您~~

卜維丰   2010/11/23 上午 08:54:00

123, 我估計, 你觸發的 id 重複了
注意看一下上面觸發範例第5,7兩行, 一個指定輸入存放欄位, 一個指定觸發的按鈕或圖片, 都是以 id 區分, 應該是這 id 重複了

123   2010/11/18 下午 01:07:00

放於php中可以,可是在第一欄位中會出現多個日曆
其他欄位的按鈕都會失效
例如1| |(1)
2| |(1)
3| |(1)
點第一個會出現三個日曆

請問有解決的辦法嗎
讓其他按鈕也生效

andyto202   2010/11/1 上午 09:01:00

感謝您
已經成功了
目前官方出到1.8版了
和你的1.7有點差別就是
月曆的下方又多了時間
不過和實際的時間少了八小時
不知道有沒有什麼參數可以加??

卜維丰   2010/10/29 下午 04:24:00

andy, 宣告一個 new Calendar 就是一組日曆, 你要幾個就幾個

andyto202   2010/10/29 上午 11:03:00

請問如果你這個日曆在一個網頁中
要使用多個
要怎麼弄呢
例如我要用一個
起始時間區間(需要兩個日曆)
結速時間區間(需要兩個日曆)
這樣子總共需用四個日曆
照你的方法只能用兩個
>_<

Evey   2010/10/20 下午 02:40:00

版大,謝謝,已成功!

卜維丰   2010/10/20 下午 12:57:00

Evey, 試試 xhtml1-transitional.dtd

Evey   2010/10/20 上午 10:29:00

版大您好!
由於我依照您的作法套用在ASP,日曆顯示沒問題,取值也是可以,但現在遇到一個問題,若是沒有定義<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
日曆的版型會跑掉,若是套用在VB.NET,雖然也有定義上一句,但日曆的版型也會跑掉,我該如何定義,才不會導致這樣的情況?

卜維丰   2010/9/28 下午 04:19:00

jan, 根據你留下的兩句話, 我也很難知道是什麼問題

jan   2010/9/27 下午 09:30:00

請問一下,我照您上面說的輸入後,按下button鈕沒有反應耶,請問一下是那邊出了問題?

Unas   2010/8/12 下午 12:40:00

想請教如果max要直接抓"今日"呢?@@~
是要加上php設定參數才可辦得到嗎?

lun   2010/7/29 下午 05:04:00

阿~有讀取到!是放到資料庫裡面
只出現2010

lun   2010/7/29 下午 05:02:00

不好意思~請問一下
我用選取式的方式產生2010年07月21日,(三)
之後post到下個頁面,卻只有讀到2010
是什麼原因呢?

chunwei   2010/7/21 下午 04:35:00

感謝分享,測試OK,正在使用中!!!

To: 小P

請把
"<script type="text/javascript" src="/JSCal2-1.7/src/js/jscal2.js"></script>"
引入JS的相對路徑"/JSCal2-1.7/src/js/jscal2.js"最前面的"/"去掉,或加上一個"."

小P   2010/6/30 上午 11:44:00

版大你好
我用你上述的方式做
怎麼都會出現"Calendar 未被定義"的錯誤訊息呢?

這要從那裏著手呢?

卜維丰   2010/6/20 下午 06:24:00

小 P, 純 client 的東西, 不分 PHP 或其他

小P   2010/6/19 下午 04:40:00

版大你好
我用你上述的方式做
怎麼都會出現"Calendar 未被定義"的錯誤訊息呢?

這要從那裏著手呢?


小P   2010/6/19 下午 02:04:00

版大請問一下,這支月曆程式可以在PHP底下跑嗎?

lulu   2010/3/13 下午 10:36:00

謝謝分享...

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: