Question

I inserted a dateField component. On clicking, it displays calendar. I would like to add 2 comboboxes, one shows hours (0 to 23) and other for minutes (0 to 59), to the calendar so that the user can select the time along with the date, and that will be displayed in the text input as date and time. One more thing I would like to add is clear button to clear the selected date in the calendar.

Answer 1

Since a DateField is essentially a TextInput coupled with a DateChooser, why not do that yourself? Also add your two ComboBox, make your TextInput editable=”false” text=”{dateTime}” where dateTime is a Bindable string variable you create as the concatenation of the values in the DateChooser and the two ComboBox. Call the function that creates the dateTime string on the change event of all three inputs.

Finally, add your clear Button, and have its click event call a function where you set the DateChooser to today, and the two combo boxes to default values, and update dateTime string as needed (to blank or to current date/time depending on what you are trying to do.)

Edit:
As you asked nicely, and as I am studying for the ACE exam and thought this made a nice excercise, here is what I came up with. I made the following custom component in a package named ‘components’ and called it ‘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>

In my application, I added the xmlns:cust="components.*" in the declaration tag, and inserted one <cust:myCustomDateFeild id="myDate" />. I was able to access the entry in the parent by using {myDate.dateTime}.

I made a few design assumption that you may decide to change, like the formatter, and I replaced your combo boxes with NumericStepper.