Date Time Format Change in flex custom component

Question

im using a custom component for date time, it is 12 hours and am/pm format, Now i wat to show 24 hour format in numeric stepper and am/pm should be disabled. have any idea???

heres my code

<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}"/>

Thanxxxxxxx in advance!!

Answer 1

Add new properties to the component to control the change in format. There are lots of ways to do this.

I might add a public variable named "Format" which accepts a string value. I'd store those string values in constants, like this:

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

Then your format property:

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;
}

For something slightly more advanced, you could make use of the component livecycle, invalidating properties and displayList in your set method. Then probably set the 'hours.max' value in commitProperties() and the am.visible and pm.visible properties in updateDisplayList().

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"));
            }
           }

One more thing when you select any date from datefield you will get the time 00:00:00... and if also you want current time then you can simply create a date object and fetch the hours and minutes this will give you current time also...

similar in the following code....

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"));