ここでは、ASP.NET の Calender コントロールを使用したポップアップカレンダーのサンプルコードを掲載しています。
スポンサーリンク
親フォーム
親フォームはテキストボックスコントロールとボタンコントロールが配置されているものとします。ボタンクリックで子フォーム ( Calender コントロールのみ ) を開き、子フォームで選択された日付を親フォームのテキストボックスに設定します。以下が親フォームのサンプルコードになります。
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'HTML要素のIDを取得
Dim id As String = TextBox1.ClientID
Dim opt As String = "height=350,width=350,dependent=yes,location=no,menubar=no," + _
"scrolbars=no,toolbar=no,status=no"
'ポップアップカレンダーを開くスクリプトを作成
Dim script As String = "var url = 'Calendar.aspx?id={0}&date=' + getElementById('{0}').value;" + _
"window.open(url,'_blank', '{1}'); return false;"
script = String.Format(script, id, opt)
' onclick 属性にスクリプトを設定する
Button1.Attributes.Add("onclick", script)
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
//HTML要素のIDを取得
string id = TextBox1.ClientID;
string opt = "height=350,width=350,dependent=yes,location=no,menubar=no," +
"scrolbars=no,toolbar=no,status=no";
//ポップアップカレンダーを開くスクリプトを作成
string script = "var url = 'Calendar.aspx?id={0}&date=' + getElementById('{0}').value;" +
"window.open(url,'_blank', '{1}'); return false;";
script = String.Format(script, id, opt);
// onclick 属性にスクリプトを設定する
Button1.Attributes.Add("onclick", script);
}
子フォーム ( Calender コントロールのみ )
子フォームは Calender コントロールのみを持ちます。window.opener で親フォームのテキストボックスコントロールに値を設定しています。詳細はコメントを参照ください。
VB.NET
'ページロード
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack = True Then
Return
End If
' GETパラメータの日付を初期表示する
Dim dateParam As DateTime
DateTime.TryParse(Request.QueryString("date"), dateParam)
Calendar1.VisibleDate = dateParam
Calendar1.SelectedDate = dateParam
End Sub
' 日付が選択された
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
ByVal e As EventArgs) _
Handles Calendar1.SelectionChanged
'選択された日付を保持
Dim sDate As String = Calendar1.SelectedDate.ToString("d")
'変更する子フォームの要素（ID)を取得
Dim id As String = Request.QueryString("id")
'親フォームの要素を変更するスクリプトを作成
Dim script As String
script = "if(!window.opener || window.opener.closed) {" + _
" window.close();" + _
"} else { " + _
" window.opener.document.getElementById('" + id + "').value = '" + sDate + "';" + _
" window.close();" + _
"}"
ClientScript.RegisterClientScriptBlock(Me.GetType(), "calendar", script, True)
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == true) {
return;
}
// GETパラメータの日付を初期表示する
DateTime dateParam;
DateTime.TryParse(Request.QueryString["date"], out dateParam);
Calendar1.VisibleDate = dateParam;
Calendar1.SelectedDate = dateParam;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
//選択された日付を保持
string sDate = Calendar1.SelectedDate.ToString("d");
// 変更する子フォームの要素（ID)を取得
string id = Request.QueryString["id"];
// 親フォームの要素を変更するスクリプトを作成
string script;
script = "if(!window.opener || window.opener.closed) {" +
" window.close();" +
"} else { " +
" window.opener.document.getElementById('" + id + "').value = '" + sDate + "';" +
" window.close();" +
"}";
ClientScript.RegisterClientScriptBlock(this.GetType(), "calendar", script, true);
}
ポイント
- ClientScript.RegisterClientScriptBlock
ClientScript.RegisterClientScriptBlock メソッドによる Javascript の実行については『 [ ASP.NET ] ボタンクリック時に動的に埋め込んだ Javascript を実行する 』でまとめてありますのでご確認ください。
- TextBox.ClientID
サンプルでは、GET メソッドで親フォームから子フォームへテキストボックスの ID を渡しています。渡すのは、TextBox.ID プロパティではなく TextBox.ClientID です。Javascript により子フォームから親フォームの要素を変更するため必要なものは、ASP.NET 側で管理している ID ではなく、出力された HTML の ID 属性です。ASP.NET では HTML に出力された要素の ID 属性は ClientID プロパティによって取得できます。
ASP.NET4 からは、『 Control.ClientID プロパティ 』の記載があるように、サーバ側とクライアント側で管理する ID を同一にする設定などが、ClientIDMode プロパティを使用してできるようになっています。ただし、モードの設定に依存するので、不安要素がある場合（設計変更など）には、適切に使い分けておいたほうが良いかもしれません。