Пользовательский компонент dateField с comboBox и кнопкой очистки внутри выпадающего календаря в flex3

Question

Я вставил компонент dateField.При нажатии отображается календарь.Я хотел бы добавить 2 комбинированных списка: один показывает часы (от 0 до 23), а другой - минуты (от 0 до 59), чтобы календарь мог выбирать время вместе с датой, и это будет отображаться в тексте.введите как дату и время.Еще одна вещь, которую я хотел бы добавить, это кнопка очистки, чтобы очистить выбранную дату в календаре.

Answer 1

Поскольку DateField по сути является TextInput в сочетании с DateChooser, почему бы не сделать это самостоятельно?Также добавьте два ваших ComboBox, сделайте ваш TextInput editable = "false" text = "{dateTime}", где dateTime - это строковая переменная Bindable, которую вы создаете как объединение значений в DateChooser и двух ComboBox.Вызовите функцию, которая создает строку dateTime для события изменения всех трех входов.

Наконец, добавьте свою кнопку очистки, и ее событие click вызывает функцию, в которой для DateChooser установлено значение сегодня, и два комбинированных списка.установите значения по умолчанию и обновите строку dateTime по мере необходимости (на пустое или на текущую дату / время в зависимости от того, что вы пытаетесь сделать.)

Редактировать: как вы хорошо спросили, и как я учусь дляACE экзамен и думал, что это было хорошим упражнением, вот то, что я придумал.Я сделал следующий пользовательский компонент в пакете с именем «компоненты» и назвал его «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.*" в тег объявления и вставил один * 1009.* Я смог получить доступ к записи в родительском элементе, используя {myDate.dateTime}.

Я сделал несколько предположений о дизайне, которые вы можете решить изменить, как форматтер, и я заменил ваши поля со списком на NumericStepper.