JSCal2：修訂版本之間的差異
出自福留子孫
（→使用範例） |
|||
| （未顯示同用戶所作出之1次版本） | |||
| 第 10 行： | 第 10 行： | ||
新版對時、分的調整，改用「五分鐘一階的跳階」，而不是舊版的拖曳。 | 新版對時、分的調整，改用「五分鐘一階的跳階」，而不是舊版的拖曳。 | ||
===使用範例=== | ===使用範例=== | ||
| + | <pre><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> | ||
| + | <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> | ||
| + | <script src='./JSCal2/js/jscal2.js'></script> | ||
| + | <script src='./JSCal2/js/lang/cn.js'></script> | ||
| + | <link rel='stylesheet' type='text/css' href='./JSCal2/css/jscal2.css' /> | ||
| + | <link rel='stylesheet' type='text/css' href='./JSCal2/css/border-radius.css' /> | ||
| + | <link rel='stylesheet' type='text/css' href='./JSCal2/css/steel/steel.css' /> | ||
| + | <input size='30' id='f_date1' value='2000-02-29 12:50 PM'/><button id='f_btn1'>...</button><br /> | ||
| + | <input size='30' id='f_date2' value='二月 9, 2000 06:50 PM'/><button id='f_btn2'>...</button><br /> | ||
| + | <input size='30' id='f_date3' value='15 二月 2001 06:50 PM'/><button id='f_btn3'>...</button><br /> | ||
| + | <input size='30' id='f_date4' value='四, 15 二月, 2001 06:45 PM'/><button id='f_btn4'>...</button> | ||
| + | |||
| + | <script type='text/javascript'>//<![CDATA[ | ||
| + | var cal=Calendar.setup({ | ||
| + | onSelect:function(cal){cal.hide()}, | ||
| + | showTime:true | ||
| + | }); | ||
| + | cal.manageFields('f_btn1','f_date1','%Y-%m-%d %I:%M %p'); | ||
| + | cal.manageFields('f_btn2','f_date2','%b %e, %Y %I:%M %p'); | ||
| + | cal.manageFields('f_btn3','f_date3','%e %B %Y %I:%M %p'); | ||
| + | cal.manageFields('f_btn4','f_date4','%A, %e %B, %Y %I:%M %p'); | ||
| + | //]]></script></pre> | ||
| + | |||
| + | ===程式=== | ||
| + | *已下載到：jendo.org/test/JSCal2 | ||
| + | *使用示範在：jendo.org/test/JSCal2Demo.html | ||
2017年5月14日 (日) 23:58的最新修訂版本
ET 使用的小日曆(1.0版)原網站在 www.dynarch.com，已停止服務，但留下 JSCal2 1.9 版。
JSCal2
最後的線上文件：www.dynarch.com/jscal/，其前言說明： 「這是新的 Dynarch Calendar（“JSCal2”）的說明檔。請注意，它與我們的舊日曆專案不相容。新日曆具有較少的預設使用方式，而是專注於廣泛的API，您可以使用它來執行所需的操作。這是一個教訓，我了解到無法讓滿足每個人的需求，所以最好提供很多的客製化功能，讓人們能夠自己規畫自己的工具。」
新版並沒有舊版的 displayArea 參數，使得欄值使用 A 格式，而同時可以將欄值轉成 B 格式，讓人看懂。
新版對時、分的調整，改用「五分鐘一階的跳階」，而不是舊版的拖曳。
使用範例
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<script src='./JSCal2/js/jscal2.js'></script>
<script src='./JSCal2/js/lang/cn.js'></script>
<link rel='stylesheet' type='text/css' href='./JSCal2/css/jscal2.css' />
<link rel='stylesheet' type='text/css' href='./JSCal2/css/border-radius.css' />
<link rel='stylesheet' type='text/css' href='./JSCal2/css/steel/steel.css' />
<input size='30' id='f_date1' value='2000-02-29 12:50 PM'/><button id='f_btn1'>...</button><br />
<input size='30' id='f_date2' value='二月 9, 2000 06:50 PM'/><button id='f_btn2'>...</button><br />
<input size='30' id='f_date3' value='15 二月 2001 06:50 PM'/><button id='f_btn3'>...</button><br />
<input size='30' id='f_date4' value='四, 15 二月, 2001 06:45 PM'/><button id='f_btn4'>...</button>
<script type='text/javascript'>//<![CDATA[
var cal=Calendar.setup({
onSelect:function(cal){cal.hide()},
showTime:true
});
cal.manageFields('f_btn1','f_date1','%Y-%m-%d %I:%M %p');
cal.manageFields('f_btn2','f_date2','%b %e, %Y %I:%M %p');
cal.manageFields('f_btn3','f_date3','%e %B %Y %I:%M %p');
cal.manageFields('f_btn4','f_date4','%A, %e %B, %Y %I:%M %p');
//]]></script>
程式
- 已下載到：jendo.org/test/JSCal2
- 使用示範在：jendo.org/test/JSCal2Demo.html
