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

解決済

質問者：kobupon
質問日時：2008/06/06 15:50
回答数：3件

ASP.NET C# VisualStudio2005

Webページ上でテキストボックスをクリックしたらカレンダーを表示させ
カレンダーの日付をクリックでそのテキストボックスに日付を挿入させたいのですが
テキストボックスのクリックでカレンダーを表示させる部分のやり方がわかりません。

テキストボックスのプロパティでAutoPostBackをtrueにしてみましたが
テキストボックスのクリックだけではページを再読み込みするような状態になりませんでした。

WebCalendar for .NETのC1WebCalendarコントロールやASP.NET AJAX Control Toolkitのような
後から追加するコントロール類は使ないのですが、なにかよい方法はないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Rel
回答日時：2008/06/09 21:43

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-transitio …

<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良く知りませんが　^^;）

がんばってくださいませ

- 0
- 件

通報する

この回答へのお礼

おお、ありがとうございます！

テーブルの中に入れるとちょっと変な動きになりましたが工夫すればなんとかなりそうな気がします。

少ない情報から意図を汲み取って回答して頂き感謝しています。
どうもありがとうございました。

通報する

お礼日時：2008/06/10 14:02

No.2

回答者： Rel
回答日時：2008/06/09 15:56

はじめまして

ASP.NET C# でしたら、TextBoxなどのイベントは
サーバー側（IIS）で処理されます。

TextBoxには、Clickイベントが無いので
JavaScriptを埋め込んで、クライアント（IEなど）で
Click時の処理（カレンダ表示など）をしてしまおう
というのが、「redfox63」さんの回答だと思われます。

個人的な意見では、
　「JavaScriptが判らない」
　「AjaxToolKitが組み込めない」
と言う事であれば、仕様を見直してはいかがでしょう？

例えば...テキストボックスの右横に、ボタンをつけて、カレンダーを開くとか？
（イメージボタンにして、カレンダアイコンを付ければ、それらしく見えると...）

TextBoxクリックにこだわるなら、JavaScriptなどを組み込み必要があるでしょう

この回答への補足

アドバイスありがとうございます。

> 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
このサイトのカレンダーの組み込み方がわかれば簡単に出来るとは思うんですけど、
使い方を読んでもまだ理解出来ないんです。

補足日時：2008/06/09 17:31

通報する

- 0
- 件

通報する

No.1

回答者： redfox63
回答日時：2008/06/07 01:26

クライアントスクリプトを仕込まないと無理なようです

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()を変更する必要があるでしょう

この回答への補足

回答ありがとうございます。
コードまで書いて頂いてとても有り難いのですが、これって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/575 …
に紹介されているような便利なものは利用出来ないのです。

あと、コード中に「script type='text/javascript」というのが出て来ていますね。
javascriptもVB同様さっぱりわからないのです。
スタイルシートみたいな使い方なんでしょうか？
実のところC#もほとんどわからないのですが、なんとかC言語っぽく書いても「デバッグ開始」ボタンで実行出来るのでC#を使っています。

javascriptでカレンダーの表示・非表示に関しては
http://www.kawa.net/works/js/jkl/calender.html
上記サイトを見つけたのですが、使い方というか組込み方というか、
わからないので使えないのです。