以下為本站文章分類清單

  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/
更 多範例:請按此

 

 

以下為文章回應區

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

How do you prevent Achilles tendonitis?   2017/7/22 下午 05:32:00

Hello are using Wordpress for your site platform? I'm new to the blog world but I'm trying to get started and
create my own. Do you need any html coding knowledge to make your own blog?
Any help would be really appreciated!

How much does it cost to lengthen your legs?   2017/7/21 下午 10:33:00

I used to be able to find good advice from your articles.

foot pain during yoga   2017/7/2 下午 05:51:00

Thanks for finally talking about >【卜の選】JavaScript 日曆 <Liked it!

foot pain relief   2017/6/24 下午 07:17:00

Glad to be one of the visitants on this awing website :D.

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

謝謝分享...

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