Flex3 中下拉日历内带有组合框和清除按钮的自定义 dateField 组件

Question

我插入了一个 dateField 组件。单击后，它会显示日历。我想向日历添加 2 个组合框，一个显示小时（0 到 23），另一个显示分钟（0 到 59），以便用户可以选择时间和日期，并将其显示在文本中输入日期和时间。我想添加的另一件事是清除按钮，用于清除日历中选定的日期。

Answer 1

既然 DateField 本质上是一个 TextInput 加上一个 DateChooser，为什么不自己做呢？还要添加两个 ComboBox，使 TextInput editable="false" text="{dateTime}" ，其中 dateTime 是您创建的可绑定字符串变量，作为 DateChooser 和两个 ComboBox 中的值的串联。调用在所有三个输入的更改事件上创建日期时间字符串的函数。

最后，添加您的清除按钮，并让它的单击事件调用一个函数，在该函数中将 DateChooser 设置为今天，将两个组合框设置为默认值，并根据需要更新日期时间字符串（根据需要更新为空白或当前日期/时间）你正在尝试做的事。）

编辑：
正如您提出的好意，而且我正在准备 ACE 考试，并认为这是一次很好的练习，这就是我的想法。我在名为“components”的包中制作了以下自定义组件，并将其命名为“myCustomDateField.mxml”。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="resetDisplay()">
<mx:DateFormatter id="dateFormat" formatString="DD-MMM-YYYY JJ:NN" />

<mx:Script>
<![CDATA[

[Bindable]
public var dateTime:Date;

     private function updateDisplay():void {
    var userDate:Date = new Date();
    userDate.date = cal.selectedDate.date;
    userDate.month = cal.selectedDate.month;
    userDate.fullYear = cal.selectedDate.fullYear;
    userDate.hours = hour.value;
    userDate.minutes = minute.value;
    dateTime = userDate;
}

private function resetDisplay():void {
    var now:Date = new Date();
    cal.selectedDate = now;
    hour.value = now.hours;
    minute.value = now.minutes;
    dateTime = now;
}

]]>
</mx:Script>

<mx:Label text="Select Date and Time:" />
<mx:TextInput id="display" text="{dateFormat.format(dateTime)}" editable="false" />
<mx:DateChooser id="cal" yearNavigationEnabled="true" change="updateDisplay()" />
<mx:Label text="Hour:" />
<mx:NumericStepper id="hour" minimum="0" maximum="23" change="updateDisplay()" />
<mx:Label text="Minute:" />
<mx:NumericStepper id="minute" minimum="0" maximum="59" change="updateDisplay()" />
<mx:Button label="Clear" click="resetDisplay()" />

</mx:HBox>

在我的应用程序中，我在声明标记中添加了 xmlns:cust="components.*" ，并且插入了一个 。 我能够使用 {myDate.dateTime} 访问父级中的条目。

我做了您可能决定更改一些设计假设，例如格式化程序，我用 NumericStepper 替换了您的组合框。