custom dateField component with comboBox and clear button inside the dropdown calender in flex3

Question

hi, i inserted a dateField component.on clicking it displays calender, i would like to add 2 comboboxes, i shows hours(0 to 23) other for minutes (0 to 59) to calender so tht the user can select the time along with the date and that wil 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 to the calender. thanks in advance. madhu.

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.