Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
まぁ、移植といってもほぼ全部書き直しです(笑)。
旧版の機能は、まだ、全部入れてませんが、それ以上に追加機能が増えそうです。
最初、エンジンはjQueryに依存せずYUIなどでも切り替えて使えるようにカレンダーコアだけ書くつもりだったのですが、書いているうちに、勉強も兼ねつつあちこちにjQueryを使いたくなって結局、とりあえずjQuery専用ですf^^;。
でも、動作は旧版の方がjQuery版よりもきびきび動きますね。( jQueryは、汎用ですから無駄もありますし、 あるいは、jQuery のあの魔法＾＾；のせいかなぁ )＜作り方のせいかも(^^;
旧版日付入力用カレンダー
http://game.gr.jp/js-ml/samples/199912/calendar/cal1.htm
うーん、旧版のスコープとか名前を整理するだけにして、まるまんま、放り込んだほうが良いかもf^^;、、、。汎用ライブラリの魅力は簡単に書けることですが、速度は眼をつぶるようかなぁ。。。
あ、でも、追加機能はやっぱりjQueryでないと増やす気にならないので、やっぱりjQueryですね。
2007-11-16-1 日付フォーマットの指定用属性を datetmp="YYYY/MM/DD"にしてみる
Calendar Plugin for jQuery 1.2.1 (2007-11-16-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071116-1.htm
日付タイプdatetypeというより日付テンプレートな機能なので、属性名をdatetmpにしてみました。まぁ、細かいことですけどf^^;
<input class="jquery-calendear" type="text" datetmp="YYYY/MM/DD" />
<input class="jquery-calendear" type="text" />
<input class="jquery-calendear" type="text" datetmp="YYYY年M月のD日はW曜日" style="width:180px" />
<input class="jquery-calendear" type="text" datetmp="YYYY-MM-DD【W】" />
追記 とりあえず (3) でnightly
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
2007-11-14-1-1 日付フォーマットの指定方法 コードの書き方候補(3) attributeで datetype="YYYY/MM/DD"
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071114-1-1.htm
話の流れ的に、<input class="jquery-calendear" type="text" datetype="YYYY/MM/DD">も試してみました。
これが、簡単ぽい(笑)。一応、どれも、Sfari3,2、IE6,7、Firefox2、Oprea8,9で動作します。
最初のHTMLコメントを利用する(1)は、仕様を気にする必要が少なそうですが、圧縮をかけたときに、あっさり削除される危険があります(^^;ので、 (2)か、この(3)のどちらかかなぁ。こういう時HTML実装は自由で良いなぁ(笑)。しかも、これは多くのブラウザ（たぶん）で使えます。つまり、多くの利用者を排除せず、便宜を提供します。うんうん。＜JavaScriptな時点で、、、＜手入力を排除してないということで。
<input class="jquery-calendear" type="text" datetype="YYYY/MM/DD">
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text" datetype="YY年MM月DD日">
<input class="jquery-calendear" type="text" datetype="YYYY-MM-DD(W)">
取得方法はこれです。
$(INPUT要素).attr("datetype");
追記 2007-11-14-1-0 日付フォーマットの指定方法 コードの書き方候補(2) <hoge value="日付フォーマット">
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1-0)
http://jsgt.org/lib/jquery/plugin/calendar/20071114-1-0.htm
ふと、<hoge value="YYYY/MM/DD" />も試してみたら使えてしまいました。
どっちにしたらよいかなぁ、、、。
こうです。
<input class="jquery-calendear" type="text"><jquery value="YYYY/MM/DD" />
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text"><jquery value="YY年MM月DD日" />
<input class="jquery-calendear" type="text"><jquery value="YYYY-MM-DD(W)" />
取得方法です。
$(INPUT要素).nextSibling.getAttribute("value")
追記 2007-11-14-1 日付フォーマットの指定方法 コードの書き方候補(1)
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071114-1.htm
先日の
2007-11-12-1 日付フォーマットの指定方法
に引き続き、実際のコードの書き方を考えてみました。旧版はINPUT要素のインラインにonclickイベントを書いてそこに書いた関数の引数で渡しましたが、今度は（できればJSとHTMLを切り離したいので）インラインのonclickイベントをなるべく使いたくありません。
でも、INPUT要素にこれといった使えそうな属性もなさそうです。たとえば、titleは目的が違いますし、
value値に書くのも...ですし(^^; 、別途、hidden要素を作るのも冗長な気がしますし、
それより送信時などに副作用が出るのはまずいです。
で、どう書くか？
こうです。
<input class="jquery-calendear" type="text"><!--YYYY/MM/DD-->
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text"><!--YY年MM月DD日-->
<input class="jquery-calendear" type="text"><!--YYYY-MM-DD(W)-->
ポイントは、INPUT要素の直後にスペースも改行も入れずに、たとえば、<!--YYYY/MM/DD-->と書きます。クオート「"」や「'」も使いません。
あと、これはHTMLコメント部ですので、&と<と>は、実体参照& (&)、 < (<)、> (>) で書く必要があるのが少し面倒ですが、、、まぁ、いっか。日付ですし。
コメントが続かなければ、デフォルトのYYYY-MM-DDでフォーマットされます。
ちなみにこのコメントデータをどうやって取得しているかというと、jQueryの.next()メソッドは使えなかったので、普通にDOMのnextSiblingを使いました。一応、nodeTypeを調べてチェックしていますが、もう少し厳密に取得すべきか、少しだけ迷っています。
$(INPUT要素).nextSibling.nodeValue
追記 2007-11-13-1 オブジェクトの階層を整理
var ex= jQuery.extend({calendar:{date:{...でコピーした分がすべてjQueryオブジェクト直下に露出して行儀が悪いのでとりあえず
jQuery.extend($.fn.calendar,{date:{...でfn.calendar 配下へ放り込んでおきました。$.fn内に露出していた分iniとdrawも整理。
Calendar Plugin for jQuery 1.2.1 (2007-11-13-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071113-1.htm
こうなりました。
簡単にいうと、
jQuery.extend({test:1}) //$.test or jQuery.test
と書くと、プロパティ test は、jQueryオブジェクトまたは$ショートカット直下にコピーされて
$.test または jQuery.test となります。ただ、これでは、$直下が散らかるので、
jQuery.extend($.fn.calendar,{test:1}) //$.calendar.fｎ.test or jQuery.fn.calendar.test
という風に$.fn.calendarへコピーすることでcalendarの下にすべてのメンバをまとめてみたということです。とはいえ、calendarという名前は一般的すぎないか？という点は、時間があれば、、、。
追記 2007-11-12-e 時点でのオブジェクト構造
ああ、var ex= jQuery.extend({calendar:{date:{...でコピーした分がやはり、行儀が悪いかなぁ、、、。すべて fnへ閉じ込めるべき？
あと、jQuery自体がグローバルへ露出しているのは、$とjQueryだけなんですけれど、$.fnへいろいろなプラグインを流し込めば、それが衝突することはあると思うので、将来のために少し気を遣う必要もある？ない？
追記 2007-11-12-3 インラインモードとドラッグモード
カレンダー出力用のBOX DIVである
<div id='jquery-calendar-box'></div>は、デフォルトでは自動出力されてドラッグモードになります。
でもこれを、
もし、あえて、HTML内の好きな場所に置くと、自動的にインラインモードとなり、ドラッグできなくなります。
また、クリック後にもカレンダーは消えません。
定位置にカレンダーを配置しておきたいケース用です。
入力したいターゲットINPUT要素へ一度カーソルを入れてからカレンダーをクリックすると、その要素へ日付が出力されます。
nightlyも更新しました。
Calendar Plugin for jQuery 1.2.1 (2007-11-12-2-e)
http://jsgt.org/lib/jquery/plugin/calendar/20071112-e.htm
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text">
<div id='jquery-calendar-box'></div>
追記 2007.10.12 19:54
- # 2007-11-12-2 今日class="today" と今月 class="curr-m" を追加
- # 2007-11-12-1 日付フォーマットの指定方法
Calendar Plugin for jQuery 1.2.1 (2007-11-12-2)
http://jsgt.org/lib/jquery/plugin/calendar/20071112-2.htm
追記 2007.10.12 00:38 nightlyをアップデートしました
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
同じもの
http://jsgt.org/lib/jquery/plugin/calendar/20071111-1.htm
まだ、起動メソッドの書式などを決めていませんがf^^;、とりあえず、デフォルト設定で良ければ、クラス指定 <input class="jquery-calendear" type="text"> だけで、jsに触らずに使えるようにしてみました。
<style> .testclass2 { color:red } </style>
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text">
<input class="jquery-calendear testclass2" type="text">
追記 2007.10.11 01:19 nightlyをアップデートしました
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
同じもの
http://jsgt.org/lib/jquery/plugin/calendar/20071110-4.htm
一応、構築部のテキスト処理化率を上げて高速化と、IE用focusバグ対応と、CSSはjQueryではなく素直に（誰もが使える）CSSで指定するようにして少し軽く&デザイナーと分業などを考慮しました。
追記 2007.10.10 19:11
また、少し問題発生f^^;。月送りのボタンをカレンダー内へ入れたら、Win IEで見たときに、どうにもクリックがもどかしいので、原因を切り出すために、ちょっと怪しい気がするドラッグとボタンだけの単純なサンプルを作ってみました。
http://jsgt.org/lib/jquery/plugin/calendar/20071110-3jqbug.htm
やはり、連続クリックができません。
ドラッグ対象のElement内のボタンは、Win IEでは、続けてクリックができなくなっているわけです。
うーん、なんか、あれっぽいなぁ、ということで、、、
↓ 修正
http://jsgt.org/lib/jquery/plugin/calendar/20071110-3jqbug2.htm
めでたく、解決しました。でも、まだ、納得はいきません。。。。うーむ。jQueryといえども完全を期待するのは無理。でも、許す。(＜って、許す権限ないだろ)
追記 2007.11.10
あまりに重たいので、カレンダーテーブルの構築部分からjQueryを順番にはずしてみました。その結果最終的に、テーブルはすべて<tableや<tr><td>といった要素の文字列だけで作成し、構築部では最後にちょっとだけjQueryを使う、というところまで削って、許せるスピードを回復しました(^^;。それでも、構築部以外でjQueryを使うメリットはあります(^^。
http://jsgt.org/lib/jquery/plugin/calendar/20071110-2.htm
↓ チューニング後
http://jsgt.org/lib/jquery/plugin/calendar/20071110-2tun.htm
効率の良いCSSの適用方法を考えないと、、、。
古籏一浩 ( 2007年11月10日 23:42 )
とりあえずカレンダープラグインがあるので中身を見てみるといいかも。
http://jquery.com/plugins/project/calendar-jquery
高橋 ( 2007年11月11日 01:16 )
あ、この人、たぶん、英語外の人ですね。私と同じで、navigator.language.substr(0,2)とnavigator.userLanguage;を最初に検査してます(^^;
でも、同じカレンダーでも作る人によって立ち位置も力点も違って面白いです。
名前の件でみると、Elementをあえて(?)グローバルに置いているのが少し気になります。これだとせっかくjQueryでprototypeとのコンフリクトを回避してもこれが衝突してしまうような。なんとなく、もったいない。
ところで、この言語分岐が、
lng['en'] = {
month : ['January', 'February', 'March', 'April', 'May', 'June', 'July'
, 'August', 'September', 'October', 'November', 'December'],
day : ['S','M','T','W','T','F','S'],
first: 0 // Sunday
};
lng['es'] = {
month : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto'
,'Septiembre','Octubre','Noviembre','Diciembre'],
day : ['L','M','M','J','V','S','D'],
first: 1 // First day of week => Monday
};
こうなってますけど、これバリエーションを列挙するとかなりになるんですよね。プラグインのデータ集みたいな発展もありうるかも(笑;
久しぶりにコードにどっぷり浸ってるので少し幸せな今日この頃です(^^
(←clickで入力欄open)
■日付入力用カレンダー
レイヤー版
日付入力用カレンダーレイヤーを自動生成します。
[ 20050330 update ]
カレンダー表示位置を指定できるようになりました。
body onloadであらかじめ表示させておくこともできます。
[ サポートページ ] http://game.gr.jp/js-ml/samples/199912/calendar/cal2.htm
使用可能なブラウザ
Win n4 n6 n7 moz e4 e5 e6 o6,
Mac n4 n6 n7 moz e4.5 e5 ,
Linux n4 n6 n7 moz
--------------------------------------------------
サブウインドウ版
日付入力用カレンダーを自動生成します。たとえば、日付入力欄へカーソルを入れるとカレンダーウインドウが開きカレンダーウインドウの日付をクリックすると自動的に入力欄へ日付が入ります。
使用可能なブラウザ
Win n4 n6 n7 moz e4 e5 e6,
Mac n4 n6 n7 moz e4.5 e5,
Linux n4 n6 n7 moz
[ サポートページ ] http://game.gr.jp/js-ml/samples/199912/calendar/calendar.htm
[ 更新] 2002.11.15 バグフィクス
[ 関連リンク ] 日付入力用カレンダー生成
http://allabout.co.jp/computer/javascript/closeup/CU20020529/index.htm
toru ( 2005年12月25日 12:33 )
日付入力用カレンダーを使用させていただいております。
大変便利で、とても使いやすく、現在開発中のＡＳＰプログラムで使用させていただいています。
ここで質問ですが、
ドロップダウンコントロールがある画面では、
カレンダーがそのドロップダウンの後ろにまわってしまい、表示が重なって見づらくなってしまいます。
これは簡単に対処できるのでしょうか？
教えていただけますか？
松井 ( 2006年01月17日 13:53 )
今の業務システムに日付入力カレンダーが使われています。ありがとうございます。
質問なんですがコンボボックスと重なるとカレンダーが下に行ってしまいます。何とかコンボボックスより上に表示できないでしょうか？
疲レイヤー ( 2006年03月03日 17:38 )
Webサイトを更新中ですが、日付入力用カレンダーレイヤーを実装してテストさせていただきました。
そこで質問ですが、
既存のレイヤーの前面にカレンダーレイヤーを表示させるために、
jsコード中
//--レイヤー生成で次のとおり書き込みました。
style="position:absolute;left:400px;top:300px;z-index:2;">￥n'
//--レイヤー移動でx,y座標に上記の値をそれぞれ書き込みました。
なお、wrtCalendarLayで位置指定すると画面の左上にカレンダーレイヤーの右下部分しか表示されません。
そこで、やむを得ずnullにしてコードに直接値を書き込みました。
すると、カレンダーを表示するには、常に更新しなければならなくなりました。
また、月送りボタンをクリックしてもカレンダーが消えてしまいます。
ちなみにWeb環境はWinXP・IE6.0です。
解決方法をご教示いただけましたら幸いです。
ff ( 2007年01月24日 10:33 )
ffdddddddddddddddddddd
hiro ( 2007年11月05日 11:53 )
業務管理Webシステムでカレンダーを利用させていただこうと考えておりますがどうしてもできない事が起きてしまったので対応を教えていただけないかと思いコメントさせていただきました。
実はすでにphpとの連携のため、inputに設定するnameが配列となっています。
http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=8826&range=1
こちらの質問事項とほぼ同様であったので、最新バージョンと思われる「calendarlay3.js」を使わせていただきました。
html側設定
this.form.r['pro_end']部分の設定の仕方がいけないのだと思うのですが、連想配列のような形で['文字']となります。
例４にあるthis.form.element['e0'] の形にはどうしたらなるのかよくわかりません。
すみませんが、ご教授願えないでしょうか？
hiro ( 2007年11月05日 11:59 )
たびたびすみません。
html表記の部分が消えてしまいましたので再度その部分だけ書き足させていただきます。
====以下
＜input name="r[pro_end]" type="text" value="" /＞
＜input name="Calendar" type="button" value=" " style="background-image: url(img/calendar.gif); background-color:#ffffff; width:20px; height:20px; border:0; cursor:pointer;"
onClick="wrtCalendarLay(this.form.r['pro_end'],event,'yyyymmdd')"＞
なんども投稿してしまいすみません。
高橋 ( 2007年11月05日 20:08 )
これ試せますか？
http://game.gr.jp/js-ml/samples/199912/calendar/cal4.htm
inputのnameではなく、index番号を使って指定できるようにしてみました。
たとえば、
wrtCalendarLay(this.form[3],event,'mm/dd(曜)')
とか。
hiro ( 2007年11月06日 03:04 )
返答ありがとうございます。
早速、calendarlay4.jsを落として呼び出しの部分を変えてみたのですが、設定の仕方が悪いせいでエラーがとれません。。
失礼を承知で聞かせてください。
index番号というのは配列番号の事でよいのでしょうか？
例えば
＜form name="form" action="test.php" method="post"＞
氏名
＜input type="text" name="r[name]" value=" " ＞
終了日
＜input type="text" name="r[update_day]" value=" " ＞
＜input type="button" value="入力用カレンダー" onclick="wrtCalendarLay(this.form[1],event,'yyyymmdd')"＞
＜/form＞
とあった場合、終了日の値にデータが入ってほしいのでindex番号はformの配列と考えると
1となると思うのですが、この書き方であっていますか？
これを実行すると「オブジェクトを指定してください」とのエラーになります。
初歩的な質問をしてしまっているかもしれませんが、ご教授いただけると幸いです。
高橋 ( 2007年11月06日 13:24 )
indexはそのとおりです。
同じものを試しました。動いています。
http://game.gr.jp/js-ml/samples/199912/calendar/cal4-1.htm
気になるのはform name="form"という名前ですが、動くかもしれませんが、JavaScriptには、this.formというオブジェクトもありますので、なんとなく、、、。
あと、BODYタグはありますか？
hiro ( 2007年11月06日 18:32 )
何度も本当にありがとうございます。
確かに、サンプルに記載していただいた方は動いていますね・・・（TT)
htmlの記載の部分をコピーしてみてたのですがやっぱり動作しません。
bodyタグはあります。検証のため単純なhtmlに記載してためしています・・
＝＝＝記載しているhtml＝＝＝＝
＜!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞
＜html＞
＜head＞
＜title＞calendarLay＜/title＞
＜/head＞
＜body＞
＜script type="text/javascript" src="js/calendarlay4.js"＞＜/script＞
＜form name="calf1"＞
name="r[update_day]" テスト
終了日
＜input type="text" name="r[update_day]" value="" ＞＜br＞
＜input type="button" value="入力用カレンダー" onclick="wrtCalendarLay(this.form[0],event,'yyyymmdd')"＞
＜/form＞
＜/body＞
＜/html＞
=================
jsフォルダの下にcalendarlay4.jsを置いて参照していますが、このファイルはダウンロードしたままでもちろん何もいじっていません。
なんででしょう？？
いろいろ消したり名前を変えてみたりしていってるのですが・・
本当に、自分が情けなくなります・・・
hiro ( 2007年11月06日 19:14 )
エラーの原因がわかりました！
漢字コード＆改行コードの違いでした！
unix系サーバのため、漢字コードEUC、改行コードLFでhtmlを作成しています。
漢字コードEUCのままだと、カレンダーを呼べず、オブジェクトエラー、
改行コードがLF、もしくはCRだけだとカレンダーは呼べて値を入れることができたとしても何かしらのエラーが出てしまっていたようです。
htmlをSJISに変換してから試したところ動作しました。
本当に、ありがとうございました。
ちなみに、漢字コードEUCの場合でも動作するとかの改変までは・・・やっぱり無理ですよね？
高橋 ( 2007年11月06日 20:36 )
ああ、それでしたら、calendarlay4.jsをEUCに変換してから使われたらよいと思います。サーバーがEUCならその方があとあと良いでしょうし。
あるいは、<script type="text/javascript" src="./calendarlay4.js" charset="Shift_JIS"></script>
のように.jsファイルの文字コードを明示的に指定すると解決するはずです。
hiro ( 2007年11月06日 23:35 )
ありがとうございました！
EUCの場合も変換をしたら無事に動作するようになりました。
今後どんどん利用させていただきたいと思います。
Javascriptはなんとなくでしか勉強をしていなかったのでこれを機いろんなことができるようになりたいですね。。
あ、もうAjaxの方を理解しないといけなくなっちゃいますね・・・ ＾＾；；
またサイト訪問で勉強させていただきます。
本当にありがとうございました。
高橋 ( 2008年02月25日 18:57 )
WinIEで日付入力するとGIFアニメが止まる件。IEのバグかな？という気もしますが、
230行目あたりの下記を
wrtdateA = '<A HREF="javascript:function v(){'
このように変更すると止まらなくなります。
wrtdateA = '<A HREF="#" onclick="function v(){'
(←clickで入力欄open)
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
ページ全体の読み込み完了まで少々お待ちください...
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
