あちこちサンプルはあるんですが、まとまった情報がなかったので自分用にメモしておきます。
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 件のコメント:
コメントを投稿