使用DateField做为ItemRenderer或ItemEditor时,如果输入源是String类型时,使用原始的DateField不能达到目的.所以需要扩展一下:
<?xml version="1.0" encoding="utf-8"?>
<mx:DateField xmlns:mx="http://www.adobe.com/2006/mxml"
editable="true" open="openHandler()" close="closeHandler()">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import mx.controls.Alert;
import mx.controls.dataGridClasses.DataGridListData;
private var _selectedDate:Date = null;
private var _textFormatString:String = "YYYYMMDD";
public function set textFormatString(value:String):void
{
if(value) _textFormatString = value;
}
public function get textFormatString():String
{
return _textFormatString;
}
override public function set formatString(value:String):void
{
if(value == null) {
super.formatString = "YYYY.MM.DD";
} else {
super.formatString = value;
}
}
override public function get formatString():String
{
return super.formatString || "YYYY.MM.DD";
}
override public function set data(value:Object):void
{
var newDate:Date;
if (value is String)
{
newDate = DateField.stringToDate(value as String, textFormatString);
}
else if (value is Date)
{
newDate = value as Date;
}
else if(value != null)
{
var v:Object;
if (listData && listData is DataGridListData)
{
v = value[DataGridListData(listData).dataField];
newDate = v is Date ? v as Date : DateField.stringToDate(v as String, textFormatString);
}
else if (listData is ListData && ListData(listData).labelField in value)
v = value[ListData(listData).labelField];
newDate = v is Date ? v as Date : DateField.stringToDate(v as String, textFormatString);
}
this.selectedDate = newDate;
}
override public function get text():String
{
return DateField.dateToString(this.selectedDate, textFormatString);
}
override public function set text(value:String):void
{
super.text = value; Alert.show(value);
}
override public function get selectedDate():Date
{
return _selectedDate;
}
override public function set selectedDate(value:Date):void
{
super.selectedDate = value;
this._selectedDate = value;
}
private function openHandler():void {
super.open();
super.selectedDate = this.selectedDate;
}
private function closeHandler():void {
super.close();
this.selectedDate = super.selectedDate;
}
]]>
</mx:Script>
</mx:DateField>
分享到:
相关推荐
因此,自定义DateField控件的创建变得尤为重要。本文将深入探讨如何在Flex中自定义DateField,以实现更丰富的功能,例如添加时间选择,并提供源码参考。 自定义DateField控件通常涉及以下几个关键步骤: 1. **扩展...
6. 示例或测试代码:压缩包可能还包含一个简单的示例应用,用来展示如何使用这个自定义DateField控件,以及如何在实际项目中集成它。 对于Flex 4.0版本,这意味着该代码利用了Spark组件库,该库提供了更丰富的组件...
默认显示为中文,这意味着这个组件还考虑到了本地化需求,适应了中国用户的使用习惯。 在Flex中,实现这一功能可能涉及以下步骤: 1. 创建一个新的MXML组件,继承自mx.controls.DateField。 2. 在新组件中覆写默认...
3. **格式化显示**:使用`formatString`属性来定义显示的日期和时间格式。例如,如果希望显示"YYYY-MM-DD HH:MM:SS"格式,可以设置`formatString="yyyy-MM-dd HH:mm:ss"`。 4. **事件监听**:为时间选择组件添加...
1. **类定义**:创建一个新的DateField子类,可能命名为`MonthPicker`,继承自Ext.form.field.DateField。 2. **配置项**:定义新的配置选项,如`allowOnlyMonthYear`,用于开启只选择年月模式。 3. **模板修改**:...
总的来说,`Ext`框架中的`dateField`扩展为开发者提供了强大的工具,使他们能够创建适应各种场景的时间选择控件,不仅满足基本的日期输入需求,还能提供更加精细化和定制化的用户体验。通过深入学习和理解`...
考虑到extjs DateField的关键配置和主要操作
1. **需求分析**:解释为什么需要这种可单独选择年、月、日的dateField,以及清空功能的重要性。 2. **实现原理**:介绍如何利用Ext JS的组件模型和事件机制,修改dateField的默认行为,添加新的选择模式和清空按钮...
在使用ExtJS进行Web开发时,部分开发者可能会遇到这样一个问题:当使用DateField控件时,在Google Chrome浏览器中出现样式错乱或其他显示异常的情况。这主要是因为Chrome浏览器的一些特性和ExtJS中的默认设置之间...
最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以...
DateChooser通常用于为用户提供一个日历选择器,而DateField则是一个文本输入框,显示所选日期并允许用户通过键盘或上下文菜单编辑日期。 首先,让我们深入理解`DateChooser`组件。DateChooser控件在Flex4中提供了...
我们可以为这个组件设置监听事件,当用户选择完时间后,更新DateField的值。 5. **事件监听和处理**: 添加必要的事件监听器,例如监听日期和时间选择的改变,然后更新模型和存储。EXTJS提供了丰富的事件系统,如`...
当我们需要在用户界面中添加带有时间选择功能的日期输入控件时,`Flex 带时间的DateField`就显得尤为重要。这个特殊的DateField不仅能够显示日期,还能让用户选择具体的时间,提升了用户体验。 首先,我们要理解...
在使用这个插件时,首先需要引入相关的CSS和JavaScript文件,这些文件通常位于压缩包中的"Ext DateField控件 - 年月选择插件"目录下。接着,你需要在DateField配置中启用插件,指定显示的格式,如'Y-m',这将确保...
在JavaFX或ExtJS等框架中,我们可以使用内置的日期函数来完成这个计算,例如Java中的 `java.time.Duration` 或JavaScript的 `Date` 对象。 接下来,我们需要将计算得到的时间差整合进数据源。这个数据源可能是数组...
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。 在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用...
在表单中,我们可以像使用普通DateField一样使用我们的ClearableDateField。 ```javascript Ext.create('Ext.form.Panel', { items: [{ xtype: 'clearabledatefield', fieldLabel: '日期' }], renderTo: Ext....
extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...
为了实现自定义的中文日期选择,我们需要做的是扩展DateField类并覆盖其内部的一些关键方法。我们可以创建一个新的MXML组件,继承自DateField,并重写以下部分: 1. **dateFormatter**:这是负责日期格式化和解析的...
通常,这样的博客会包含代码示例,解释如何创建、配置和使用DateField和DateChooser,以及它们在实际项目中的应用场景。 在标签中,“源码”意味着讨论可能深入到软件的内部实现,读者可能会了解到如何查看和理解...