ASP.NETにおけるカレンダー入力に関して
(1) カレンダーコントロール（Calendar）を利用（★今回★） →操作性、実装の難度は、(2)、(3)に落ちるが、カレンダーを独自でカスタマイズできる（休日設定など）http://blogs.yahoo.co.jp/dk521123/26916160.html
(2) ASP.NET AJAX Control ToolkitのCalendarExtenderを利用 →実装も簡単で操作性もいいが、バグあり。（詳細は、以下CalendarExtenderの「使用上の注意」を参照）http://blogs.yahoo.co.jp/dk521123/25959360.html
(3) JQuery を利用 →ユーザーへの入力補助のみを目的なら一番いいと思う。http://blogs.yahoo.co.jp/dk521123/26923987.html
※それぞれの特性などは「カレンダーを利用した実装に関する注意点」を参照のこと。
サンプル
http://japan.internet.com/developer/20051011/25.htmlを参考にできる限りポストバックしないカレンダーコントロールを作成する なお、前月「<<」や次月「>>」押下時のポストバックのちらつきは、updateパネルを使用し解決した。 また、モーダルレスなwindow.open()だと、子画面を開いたまま、親画面を編集できてしまうので、モーダル・window.showModalDialog()で表示する これについては、以下を参考とする。http://blogs.yahoo.co.jp/dk521123/27723613.html
WebForm1.aspx（呼び出し元、デザイン部）
<html xmlns="">http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> function showCalendarPicker(textBoxID) { var returnValue = window.showModalDialog('CalendarModal.aspx', 'calendarPopup', 'width=240,height=220,resizable=yes'); if (returnValue != null) { var textObj = document.getElementById(textBoxID); textObj.value = returnValue; } } </script> <base target="_self" /> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" /> </div> </form> </body> </html>
WebForm1.aspx,vb（呼び出し元、コードビハインド部）
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.ImageButton1.OnClientClick = "showCalendarPicker('" & Me.TextBox1.ClientID & "'); return false;"
End Sub
CalendarModal.aspx（呼び出し先、デザイン部）
<html xmlns="">http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <base target="_self" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>
CalendarModal.aspx.vb（呼び出し先、コードビハインド部）
Protected Sub Calendar1_DayRender(sender As Object, e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
' リンクを全て消す
e.Cell.Controls.Clear()
' リンクを再作成
Dim link As HtmlGenericControl = _
New System.Web.UI.HtmlControls.HtmlGenericControl()
link.TagName = "a"
link.InnerText = e.Day.DayNumberText
Dim jscript As String = String.Format( _
"JavaScript:window.returnValue = '{0:d}'; window.close();", _
e.Day.Date)
link.Attributes.Add("href", jscript)
' デフォルト値を指定
If (e.Day.IsSelected) Then
link.Attributes.Add("style", _
Me.Calendar1.SelectedDayStyle.ToString())
End If
' リンクを追加
e.Cell.Controls.Add(link)
End Sub
メモ
選択日付の設定
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim textValue = Me.Request.QueryString("TextBoxValue")
If Not String.IsNullOrEmpty(textValue) Then
Dim dateValue As Date
If Date.TryParse(textValue, dateValue) Then
Me.Calendar1.SelectedDate = dateValue
Return
End If
End If
Me.Calendar1.SelectedDate = Me.Calendar1.TodaysDate
End If
End Sub
参考文献
http://aspnet.keicode.com/controls/calendar-set-get.php拡張するために
* 以下の技術が役に立つかも。http://www.atmarkit.co.jp/fdotnet/dotnettips/277aspcalceldata/aspcalceldata.html
http://www.atmarkit.co.jp/fdotnet/dotnettips/337aspcalendarsel/aspcalendarsel.html
http://asp35.com/aspDataGrid3/Chapter1/ch1-04.aspx
http://atamoco.boy.jp/asp/20100814_3.php
http://atamoco.boy.jp/asp/20100814_3.php
Calendarコントロールに独自のツールチップを表示する
http://asp35.com/Samples/080804VB-1.aspx使用した技術
* aタグ押下し、JavaScriptにテキストボックスのIDを渡す際、ASP.NET コントロールの、ClientID プロパティを利用した onclick="calendarPicker('<%= TextBox1.ClientID %>'http://dhive.jp/blog/yama/?p=1193
