閲覧総計:18734 (本日:1 昨日:4)
Ajax Control Toolkitは、日付入力に便利なCalendar Extenderという部品を
提供してくれている。早速使ってみた。 09/08/11
ところが、このCalender Extenderは標準の方法での日本語表示化では、カレンダ
の表示の全てが日本語表示になってくれない。この欠点を補完するする方法が
↓このページに紹介されていたので、対応してみた。
http://devadjust.exblog.jp/7018028/
開発環境:VWD2005+AJAX1.0+Toolkit + SQL Server2005
サーバ:ASP.NET2.0+AJAX1.0 + SQL Server2005
【機能】TextBoxをクリックするとカレンダがポップアップし、日付が簡単に入力できる。
(カレンダの表示が日本語化されているところが特徴)
【稼動サンプル】
http://www.kuri6005.useiis7.net/AjaxTr/Toolkit/Calendar.aspx
作成時の画面
コントロールの設定値
コントロール | プロパティ | 値 | コメント |
---|---|---|---|
ScriptManager | EnableScriptGlobalization | True | Ajaxツールの表示を日本語に |
EnableScriptLocalization | True | ||
CalendarExtender | TargetControlID | TextBox1 | ターゲットを指定 |
【Calendar.aspx】
<%@ Page Language="VB" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) 'Ajaxカレンダの表示を日本語化する 'http://devadjust.exblog.jp/7018028/ RegisterStartupScript("startup", "<script language='JavaScript'>" & _ "var f = AjaxControlToolkit.CalendarBehavior.prototype._performLayout.toString();" & _ "f = f.replace('MMMM, yyyy','yyyy年 M月').replace('MMMM d, yyyy','yyyy年 M月 d日');" & _ "eval('AjaxControlToolkit.CalendarBehavior.prototype._performLayout = ' + f);" & _ "<" & "/script>") '↑<scirpt runat="server">要素を閉じるためのタグと認識されないようにする為のワザ 'JavaScriptの埋め込み方法 'http://www.atmarkit.co.jp/fdotnet/dotnettips/160regscript/regscript.html End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無題のページ</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization="True" /> Calendar Extenderのテスト(カレンダ表示の日本語化) 09/08/10<br /> <br /> 【機能】TextBoxをクリックするとAjax Calendarが表示され、日付が入力できる。<br /> 日付: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"> </cc1:CalendarExtender> <br /> </form> </body> </html>
【参考にしたページ】
1.Ajaxカレンダの表示を日本語化する 08/01/19
http://devadjust.exblog.jp/7018028/
2.JavaScriptコードの埋め込み方法 04/05/21
http://www.atmarkit.co.jp/fdotnet/dotnettips/160regscript/regscript.html