Пользовательский компонент 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 для события change всех трех входов.

Наконец, добавьте свою кнопку "Очистить" и сделайте так, чтобы ее событие 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.*" в теге объявления, и вставил один <cust:myCustomDateFeild id="myDate" />. Я смог получить доступ к записи в родительском с помощью {myDate.dateTime}.

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