Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > DateChooser コントロールと DateField コントロール

DateChooser コントロールと DateField コントロール

DateChooser コントロールと DateField コントロールを使用すると、グラフィックカレンダーから日付を選択することができます。DateChooser コントロールのユーザーインターフェイスは、カレンダーです。DateField コントロールには、日付選択用カレンダーのポップアップで結果として日付を選択する、テキストフィールドがあります。DateField プロパティは、DateChooser プロパティのスーパーセットです。

詳細については、『Adobe Flex 2 リファレンスガイド』の DateChooser および DateField を参照してください。

サブトピック

DateChooser コントロールについて

DateChooser コントロールは、年と月の名前、および対応する月のカレンダーを、曜日を示すラベル付きで表示します。このコントロールは、カレンダーを常時表示しておくアプリケーションで役に立ちます。ユーザーは、カレンダーから特定の日付を選択できます。前後に移動するための矢印ボタンを使って、月や年を切り替えることができます。特定の日付を選択できないようにしたり、表示する日付範囲を制限することも可能です。

次の図に DateChooser コントロールの例を示します。

月の表示を切り替えても、日付の選択状態は変化しません。つまり、現在選択されている日付が必ずしも表示状態になるとは限りません。DateChooser コントロールは、曜日の見出しの幅に合わせてサイズが変更されます。したがって、見出しとして曜日の略語でなく曜日名を使用する場合、カレンダーには完全に曜日名を表示できるだけの幅があります。

DateChooser コントロールには、次のデフォルトプロパティがあります。

DateField コントロールについて

DateField コントロールは日付を表示するためのテキストフィールドで、右側にカレンダーアイコンが表示されます。ユーザーがこのコントロールの境界ボックス内をクリックすると、DateChooser コントロールと同一の日付選択用カレンダーがポップアップ表示されます。日を選択しない場合、このテキストフィールドは空になり、日付選択用カレンダーには現在の月が表示されます。

日付選択用カレンダーが開くと、ユーザーは月のスクロールボタンをクリックして月や年をスクロールし、日付を選択することができます。ユーザーが日付を選択すると、日付選択用カレンダーが閉じ、選択した日付がテキストフィールドに表示されます。

このコントロールは、カレンダー選択ツールが必要だが、日付情報が占有する領域を最小化したい場合に便利です。

次の例に、DateField コントロールの 2 つのイメージを示します。左側は、日付選択用カレンダーが閉じた状態のコントロールです。カレンダーアイコンは、テキストボックスの右側に表示されています。右側は、日付選択用カレンダーが開いた状態の DateField コントロールです。

DateField コントロールは、ユーザーに日付を選択させる必要のあるあらゆる場所で使うことができます。たとえば、ホテルの予約システムで DateField コントロールを使用し、特定の日付を選択可能に、その他の日付を無効にすることができます。また、ユーザーが日付を選択したときに、催し物や会議などの現在のイベントを表示するアプリケーションで DateField コントロールを使うことができます。

DateField には、拡張された日付選択用カレンダー向けに DateChooser と同じデフォルトのプロパティがあります。畳んだ状態のコントロール用には、次のデフォルトのプロパティがあります。

DateChooser コントロールまたは DateField コントロールの作成

MXML で DateChooser コントロールを定義するには、<mx:DateChooser> タグを使用します。MXML で DateField コントロールを定義するには、<mx:DateField> タグを使用します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

次の例は DateChooser コントロールを作成しています。DateField コントロールを作成するには、<mx:DateChooser> を <mx:DateField> に変更します。この例は、DateChooser コントロールの change イベントを使用して、選択された日付をいくつかの異なる形式で表示しています。

<?xml version="1.0"?>
<!-- controls\date\DateChooserEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

        import mx.events.CalendarLayoutChangeEvent;
        
        private function useDate(eventObj:CalendarLayoutChangeEvent):void {
            // Make sure selectedDate is not null.
            if (eventObj.currentTarget.selectedDate == null) {
                return 
            }

            //Access the Date object from the event object.         
            day.text=eventObj.currentTarget.selectedDate.getDay();
            date.text=eventObj.currentTarget.selectedDate.getDate();
            month.text=eventObj.currentTarget.selectedDate.getMonth();
            year.text=eventObj.currentTarget.selectedDate.getFullYear();
            wholeDate.text=
                eventObj.currentTarget.selectedDate.getFullYear() +
                "/" +
                (eventObj.currentTarget.selectedDate.getMonth()+1) +
                "/" + eventObj.currentTarget.selectedDate.getDate();
        }
        ]]>
    </mx:Script>

    <mx:DateChooser id="date1" change="useDate(event)"/>

    <mx:Form>
        <mx:FormItem label="Day">
            <mx:TextInput id="day" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Day of month">
            <mx:TextInput id="date" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Month">
            <mx:TextInput id="month" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Year">
            <mx:TextInput id="year" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Date">
            <mx:TextInput id="wholeDate" width="300"/>
        </mx:FormItem>
    </mx:Form>      
</mx:Application>

イベントリスナーの 1 行目で、selectedDate プロパティが null かどうかが示されます。これをチェックする必要があるのは、現在選択されている日付を選択するとその日付の選択が解除され、selectedDate プロパティが null に設定されて、change イベントが送出されるためです。

Date クラスの使用

DateChooser コントロールと DateField コントロールは、selectedDate プロパティを使用して、現在選択されている日付を Date 型のオブジェクトとして格納します。日付と時刻の値を表す Date オブジェクト、または selectedDate プロパティの Date にアクセスする Date オブジェクトを作成できます。

Date クラスには、日付を操作できる多数のメソッドがあります。Date クラスの詳細については、『Adobe Flex 2 リファレンスガイド』を参照してください。

Date オブジェクトは、MXML で <mx:Date> タグを使って作成および設定できます。このタグにより、Date クラスの setter メソッドが MXML のプロパティとして実装され、Date オブジェクトを初期化できるようになっています。たとえば、次のコードは DateChooser コントロールを作成し、選択された日付として、"April 10, 2005" を設定しています。DateChooser コントロールでは、月は 0 から始まるインデックスとして表現されます。

<mx:DateChooser id="date1">
        <mx:selectedDate>
            <mx:Date month="9" date="10" year="2005"/>
        </mx:selectedDate>
</mx:DateChooser>     

次の例は、DateField コントロール用に最初に選択した日付を設定しています。

<mx:DateField id="date3" selectedDate="{new Date (2005, 9, 10)}"/>

次の例のように、関数の selectedDate プロパティを設定することもできます。

<mx:Script>
    <![CDATA[
        private function initDC():void {
            date2.selectedDate=new Date (2003, 3, 10);        
        }
    ]]>
</mx:Script>

<mx:DateChooser id="date2" creationComplete="initDC();"/>

プロパティ表記を使用すると、Date オブジェクトの selectedDate プロパティの ActionScript の setter メソッドと getter メソッドにアクセスできます。たとえば、次の行は、選択した日付の 4 桁の年をテキストボックスに表示しています。

<mx:TextInput text="{date1.selectedDate.fullYear}"/> 

ヘッダー、曜日、および今日のテキストスタイルの指定

次の日付選択用カレンダーのプロパティを使用すると、コントロールの領域のテキストスタイルを指定できます。

• headerStyleName
• weekDayStyleName
• todayStyleName

これらのプロパティを使用すると、ヘッダー、曜日リスト、および今日の日付のテキストスタイルを指定できます。これらのプロパティは、todayColor など、テキスト以外のスタイルの設定には使用できません。

次の例は、ヘッダーテキストがボールドで青色、16 ピクセルの Times New Roman フォントの DateChooser コントロールを定義しています。曜日のヘッダーはボールドでイタリック、緑色、15 ピクセルの Courier テキスト、今日の日付はボールドでオレンジ色、12 ピクセルの Times New Roman テキストになっています。今日の日付の背景色はグレーで、直接 mx:DateChooser タグに設定されています。

<?xml version="1.0"?>
<!-- controls\date\DateChooserStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        .myHeaderStyle{
            color:#6666CC; 
            font-family:Times New Roman, Times, serif;
            font-size:16px; font-weight:bold;}
        .myTodayStyle{
            color:#CC6633; 
            font-family:Times New Roman, Times, serif;
            font-size:12px; font-weight:bold;}
        .myDayStyle{
            color:#006600; 
            font-family:Courier New, Courier, mono;
            font-size:15px; font-style:italic; font-weight:bold;}
    </mx:Style>

    <mx:DateChooser 
        headerStyleName="myHeaderStyle" 
        todayStyleName="myTodayStyle" 
        todayColor="#CCCCCC"
        weekDayStyleName="myDayStyle"/>
</mx:Application>

選択可能な日付の指定

DateChooser コントロールには、ユーザーが選択可能な日付を指定できる次のプロパティがあります。

次の例は、次の特性を持つ DateChooser コントロールを示しています。

• selectableRange プロパティは、ユーザーが選択できる日付の範囲を 2006 年 1 月 1 日～ 2006 年 3 月 15 日に制限しています。ユーザーが移動できる月は 2006 年 1 月～ 2006 年 3 月の間のみです。
• disabledRanges プロパティは、ユーザーが 1 月 11 日または 1 月 23 日～ 2 月 10 日間の任意の日付を選択できないようにしています。
• disabledDays プロパティは、ユーザーが土曜日または日曜日を選択できないようにしています。

<?xml version="1.0"?>
<!-- controls\date\DateChooserStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:DateChooser 
    selectableRange="{{rangeStart: new Date(2006,0,1),
        rangeEnd: new Date(2006,2,15)}}"
    disabledRanges="{[new Date(2006,0,11), 
        {rangeStart: new Date(2006,0,23), rangeEnd: new Date(2006,1,10)}]}"
    disabledDays="{[0,6]}"/>
</mx:Application>

ActionScript での DateChooser プロパティと DateField プロパティの設定

DateChooser コントロールと DateField コントロールのプロパティには、スカラー値、配列、および Date オブジェクトを設定できます。プロパティの大半は MXML で設定できますが、ActionScript のほうが簡単に設定できる場合があります。

たとえば、次のコード例は、配列を使用して disabledDays プロパティを設定して土曜日と日曜日を無効化、つまり、カレンダーで選択できないようにしています。この例では、タグを使用した方法とタグ属性を使用した方法の、異なる 2 つの方法で disabledDays プロパティを設定しています。

<?xml version="1.0"?>
<!-- controls\date\DateChooserDisabledOption.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Use tags.-->
    <mx:DateField>
            <mx:disabledDays>
                <mx:Number>0</mx:Number>
                <mx:Number>6</mx:Number>
            </mx:disabledDays>
    </mx:DateField>     

    <!-- Use tag attributes.-->
    <mx:DateField disabledDays="[0,6]"/>
</mx:Application>

次の例は、DateChooser コントロールの dayNames、firstDayOfWeek、headerColor、selectableRange の各プロパティを、initialize イベントを使用して設定しています。

<?xml version="1.0"?>
<!-- controls\date\DateChooserInitializeEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.events.DateChooserEvent;

            private function dateChooser_init():void {
                myDC.dayNames=['Sun', 'Mon', 'Tue', 
                    'Wed', 'Th', 'Fri', 'Sat'];
                myDC.firstDayOfWeek = 3;
                myDC.setStyle("headerColor", 0xff0000);
                myDC.selectableRange = {rangeStart: new Date(2004,0,1), 
                    rangeEnd: new Date(2007,0,10)};
            }
        
            private function onScroll():void {
                myDC.setStyle("fontStyle", "italic");
            }
        ]]>
    </mx:Script>

    <mx:DateChooser id="myDC" 
        width="200" 
        creationComplete="dateChooser_init();" 
        scroll="onScroll();"/>
</mx:Application>

このコードでは、selectableRange プロパティを設定するため、日付範囲の始まりと終わりを表す 2 つの Date オブジェクトを作成しています。ユーザーは、指定された範囲内でしか日付を選択できません。この例では、ユーザーが DateChooser コントロールを初めてスクロールした後に、fontStyle を italics に変更しています。

DateField コントロールによる日付のフォーマット

DateField コントロールの formatString プロパティを使用して、コントロールのテキストフィールドのストリングをフォーマットできます。formatString プロパティでは、"MM"、"DD"、"YY"、"YYYY"、区切り文字、および句読点を組み合わせて指定できます。デフォルト値は "MM/DD/YYYY" です。

次の例では、formatString プロパティを "MM/DD/YY" に設定して 2 桁の年を表示しています。

<?xml version="1.0"?>
<!-- controls\date\DateFieldFormat.mxml -->
<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Label text="{date2.formatString}"/>
    <mx:DateField id="date2" 
        editable="true" 
        width="100" 
        formatString="MM/DD/YY"/>
</mx:Application>

また DateField コントロールを使用すると、日付を任意の形式のストリングに変換して、コントロールのテキストフィールドに表示する formatter 関数を指定できます。DateField の labelFunction プロパティと DateFormatter クラスは、日付の形式を設定する際便利です。

デフォルトでは、DateField コントロールのテキストフィールドの日付が "MM/DD/YYYY" という形式でフォーマットされます。DateField コントロールの labelFunction プロパティを使用すると、テキストフィールドに表示される日付をフォーマットして、日付を含むストリングを返す関数を指定できます。この関数のシグネチャは次のとおりです。

public function formatDate(currentDate:Date):String {
    ...
    return dateString;
}

関数には別の名前を選択することもできますが、必ず Date 型の引数を 1 つ含み、テキストフィールドに表示するストリングとして日付を返す必要があります。次の例は、日付を "yyyy/mm/dd" ("2005/11/24" など) の形式で表示する formatDate() 関数を定義しています。この関数は、DateFormatter オブジェクトを使用して形式を設定しています。

<?xml version="1.0"?>
<!-- controls\date\DateChooserFormatter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function formatDate(date:Date):String {
                return dfconv.format(date);
            }       
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dfconv" formatString="YYYY/MM/DD"/>
    <mx:DateField id="df" labelFunction="formatDate" parseFunction="null"/>
</mx:Application>

parseFunction プロパティは、DateField コントロールのテキストフィールドにテキストとして入力された日付を解析して、コントロールに Date オブジェクトを返す関数を指定します。ユーザーによるテキストフィールドへの日付入力を許可しない場合は、labelFunction プロパティを設定する際に、parseFunction プロパティを null に設定します。

コントロールのテキストフィールドへのユーザーによる日付入力を許可する場合は、parseFunction プロパティに、テキストストリングを DateField コントロールで使用される Date オブジェクトに変換する関数を指定する必要があります。parseFunction プロパティが設定されている場合、通常、labelFunction プロパティに指定されている関数の反転を実行する必要があります。

parseFunction プロパティに指定されている関数のシグネチャを次に示します。

public function parseDate(valueString:String, inputFormat:String):Date {
    ...
    return newDate
}

ここで、valueString 引数は、ユーザーがテキストフィールドに入力するテキストストリングを含み、inputFormat 引数はストリング形式を含みます。たとえば、月、日、年の 2 文字を使用してテキストストリングを入力できる場合は、inputFormat 引数に "MM/DD/YY" を渡します。

ユーザーの操作

日付選択用カレンダーには、ユーザーが月を選択できる矢印ボタンがあります。特定の日付をマウスでクリックして選択することができます。

前方移動用の矢印ボタンをクリックすると翌月のカレンダーが、後方移動用の矢印ボタンをクリックすると前月のカレンダーが表示されます。12 月のカレンダーで翌月表示用の矢印をクリックした場合、次の年の表示に切り替わります。同様に 1 月のカレンダーで前月表示用の矢印をクリックした場合は、前の年の表示に切り替わります。特定の日付をクリックすると、その日付が選択されます。デフォルトでは、選択された日付の周囲には緑の背景色が表示されます。現在の日付は、日付が白で背景が黒で表されます。現在選択されている日付をクリックすると、その選択が解除されます。

次のキーストロークを使用すると、ユーザーは DateChooser コントロールと DateField コントロールを移動できます。

Flex 2.01