Flex自定義組件中的日期時間格式更改

Question

我使用日期時間的自定義組件，它是12小時和上午/下午的格式，現在我要以數字步進顯示24小時格式，並且應該禁用上午/下午。 有什么想法嗎？

這是我的代碼

<mx:Script>
    <![CDATA[

        [Bindable] private var _selectedDate:Date = new Date();
        [Bindable] [Inspectable(defaultValue='5', category="Other", enumeration="1,5,10,15,30")] 

        public var minuteIncrement:int = 1;


        public function get selectedDate():Date
        {
            var rtnVal:Date = null; 
            if(this.date.text != "")
            {
                this.validateNow();
                rtnVal = this._selectedDate;
            }
            return rtnVal;
        }
        private function getVisible(flg:Boolean):void
        {
            if(!flg)
            {
                //Invisible
                hours.visible = false;
                lbl.visible = false;
                minutes.visible = false;
                am.visible = false;
                pm.visible = false;
            }
            else
            {
                //Visible
                hours.visible = true;
                lbl.visible = true;
                minutes.visible = true;
                am.visible = true;
                pm.visible = true;
            }
        }
        public function clearDate():void
        {
            selectedDate = new Date();
            date.selectedDate = null;
            getVisible(false);
        }

        [Bindable]
        public function set selectedDate(value:Date):void
        {
            if(value != null)
            {
                this._selectedDate = value
                this.date.selectedDate = this._selectedDate
                if(value.getHours() >= 12)
                {
                    this.ampm.selectedValue = 2;
                }
                else
                {
                    this.ampm.selectedValue = 1;
                }

                if(value.getHours() < 13 )
                    this.hours.value = value.getHours()
                else
                    this.hours.value = value.getHours() - 12

                if(value.getHours() == 0)
                    this.hours.value = 12;
                this.minutes.value = value.getMinutes()
                this.validateNow();
                getVisible(true);
            }
            else
            {
                clearDate();
            }
        }

        override public function validateProperties():void
        {
            super.validateProperties();

        }

        public function handleChange():void
        {
            getVisible(true);
            if(this.date.text != "")
            {
                var militaryHours:int = hours.value;
                if(ampm.selectedValue == 2 && hours.value != 12)
                    militaryHours = hours.value+12; 
                else if(ampm.selectedValue == 1 && hours.value == 12)
                    militaryHours = 0;
                var selDate:Date = this.date.selectedDate;
                var date:Date = new Date(
                    selDate.getFullYear(),
                    selDate.getMonth(),
                    selDate.getDate(),
                    militaryHours,
                    minutes.value)
                this.selectedDate = date;

                this.invalidateProperties();
                this.validateNow();
                this.dispatchEvent(new Event("change"));
            }
        }
    ]]>
</mx:Script>
<mx:DateField id="date" selectedDate="{new Date()}" change="handleChange()" formatString="DD/MM/YYYY"/>
<mx:Spacer width="10"/>
<mx:NumericStepper id="hours" minimum="1" maximum="12" stepSize="1" width="40" change="handleChange()" valueCommit="handleChange()" textAlign="center"/>
<mx:Label id="lbl" text=":" textAlign="center"/>
<mx:NumericStepper id="minutes" minimum="0"  maximum="59" stepSize="{minuteIncrement}" change="handleChange()" valueCommit="handleChange()" textAlign="center" width="40"/>
<mx:Spacer width="10"/>
<mx:RadioButtonGroup id="ampm" selectedValue="1" change="this.handleChange()"/>
<mx:RadioButton id="am" value="1" label="AM" group="{ampm}"/>
<mx:RadioButton id="pm" value="2" label="PM" group="{ampm}"/>

提前謝謝！

Answer 1

向組件添加新屬性以控制格式的更改。 有很多方法可以做到這一點。

我可能會添加一個名為“格式”的公共變量，該變量接受一個字符串值。 我將這些字符串值存儲在常量中，如下所示：

public var const TWENTY_FOUR_HOUR_FORMAT : String = "twentyFourHourFormat";
public var const TWELVE_HOUR_FORMAT : String = "twelveourFormat";

然后是您的format屬性：

private var _Format : String = TWELVE_HOUR_FORMAT;
protected function get format():String{
 return _Format;
}
protected function set format(value:String){
 if(format == TWENTY_FOUR_HOUR_FORMAT){
   hours.max = 24;
   am.visible = false;
   pm.visible = false;
 } else {
   hours.max = 12;
   am.visible = true
   pm.visible = true;
}

對於更高級的內容，您可以使用組件生命周期，在set方法中使屬性和displayList無效。 然后可能在commitProperties（）中設置'hours.max'值，並在updateDisplayList（）中設置am.visible和pm.visible屬性。

Answer 2

public function handleChange():void
        {
            getVisible(true);
            if(this.date.text != "")
            {
                var militaryHours:int = hours.value;
                if(ampm.selectedValue == 2 && hours.value != 12)
                    militaryHours = hours.value+12; 
                else if(ampm.selectedValue == 1 && hours.value == 12)
                    militaryHours = 0;
                var selDate:Date = this.date.selectedDate;
                var date:Date = new Date(
                    selDate.getFullYear(),
                    selDate.getMonth(),
                    selDate.getDate(),
                    militaryHours,
                    minutes.value)
                this.selectedDate = date;

                hours.value = date.hours;
                minutes.value = date.minutes;

                this.invalidateProperties();
                this.validateNow();
                this.dispatchEvent(new Event("change"));
            }
           }

另外一件事情，當您從日期字段中選擇任何日期時，您將獲得時間00:00:00 ...，如果您還想要當前時間，則可以簡單地創建一個日期對象並獲取小時和分鍾，這將為您提供當前時間也...

在下面的代碼中類似。

this.selectedDate = date;

                var date1:Date = new Date();

                hours.value = date1.hours;
                minutes.value = date1.minutes;

                this.invalidateProperties();
                this.validateNow();
                this.dispatchEvent(new Event("change"));