■日付入力用カレンダー
レイヤー版
日付入力用カレンダーレイヤーを自動生成します。
[ 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}
