Question

即时通讯使用自定义组件作为日期时间，它是12小时和上午/下午格式，现在我想在数字步进器中显示24小时格式，并且应该禁用am / pm。有任何想法???

继承我的代码

<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 !!

Answer 1

向组件添加新属性以控制格式更改。有很多方法可以做到这一点。

我可能会添加一个名为“Format”的公共变量，它接受一个字符串值。我将这些字符串值存储在常量中，如下所示：

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

然后你的格式属性：

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

当你从datefield选择任何日期时，还有一件事你会得到时间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"));

Flex自定义组件中的日期时间格式更改

2 个答案: