ASP.NET Calendarを使用した日付入力

カレンダーから日付を選択できる日付入力テキストボックスを定義する方法です。
あちこちサンプルはあるんですが、まとまった情報がなかったので自分用にメモしておきます。

Calendarを使用した日付入力

参考サイトはコチラ。
@IT [ASP.NET AJAX]MaskedEditコントロールでテキストボックスに入力可能な値を制限するには?[2.0、3.0、3.5、C#、VB]
@IT [ASP.NET AJAX]Calendarコントロールで日付入力ボックスを定義するには?[2.0のみ、C#、VB]

サンプルとして以下のような画面を作成してみます。
テキストボックスには日付を入力することもカレンダーから日付を選択することもできます。
日付以外を入力するとエラーが表示されます。

まずはDefault.aspxのソースです。
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Calendar._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .cal_Theme1 .ajax__calendar_container
        {
            background-color: #e2e2e2;
            border: solid 1px #cccccc;
        }
        .cal_Theme1 .ajax__calendar_header
        {
            background-color: #ffffff;
            margin-bottom: 4px;
        }
        .cal_Theme1 .ajax__calendar_title, .cal_Theme1 .ajax__calendar_next, .cal_Theme1 .ajax__calendar_prev
        {
            color: #004080;
            padding-top: 3px;
        }
        .cal_Theme1 .ajax__calendar_body
        {
            background-color: #e9e9e9;
            border: solid 1px #cccccc;
        }
        .cal_Theme1 .ajax__calendar_dayname
        {
            text-align: center;
            font-weight: bold;
            margin-bottom: 4px;
            margin-top: 2px;
        }
        .cal_Theme1 .ajax__calendar_day
        {
            text-align: center;
        }
        .cal_Theme1 .ajax__calendar_hover .ajax__calendar_day, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_month, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_year, .cal_Theme1 .ajax__calendar_active
        {
            color: #004080;
            font-weight: bold;
            background-color: #ffffff;
        }
        .cal_Theme1 .ajax__calendar_today
        {
            font-weight: bold;
        }
        .cal_Theme1 .ajax__calendar_other, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_today, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_title
        {
            color: #bbbbbb;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="True" />
    <div>
        <asp:TextBox ID="txtDate" runat="server" Width="100" />
        <asp:MaskedEditExtender ID="meeDate" runat="server" TargetControlID="txtDate" Mask="9999/99/99"
            MaskType="Date" UserDateFormat="YearMonthDay" />
        <asp:ImageButton ID="imgbtnCalendar" runat="server" ImageUrl="~/image/calendar.png"
            OnClientClick="return false;" />
        <asp:CalendarExtender ID="ceDate" runat="server" Format="yyyy/MM/dd" TargetControlID="txtDate"
            PopupButtonID="imgbtnCalendar" CssClass="cal_Theme1" />
        <asp:TextBox ID="TextBox1" runat="server"/>
        <asp:Button ID="btnExec" runat="server" Text="送信" />
        <br />
        <asp:RangeValidator ID="vranDate" runat="server" ControlToValidate="txtDate" Display="Dynamic"
            Type="Date" MinimumValue="1900/01/01" MaximumValue="9999/12/31" ErrorMessage="正しい日付を入力して下さい。"/>
    </div>
    </form>
</body>
</html>

まずはToolkitScriptManager を配置します。
カレンダーを日本語表示するためにEnableScriptGlobalizationプロパティをTrueに設定します。

日付を入力するためのテキストボックスを配置します。(ID:txtDate)

テキストボックスに日付入力の制限をかけるために、MaskedEditExtenderを配置します。(ID:meeDate)
以下のプロパティを設定します。
TargetControlID="txtDate"
Mask="9999/99/99"
MaskType="Date"
UserDateFormat="YearMonthDay"

カレンダーを表示するためのImageButtonを配置します。(ID:imgbtnCalendar)
OnClientClick="return false;"を設定し、サーバーサイドの処理を発生させないようにします。

カレンダーとなるCalendarExtenderを配置します。(ceDate)
以下のプロパティを設定します。
Format="yyyy/MM/dd"
TargetControlID="txtDate"
PopupButtonID="imgbtnCalendar"
CssClass="cal_Theme1"
※CssClassは別に設定しなくてもいいです。
「CalendarExtender css」で検索すると、いろいろ見つかります。

フォーカス移動させるためのTextBox(ID:TextBox1)と送信ボタン(ID:btnExec)を配置します。

日付が正しい形式であるかを検証するためにRangeValidatorを使用します。(ID:vranDate)
以下のプロパティを設定します。
ControlToValidate="txtDate"
Type="Date"
MinimumValue="1900/01/01"
MaximumValue="9999/12/31"
ErrorMessage="正しい日付を入力して下さい。"


以上でカレンダーを使用した日付入力の完成です。

0 件のコメント: