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

詳しくは、『Adobe Flex リファレンスガイド』の「DateChooser」と「DateField」を参照してください。

DateChooser コントロールについて

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

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

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

DateField コントロールについて

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

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

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

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

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

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>
前の例で実行する SWF ファイルは以下のとおりです。

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

Date クラスの使用

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

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

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

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

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

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

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

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

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

プロパティ表記を使用すると、ActionScript のメソッドである、Date オブジェクトの selectedDate プロパティの 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>
前の例で実行する SWF ファイルは以下のとおりです。

選択可能な日付の指定

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\DateChooserSelectable.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>
前の例で実行する SWF ファイルは以下のとおりです。

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>
前の例で実行する SWF ファイルは以下のとおりです。

次の例は、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>
前の例で実行する SWF ファイルは以下のとおりです。

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

selectedRanges プロパティを使用することで、DateChooser コントロールで複数の日付を選択できます。このプロパティにはオブジェクトの配列が含まれます。配列内の各オブジェクトには、開始日と終了日の 2 つの日付が含まれます。各オブジェクト内の日付を同じ日付に設定することで、DateChooser で任意の数の日付を選択できます。

次の例では、XML オブジェクトを使用して DateChooser コントロールの日付を定義します。次に XML オブジェクトに対して反復処理を行い、各日付の新しいオブジェクトを作成します。これらのオブジェクトを使用して、DateChooser で選択される日付を指定します。

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\date\ProgrammaticDateChooserSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            private function init():void {
                var d:Date = new Date();
                var m:int = d.month;
                dc1.displayedMonth = m;
            }           
            
            public function displayDates():void {
                var dateRanges:Array = [];
                for (var i:int=0; i<shows.show.length(); i++) { 
                    var cDate:Date = 
                        new Date(shows.show[i].showDate.toString());           
                    var cDateObject:Object = 
                        {rangeStart:cDate, rangeEnd:cDate};
                    dateRanges.push(cDateObject);
                }
                dc1.selectedRanges = dateRanges;
            }           
        ]]>
    </mx:Script>

    <!-- Define the data for the DateChooser -->    
    <mx:XML id="shows" format="e4x">
     <data>
        <show>
         <showID>1</showID>
         <showDate>02/28/2007</showDate>
         <showTime>10:45am/11:15am</showTime>
        </show>
        <show>
         <showID>2</showID>
         <showDate>02/23/2007</showDate>
         <showTime>7:00pm</showTime>
        </show>
     </data>
    </mx:XML>
 
    <mx:DateChooser id="dc1" 
        showToday="false" 
        creationComplete="displayDates()"
    />
    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

DateField コントロールによる日付の形式設定

DateField コントロールの formatString プロパティを使用して、コントロールのテキストフィールドのストリングの形式を設定することができます。formatString プロパティには、「MM」、「DD」、「YY」、「YYYY」、区切り文字および句読点の任意の組み合わせを格納できます。デフォルト値は「MM/DD/YYYY」です。

次の例では、ドロップダウンリストから formatString プロパティの値を選択しています。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

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>
前の例で実行する SWF ファイルは以下のとおりです。

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 コントロールで移動できます。