Flex DateField / DateChooser 问题答案

【问题标题】：Flex DateField / DateChooser IssueFlex DateField / DateChooser 问题
【发布时间】：2011-01-31 19:59:39
【问题描述】：

我们使用 mx:DateField 作为我们的 Dates 和 editable="true" 以便我们可以选择一个日期或输入它。要求是我们不能在此字段中输入超过 10 个字符（2010 年 10 月 10 日）。但是 DateField 没有 maxChars 属性来限制它。

所以我们尝试使用 Text Field + DateChooser 来限制字符数。一切都按预期工作，但问题是 DateChooser 在页面上显示整个日历，而不是作为会弹出日历的日历图标（作为 DateField）。

所以现在我的 q 是

1) 使用 DateField，如何将文本字段中可以输入的字符数限制为 10

或

2) 使用 DateChooser，如何更改它的外观以显示日历图标，然后在单击它时将日历显示为弹出窗口（类似于 DateField）。

如果有人能在这方面帮助我，那就太好了。

【问题讨论】：

标签： apache-flex datefield datechooser

【解决方案1】：

从这样的开始：

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

从这里你只需要处理日期选择器的点击事件并适当地填写文本输入

更新：试图回答您来自 cmets 的问题

用户界面：

<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" />

希望这会有所帮助！ -伊恩

【讨论】：

感谢您的回复 Totec。欣赏它。这可行，但是我们需要在文本字段旁边显示一个图标（或类似的东西），以便用户知道他们必须单击它才能显示日历并编辑日期字段。有什么想法吗？
@Harish：根据默认皮肤为您的 TextInput 创建自定义皮肤并添加您的图标。
我同意韦德的观点。为 TextInput 创建自定义外观。在 RichEditableText 组件后的部分（底部）下，添加日历图标的图像。
好的，我可以不用日历图标。但现在我有另一个问题。 DateChooser 占据了 Text Box 下方的大量空间（visible = false，但它仍然需要空间来容纳 DateChooser 组件），当一个表单中有 3-4 个日期字段时，它看起来很尴尬。那么有没有办法在 DateChooser 不可见或将其显示为 Popup 时折叠它？这样它就不会用完文本字段后面的空间？
真棒伊恩。简单的。谢谢。还有1个问题。单击 TextField 后，日历会出现在其下方，但它看起来很杂乱（在其他组件后面），因为还有其他组件（文本字段）。有没有办法在其他组件之上显示日历？