ベストアンサー

テキストボックスのクリックでカレンダー表示

2008/06/06 15:50

ASP.NET C# VisualStudio2005 Webページ上でテキストボックスをクリックしたらカレンダーを表示させカレンダーの日付をクリックでそのテキストボックスに日付を挿入させたいのですがテキストボックスのクリックでカレンダーを表示させる部分のやり方がわかりません。テキストボックスのプロパティでAutoPostBackをtrueにしてみましたがテキストボックスのクリックだけではページを再読み込みするような状態になりませんでした。 WebCalendar for .NETのC1WebCalendarコントロールやASP.NET AJAX Control Toolkitのような後から追加するコントロール類は使ないのですが、なにかよい方法はないでしょうか？

kobupon
お礼率40% (2/5)

Microsoft ASP
回答数3
ありがとう数6

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Rel
ベストアンサー率70% (7/10)

2008/06/09 21:43 回答No.3

ANo.2です紹介のあった、HPを見てみました　↓ http://www.kawa.net/works/js/jkl/calender.html 遊んでみましたが、簡単に実装できましたよ！こんな感じでしょうか？↓ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無題のページ</title>  <script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script> <script type="text/javascript" src="jkl-opacity.js" charset="Shift_JIS"></script> </head> <body>  <script type="text/javascript"> var cal1 = new JKL.Calendar("calid","form1","colname"); </script> <form id="form1" runat="server"> <div>   <input id="Text1" name = "colname" onclick="cal1.write();" onchange="cal1.getFormValue(); cal1.hide();" style="z-index: 101; left: 11px; position: absolute; top: 10px" type="text" /> <br />  <div id = "calid"></div> </div> </form> </body> </html> VS2005のデザインからは「HTML」タブのInput（Text)を組み込めば JavaScriptが使えるようです。（私もJavaScript良く知りませんが　^^;）がんばってくださいませ

質問者

お礼 2008/06/10 14:02

おお、ありがとうございます！テーブルの中に入れるとちょっと変な動きになりましたが工夫すればなんとかなりそうな気がします。少ない情報から意図を汲み取って回答して頂き感謝しています。どうもありがとうございました。

その他の回答 (2)

Rel
ベストアンサー率70% (7/10)

2008/06/09 15:56 回答No.2

はじめまして ASP.NET C# でしたら、TextBoxなどのイベントはサーバー側（IIS）で処理されます。 TextBoxには、Clickイベントが無いので JavaScriptを埋め込んで、クライアント（IEなど）で Click時の処理（カレンダ表示など）をしてしまおうというのが、「redfox63」さんの回答だと思われます。個人的な意見では、　「JavaScriptが判らない」　「AjaxToolKitが組み込めない」と言う事であれば、仕様を見直してはいかがでしょう？例えば...テキストボックスの右横に、ボタンをつけて、カレンダーを開くとか？（イメージボタンにして、カレンダアイコンを付ければ、それらしく見えると...） TextBoxクリックにこだわるなら、JavaScriptなどを組み込み必要があるでしょう

質問者

補足 2008/06/09 17:31

アドバイスありがとうございます。 > TextBoxには、Clickイベントが無いので > JavaScriptを埋め込んで、クライアント（IEなど）で > Click時の処理（カレンダ表示など）をしてしまおう > というのが、「redfox63」さんの回答だと思われます。なるほど、砕いた説明ありがとうございます。しっかり理解できました。 > 例えば...テキストボックスの右横に、ボタンをつけて、カレンダーを開くとか？その方法だととっても簡単なんですけどね。 JavaScriptを勉強しながらでも（時間はないんですが）TextBoxクリックにこだわってやらないといけないんです。 http://www.tohoho-web.com/js/index.htm 上記サイトの基本編を見たら記述がＣ言語っぽいのでJavaScriptも簡単なものならなんとかなるかもと思い、チャレンジしています。 http://www.kawa.net/works/js/jkl/calender.html このサイトのカレンダーの組み込み方がわかれば簡単に出来るとは思うんですけど、使い方を読んでもまだ理解出来ないんです。

redfox63
ベストアンサー率71% (1325/1856)

2008/06/07 01:26 回答No.1

クライアントスクリプトを仕込まないと無理なようです System.Web.UI.WebControls.TextBoxには Clickイベントがありませんので … TextBoxのAutoPostBackはテキストが変更されて他のコントロールにフォーカスが移動した場合にPostBackが発生しますカレンダーはSystem.Web.UI.WebControls.Calenderクラスならいいのでしょうか？テキストボックスとカレンダーを配置しますカレンダーのVisbleプロパティをFalseに設定します Page_Loadイベントで dim ss as String Dim cs As ClientScriptManager = Page.ClientScript ss = "<script type='text/javascript'>" & _ "function myClick() {" & _ " document.forms[0].submit();" & _ "}" & _ "</script>" if Not cs.IsClientScriptBlockRegistered("myClickScript") Then cs.RegisterClientScriptBlock(Me.GetType(), "myClickScript", ss) End If ss = "<script type='text/javascript'>" & _ " document.getElementById('TextBox1').onclick = myClick();" & _ "</script>" If Not cs.IsStartupScriptRegistered("myScript") Then 　　cs.RegisterStartupScript(Me.GetType(), "myScript", ss) End If ' テキストボックスがクリックされた場合の処理 If IsPostBack And Calendar1.Visible = False Then 　　Calendar1.Visible = True End If と記述しますカレンダーの選択日付が変更された場合のイベントSelectionChangedで TextBox1.Text = Calender1.SelectedDate.ToShortDateString Calender1.Visible = False と記述しますこれでテキストボックスをクリックしたらカレンダーが表示カレンダーで選択日付が変更されたらカレンダーを非表示に出来ます同じ日がクリックされた場合の対処や、他にポストバックするコントロールがある場合はスクリプトのmyClick()を変更する必要があるでしょう

質問者

補足 2008/06/08 13:18

回答ありがとうございます。コードまで書いて頂いてとても有り難いのですが、これってVBなんでしょうか？ > クライアントスクリプトを仕込まないと無理なようです > System.Web.UI.WebControls.TextBoxには Clickイベントがありませんので … 「System.Web.UI.WebControls.TextBox」とはテキストボックスの正式名でしょうか？ツールボックスの標準の中にあるTextBoxを使っています。そのTextBoxのプロパティウィンドウでイベントを選びましたがおっしゃる通りClickイベントはありませんでした。 > カレンダーはSystem.Web.UI.WebControls.Calenderクラスならいいのでしょうか？すいません。「System.Web.UI.WebControls.Calenderクラス」とはツールボックスの中の標準の中にあるCalenderコントロールの事でいいのでしょうか？カレンダーも後から追加して使うものでなければいいのです。ここ http://codezine.jp/a/article/aid/2037.aspx や、ここ http://www.atmarkit.co.jp/fdotnet/dotnettips/575aspajaxcalendar/aspajaxcalendar.html に紹介されているような便利なものは利用出来ないのです。あと、コード中に「script type='text/javascript」というのが出て来ていますね。 javascriptもVB同様さっぱりわからないのです。スタイルシートみたいな使い方なんでしょうか？実のところC#もほとんどわからないのですが、なんとかC言語っぽく書いても「デバッグ開始」ボタンで実行出来るのでC#を使っています。 javascriptでカレンダーの表示・非表示に関しては http://www.kawa.net/works/js/jkl/calender.html 上記サイトを見つけたのですが、使い方というか組込み方というか、わからないので使えないのです。

テキストボックスのクリックでカレンダー表示