閲覧総計: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

Calendar02.JPG

作成時の画面

Calendar01.JPG

コントロールの設定値

コントロールプロパティコメント
ScriptManagerEnableScriptGlobalizationTrueAjaxツールの表示を日本語に
EnableScriptLocalizationTrue
CalendarExtenderTargetControlIDTextBox1ターゲットを指定

【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>
        &nbsp;<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



トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS