2011-01-31 2 views
0

Мы используем mx: DateField для наших дат и editable = "true", чтобы мы могли либо выбрать дату, либо ввести ее. Требование состоит в том, чтобы мы не могли ввести более 10 символов в этом поле (10/10/2010). Но DateField не обладает свойством maxChars, чтобы ограничить это.Flex DateField/DateChooser Issue

Итак, мы попытались использовать текстовое поле + DateChooser, чтобы ограничить количество символов. Все работает по своему желанию, но проблема в том, что DateChooser показывает весь календарь на странице, а не как значок календаря, который будет отображаться в календаре (как DateField).

Так что теперь мой д является

1) Использование DateField, как я могу ограничить количество символов, которые можно ввести в текстовом поле 10

или

2) Использование DateChooser, как я могу изменить внешний вид его, чтобы показать значок календаря, а затем показать календарь как всплывающее окно при нажатии на него (похоже на DateField).

Если кто-нибудь может мне помочь в этом, это было бы замечательно.

ответ

2

Начать с чем-то вроде этого:

<s:TextInput click="dc.visible=!dc.visible" maxChars="10" /> 
<mx:DateChooser id="dc" visible="false" /> 

Отсюда вам просто нужно обрабатывать события нажатия на выбор даты и заполните TextInput соответствующим

UPDATE: В попытке ответить на ваши вопросы от комментариев

UI:

<s:HGroup> 
    <s:TextInput id="dateInput" click="dateInput_clickHandler(event)" maxChars="10" /> 
    <mx:DateChooser id="dc" visible="false" includeInLayout="false" change="dc_changeHandler(event)" /> 
</s:HGroup> 

Сценарий:

protected function dateInput_clickHandler(event:MouseEvent):void 
{ 
    dc.includeInLayout = !dc.includeInLayout; 
    dc.visible = !dc.visible; 
} 

protected function dc_changeHandler(event:CalendarLayoutChangeEvent):void 
{  
    dateInput.text = dateFormatter.format(event.newDate); 
    dateInput_clickHandler(null); 
} 

Объявление:

<mx:DateFormatter id="dateFormatter" formatString="MM/DD/YYYY" /> 

Надеется, что это помогает! -Ian

+0

Спасибо за ваш ответ Totec. Ценить это. Это работает, но тогда нам нужно показать значок (или что-то подобное) рядом с текстовым полем, чтобы пользователи знали, что им нужно щелкнуть по нему, чтобы показать календарь, а также изменить поле даты. Есть идеи по этому поводу? – Harry

+0

@Harish: Создайте собственный скин для вашего TextInput на основе скина по умолчанию и добавьте свой значок. –

+0

Я согласен с wade. Создайте собственный скин для TextInput. В разделе (внизу) после компонента RichEditableText добавьте изображение для значка календаря. –