日付の選択

日付の選択モードを設定する方法と、選択された日付を取得する方法について解説します。

最大値と最小値

カレンダーに表示する日付の最小値と最大値は、MinDateプロパティとMaxDateプロパティで設定します。この最小値と最大値を超える日付には、フォーカスを移動することはできません。

選択モードの指定

カレンダーコントロールには、日付の選択方法として、1つの日付だけを選択する単一選択と、複数の日付を選択する複数選択の2種類があります。

これらの選択方法は、SelectionModeプロパティで指定します。また、下記に示した選択可能な日付の種類は、AllowSelectionプロパティで設定します。

任意の日付（AllowSellection.AnyDay）
営業日（AllowSellection.Workday）
休日と休業日（AllowSellection.Holiday）

日付選択の操作は、目的の日付をマウスでクリックするか、または矢印キーでフォーカス枠を移動し、［Space］または［Enter］キーを押して行います。また、SelectionModeプロパティをSelectionMode.MultiRichに設定した場合は、CtrlキーやShiftキーを使った日付選択ができます。

なお、複数選択の場合は、選択できる最大日数をMaxSelectionCountプロパティで設定できます。

また、WeekNumberSelectプロパティをTrueにすると、週番号（ShowWeekNumberプロパティで表示を設定）をクリックすると、その週全体を選択し、WeekTitleSelectプロパティをTrueにすると、曜日タイトルのクリックでその曜日全部を選択します。

SelectedDateプロパティをデータベースに接続する場合は、必ず単一選択モードに設定してください。複数選択モードではデータベース接続をサポートしていません。

選択された日付の取得

マウスやキーボードの操作で選択された日付は、選択モードの違いによって2つのプロパティを使い分けて取得します。

サーバー側での日付取得

単一選択された日付の取得には、SelectedDateプロパティを使用し、複数選択された日付の取得は、Selectionsプロパティを使用します。

複数選択された日付は、Selectionsプロパティが参照するSelectionCollectionコレクションに格納されます。コレクションの要素である日付にアクセスするには、SelectionCollectionコレクションのItemプロパティ（Visual Basic）またはインデクサを使用します。

クライアント側での日付取得

単一選択された日付の取得には、GetSelectedDateメソッドを使用し、複数選択された日付はGetSelections メソッドを使用します。GetSelectionsメソッドは、選択された日付の配列を返します。

コードによる日付選択

日付の選択は、通常、マウスやキーボードの操作によって行われますが、コードで選択することも可能です。

サーバー側での日付選択

Selectionsプロパティが参照するSelectionCollectionコレクションの次のメソッドのいずれかを使用します。なお、リファレンスのAddメソッドでは、カレント日を含む月のすべての日付を選択する方法を紹介しています。

また、選択した日付を解除するときは、次のいずれかのメソッドを使用します。

クライアント側での日付選択

クライアント側での日付選択は、単一選択モードの場合は、SetSelectedDateメソッド、複数選択モードの場合は、SetSelectionsメソッドを使用します。

選択時のイベント

直前に選択されていた日付とは異なる日付が選択されたときには、単一選択モードと複数選択モードの両方でSelectedDateChangedクライアントイベントが発生します。また、フォーカス枠を移動したときには、FocusDateChangedクライアントイベントが発生します。
また、AutoPostBackプロパティがTrueのときは、サーバー側でSelectedDateChangedイベントが発生します。

カレンダー上の日付をクリックしたときには、ClickDateクライアントイベントが発生します。また、AutoPostBackプロパティがTrueのときは、サーバーサイドでもClickDateイベントが発生します。

カレンダー上の日付をクリックして日付を選択したときには、次の順序でクライアントイベントが発生します。

FocusDateChanged
ClickDate
SelectedDateChanged

サンプルコード

次のサンプルコードは、複数選択モードで選択された日付をリストボックスに表示する方法を示します。

Visual Basic
C#

Imports GrapeCity.Web.Input.IMCalendar
Imports GrapeCity.Web.Input.Core

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    ' 複数選択モードに設定します。
    GcCalendar1.SelectionMode = SelectionMode.MultiSimple

    ' SelectedDateChanged イベントが発生するようにします。
    GcCalendar1.AutoPostBack = True
End Sub

Private Sub GcCalendar1_SelectedDateChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcCalendar1.SelectedDateChanged
    ' リストボックスをクリアします。
    ListBox1.Items.Clear()

    ' 選択された日付をリストボックスに表示します。
    Dim aSC As SelectionCollection = GcCalendar1.Selections
    If aSC.Count > 0 Then
        Dim aDay As DateTimeEx
        For Each aDay In aSC
            ListBox1.Items.Add(DateTime.Parse(aDay.ToString).ToLongDateString())
        Next
    End If
End Sub

using GrapeCity.Web.Input.IMCalendar;
using GrapeCity.Web.Input.Core;

private void Page_Load(object sender, System.EventArgs e)
{
    // 複数選択モードに設定します。
    GcCalendar1.SelectionMode = SelectionMode.MultiSimple;

    // SelectedDateChanged イベントが発生するようにします。
    GcCalendar1.AutoPostBack = true;
}

private void GcCalendar1_SelectedDateChanged(object sender, System.EventArgs e)
{
    // リストボックスをクリアします。
    listBox1.Items.Clear();

    // 選択された日付をリストボックスに表示します。
    SelectionCollection aSC = GcCalendar1.Selections;
    if (aSC.Count > 0)
    {
        foreach (DateTimeEx aDay in aSC)
        {
            listBox1.Items.Add(DateTime.Parse(aDay.ToString()).ToLongDateString());
        }
    }
}

次のサンプルコードは、クライアント側で複数選択モードで選択された日付をテキストコントロールに表示する方法を示します。

JavaScript

function Calendar1_SelectedDateChanged(sender, eArgs)
{
    var dates = new Array();
    dates = sender.GetSelections();
    FindIMControl("GcTextBox1").SetLines(dates);
}