Flex-自定义时间控件
antdesign vue时间类型控件的 formrules填写规则

antdesign vue时间类型控件的formrules填写规则摘要:一、引言二、Ant Design Vue 时间类型控件简介三、FormRules 填写规则概述四、具体填写规则及示例1.必填项规则2.最大值和最小值规则3.输入格式规则4.联动选择规则5.数据验证规则五、总结正文:一、引言Ant Design Vue 是基于Vue.js 3.0 的企业级UI 组件库,提供了丰富的UI 组件和样式,帮助开发者快速构建Web 应用。
在Ant Design Vue 中,时间类型控件是一个非常常用的组件,而在使用时间类型控件时,需要为其设置相应的FormRules 规则,以确保数据的正确性和有效性。
本文将详细介绍Ant Design Vue 时间类型控件的FormRules 填写规则。
二、Ant Design Vue 时间类型控件简介Ant Design Vue 的时间类型控件提供了年、月、日、时、分、秒等多种选择,可以满足不同场景的需求。
时间类型控件的使用非常简单,只需在Vue 模板中引入相应的组件,并通过属性绑定相应的值即可。
三、FormRules 填写规则概述在Ant Design Vue 中,FormRules 是用于表单验证的配置项,可以设置表单项的必填性、最大值和最小值、输入格式、联动选择等规则。
通过合理设置FormRules,可以确保表单数据的正确性和有效性,提高用户体验。
四、具体填写规则及示例1.必填项规则在某些场景下,时间类型控件的数据是必填的。
此时,可以通过设置`required` 属性为`true` 来表示该字段为必填项。
示例:```html<a-date-picker v-model="date" form-item="date" :form-rules="formRules" />``````jsdata() {return {date: "",formRules: [{required: true,message: "请选择日期!",trigger: "blur"}]};},```2.最大值和最小值规则在某些场景下,需要限制时间类型控件的输入范围。
使用flexcell控件的两个技巧

1.flexcell grid如何实现撤销和恢复的功能撤销和恢复确实不是你想像中那么容易做的,下面的程序可以把选中的区域的内容保存到数组,也可以通过这些数组恢复到指定的单元格,通过多个这样的数组可以完成简单的撤销和恢复。
我花了一些时间写了一段程序,用于把剪贴板中的数据保存到数组中,并可从数组中恢复数据。
Option ExplicitPrivate Declare Function GlobalAlloc Lib "KERNEL32" (ByVal wFlags As Long, ByVal dwBytes As Long) As LongPrivate Declare Function GlobalFree Lib "KERNEL32" (ByVal hMem As Long) As Long Private Declare Function GlobalLock Lib "KERNEL32" (ByVal hMem As Long) As Lon g Private Declare Function GlobalUnlock Lib "KERNEL32" (ByVal hMem As Long) As Long Private Declare Function RegisterClipboardFormat Lib "user32" Alias "RegisterClipboardFormatA" (ByVal lpString As String) As LongPrivate Declare Function OpenClipboard Lib "user32" (ByVal hWnd As Long) As Long Private Declare Function CloseClipboard Lib "user32" () As LongPrivate Declare Function GetClipboardData Lib "user32" (ByVal wFormat As Long) As Long Private Declare Function SetClipboardData Lib "user32" (ByVal wFormat As Long, ByVal hMem As Long) As LongPrivate Declare Function EmptyClipboard Lib "user32" () As LongPrivate Declare Function IsClipboardFormatAvailable Lib "user32" (ByVal wFormat As Long) As LongPrivate Declare Sub CopyMemory Lib "KERNEL32" Alias "RtlMoveMemory" (pDst As Any, pSrc As Any, ByVal ByteLen As Long)Private Type ClipBoardDataData1 As LongData2 As LongData3 As LongData4 As LongData5 As LongData6 As LongData7 As LongData8 As LongFlag1 As BooleanFlag2 As BooleanEnd TypePrivate Const GMEM_MOVEABLE = &H2Private Const GMEM_ZEROINIT = &H40Private Const GHND = (GMEM_MOVEABLE Or GMEM_ZEROINIT)Private mlngClipFormat As LongPrivate mstrText As StringPrivate marrData() As BytePrivate mblnHasData As Boolean'这段程序的作用是把Grid.Selection中的内容复制到ClipBoard,然后再把ClipBoard中的数据取出来,复制到marrData和mstrText中去Private Sub Command1_Click()Grid1.Selection.CopyDatamstrText = Clipboard.GetTextDim lngAddress As LongDim lngLength As LongDim ClipData As ClipBoardDataIf IsClipboardFormatAvailable(mlngClipFormat) ThenIf OpenClipboard(0&) ThenlngAddress = GetClipboardData(mlngClipFormat)Call CopyMemory(ClipData, ByVal lngAddress, LenB(ClipData))lngLength = IIf(ClipData.Flag1, ClipData.Data1 * 4, 0) + _IIf(ClipData.Flag2, ClipData.Data2 * 4, 0) + _ClipData.Data2 * ClipData.Data1 * 24 + _ClipData.Data3 * 16 + _ClipData.Data4 * 76 + _ClipData.Data6 * 8 + _ClipData.Data7 * 4 + _ClipData.Data8 + _ClipData.Data5ReDim marrData(LenB(ClipData) + lngLength - 1)Call CopyMemory(ByVal VarPtr(marrData(0)), ClipData, LenB(ClipData)) Call CopyMemory(ByVal (VarPtr(marrData(0)) + LenB(ClipData)), ByVal (lngAddress + LenB(ClipData)), lngLength)Call CloseClipboardmblnHasData = TrueMsgBox "复制完成"End IfEnd If'注意,这里我已经把剪贴板中的数据清除了,你按Ctrl+V将不能粘贴成功Clipboard.ClearEnd Sub'这段程序的作用是把marrData和mstrText中的数据复制到ClipBoard,再粘贴到Grid中去Private Sub Command2_Click()Dim hGlobal As LongDim lpGlobal As LongIf Not mblnHasData ThenExit SubEnd IfIf OpenClipboard(0&) ThenCall EmptyClipboardhGlobal = GlobalAlloc(GHND, UBound(marrData) + 1)If hGlobal ThenlpGlobal = GlobalLock(hGlobal)Call CopyMemory(ByVal lpGlobal, ByVal VarPtr(marrData(0)),UBound(marrData) + 1)Call GlobalUnlock(hGlobal)If SetClipboardData(mlngClipFormat, hGlobal) Then'ElseCall CloseClipboardExit SubEnd IfEnd IfCall CloseClipboardEnd IfClipboard.SetText mstrTextGrid1.Selection.PasteDataMsgBox "粘贴完成"End SubPrivate Sub Form_Load()Grid1.OpenFile "c:\sample.cel"mlngClipFormat = RegisterClipboardFormat("FlexCell5.8.3") '这里要和控件的版本号保持一致End Sub2.如何判断flexcell grid是否处于编辑状态(编辑文本框激活中)这个只能用GetFocus这个API来判断,看看获得焦点的窗口类型是不是TextBox。
el-timeline时间轴样式

el-timeline时间轴样式el-timeline是Element UI框架中的一个时间轴组件,用于在UI中展示时间顺序的流程。
通过样式调整,我们可以对该组件进行个性化定制,以满足不同设计需求。
下面我将为您介绍一些常见的el-timeline样式调整方法。
首先,我们可以通过修改el-timeline的颜色来改变其整体视觉效果。
可以使用CSS中的background-color属性来改变时间轴线的颜色,使其与整个页面的色调相协调。
其次,我们可以调整el-timeline的大小和间距,以适应不同的布局需求。
通过使用CSS中的height、width、margin 和padding等属性,我们可以调整时间轴线的高度、宽度、元素之间的间距以及元素内部的填充,从而达到理想的布局效果。
另外,我们还可以使用时间轴节点的样式来调整其视觉效果。
可以使用CSS中的border-radius属性来设置节点的圆角程度,使其呈现圆形、方形或其他形状。
同时,也可以使用background-color和color属性来设置节点的背景色和文字颜色,以增强其视觉对比度。
最后,我们可以使用时间轴标签的样式来调整其展示效果。
可以使用CSS中的font-size、font-weight和color等属性来改变标签的字体大小、粗细和颜色,使其更加清晰可读。
同时,也可以使用text-align属性来调整标签的文字对齐方式,以保证其在不同屏幕大小下都能保持良好的视觉效果。
综上所述,通过以上这些样式调整方法,我们可以轻松地定制el-timeline组件的样式,以满足各种UI设计需求。
在实际应用中,我们可以结合具体的业务场景和用户群体,灵活运用这些样式调整方法,打造出具有个性和吸引力的时间轴视觉效果。
flex——弹性布局的属性及使用

1.父元素id为flex,子元素class为items#flex {width: 100%;height: 100%;display: flex;padding:15px;padding-top: 200px;border: 1px solid red;box-sizing: border-box;}#flex .items {width: 18%;border: 1px solid blue;height: 200px;}效果如下图2.flex-direction 在flex容器里的所有的block元素的流动方向row 默认,从左到右column 从上到下row-reverse 从右到左column-reverse 从上到下父元素添加flex-direction: row;父元素添加flex-direction:row-reverse父元素添加flex-direction:column父元素添加flex-direction:column-reverse3.flex-wrap 控制如果当前行的位置不足时,是否换行,默认是不换行,会一直在一行中挤压,会改变在该行元素的宽度,将其排在一行之中nowrap 不换行wrap 换行,空间不足,就向下另起一行。
wrap-reverse 换行,与wrap不同的是,这个是向当前行的上面另起一行。
注意:flex-direction和flex-wrap经常一起使用所有有个缩写属性flex-flow:flex-direction flex-wrap。
父元素添加flex-flow:row nowrap;父元素添加flex-flow:row wrap;父元素添加flex-flow:row wrap-reverse;4.justify-content主轴的对齐方式,元素在容器中的对齐方式,与左对齐,右对齐,居中对齐类似取值:flex-start 靠近主轴的开始方向,如果从左到右就靠左,相反就靠右。
flex组件

mx|Application{====常用样式modalTransparency:通过在组件下创建大型半透明叠加层来模拟PopUpManager启动的组件形式。
默认值为0.5.modalTransparencyBlur:模式窗口打开时,应用于应用程序的模糊效果。
模糊效果可以柔化图像的细节。
默认值为3.modalTransparencyColor:模式叠加层的颜色。
默认值为#DDDDDD.modalTransparencyDuration:模式窗口打开或关闭时播放模式透明度效果的持续时间(以毫秒为单位)。
默认值为100.paddingBottom:Application: 容器的下边框与其内容区域之间的像素数目。
默认值为24.paddingTop:Application :容器的上边框与其内容区域之间的像素数目。
默认值为24.backgroundAttachment:如果指定了背景图像,则此样式指定它是相对于视域保持固定状态("fixed") 还是随着内容一起滚动("scroll")。
baseline:从内容区域的上边缘到控件的基线位置的垂直距离(以像素为单位)。
如果设置此样式,则组件的基线锚定在其内容区域的上边缘;调整组件容器大小后,这两个边缘将保持它们的间距。
borderSkin:组件的边框外观类。
在未显式设置其自身默认值的所有组件中,Halo 主题的默认值为mx.borderStyle:边框样式。
可能值为"none"、"solid"、"inset" 和"outset"。
默认值取决于组件类;如果没有覆盖该类的默认值,则默认值为"inset"。
大多数容器的默认值为"none"。
"inset" 和"outset" 值只在halo 主题中有效。
html中flex的用法

html中flex的用法一、Flex布局简介HTML中的Flex布局是一种CSS弹性布局,它允许开发者更轻松地创建响应式布局,使得网页元素能够更加灵活地适应不同的屏幕尺寸和设备类型。
Flex布局提供了更直观的布局方式,能够轻松实现元素的水平和垂直对齐,以及灵活的弹性伸缩。
二、Flex布局的基本概念在HTML中使用Flex布局,需要使用`display`属性将元素设置为`flex`。
这样,元素及其子元素就会按照Flex布局进行排列。
在Flex 布局中,主要涉及以下几个属性:1.`flex-direction`:用于控制主轴的方向,用于指定行或列的方向。
2.`flex-wrap`:用于控制是否允许Flex容器换行。
3.`justify-content`:用于控制主轴上的对齐方式。
4.`align-items`:用于控制垂直对齐方式。
5.`align-content`:用于实现行与行之间的对齐方式,当Flex 布局需要换行时,该属性就变得非常重要。
三、Flex布局的用法示例下面是一个简单的HTML示例,展示了如何使用Flex布局:```html<!DOCTYPEhtml><html><head><style>.container{display:flex;flex-direction:column;align-items:center;height:100vh;}.child{width:50%;margin:10px;}</style></head><body><divclass="container"><divclass="child">Child1</div><divclass="child">Child2</div><divclass="child">Child3</div></div></body></html>```在上面的示例中,我们创建了一个名为`.container`的Flex容器,它包含三个子元素(`.child`)。
MSFlexGrid控件的常用属性

获得或设置FlexGrid的固定(不可滚动)列的总数
FixedRows
获得或设置FlexGrid的固定(不可滚动)行的总数
FocusRect
决定FlexGrid控件是否应该绘制一中心矩形环绕当前单元。取值为:
0 flexFocusNone
1 flexFocusLight
2 flexFocusHeavy
1 flexGridFlat(实线)
2 flexGridInset(突出)
3 flexGridRaised
GridLinesFixed
获得或设置固定行和列的画线的类型。取值为:
0 flexGridNone(无网络线)
1 flexGridFlat(实线)
2 flexGridInset(突出)
3 flexGridRaised(凹陷)
该控件获得焦点时,失去焦点的控件的Validate事件是否发生。取值为:
True发生
False不发生
Clos
决定FlexGrid中的总列数
DataSource
获得或设置控件的数据源
DragIcon
该对象在拖动过程中鼠标的图标
DragMode
该对象的拖动模式,取值为:
0 vbManual(手动)
1 vbAutomatic(自动)
Enabled
用于设定是否对事件产生响应。取值为:
True可用
False不可用。在执行程序时,该对象用灰色显示,并且不响应任何事件
FillStyle
决定是否设置FlexGrid的文本属性或单元格属性之一可以应用到全部已选的单元。取值为:
0 flexFillSingle
1 flexFillRepeat
Flex从入门到精通 第9章

9.3.5 使用Effect.target和Effect.targets属性应用行为效果
在Flex中,可以使用Effect.target和 Effect.targets属性来调用行为效果的目标组件, 特别是在使用play()方法来调用行为效果时。在 MXML中,Effect.target用来调用一个单一的目标 组件。而用Effect.targets来定义一组目标组件。 示例代码如下。在<mx:Zoom>标签中,绑定属性 target的目标组件为按钮控件, target="{myButton2}"。然后,在<mx:Button>标 签上,定义click行为为显示Zoom的行为效果。
9.1.1 运用行为控制(Apply behavior)
编程者需要使用MXML与ActionScript两者来建立 和运用组件的行为效果。在MXML中,可以将行为 效果和触发器联合起来。例如,在下面的代码片 段中,首先定义行为效果WipeLeft其id标识符数 值为“myWL”,并且在1000毫秒中从开始到结束 的。 <mx:WipeLeft id="myWL" duration="1000"/>
9.4.2 使用嵌入的字体显示行为效果
一些行为控制融合、褪色和旋转只能对嵌入的文本产生作 用。如果在带有系统字体的控件上使用这些效果,文本不 会发生任何改变。下面的示例9-8中,带有了两个标签控件, 一个使用嵌入的文字,一个是系统文字。当在这两个标签 控件上应用褪色的行为控制时,系统文字不发生任何改变。 在示例中,首先在ActionScript中定义嵌入的字体 “myFont”,代码如下所示。 @font-face { @font src:local("Arial"); font-family: myFont; }
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Felx 自定义时间控件使用说明能力有限只能写成这样了有需要的朋友请下载使用。
控件外观:展开外观:控件属性:[Bindable]/*** 选中的值*/public var text:String = "";[Bindable]/*** 文本边线是否可见*/public var isVisibleBorder:Boolean = true;[Bindable]/*** 控件图标是否可见*/public var isVisibleImg:Boolean = true;/*** 是否显示时分*/public var IsShowHoursAndMinutes:Boolean = false;/*** 是否显示清空*/public var IsShowClear:Boolean = true;/*** 是否显示今天*/public var IsShowToday:Boolean = true;[Bindable]/*** 是否可以手动输入* 设置手动输入则 FormatStr 格式化将不起作用* 输入日期字符串格式如2012-02-05 或 2012-02-05 11:20:55 */public var IsEditable:Boolean = false;[Bindable]/*** 文本宽度*/public var TxtWidth:Number = 140;[Bindable]/*** 文本高度*/public var TxtHeight:Number = 25;/*** 格式化字符串格式* YYYYMMDDJJNNSS* OR* YYYY-MM-DD JJ:NN:SS* OR* YYYY年MM月DD* 总之必须包含日期格式化字母*/public var FormatStr:String = "";/*** 控件选择的最小年份*/public var MinYear:Number=1899;/*** 控件选择的最大年份*/public var MaxYear:Number=2199;控件源码:组件1. UC_DateField.mxml 页面使用此组件<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx"creationComplete="init()"><s:layout><s:BasicLayout/></s:layout><fx:Declarations><!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations><fx:Script><![CDATA[import mx.controls.Alert;import mx.core.UIComponentGlobals;import mx.events.CloseEvent;import mx.events.ResizeEvent;import mx.managers.ISystemManager;import mx.managers.PopUpManager;//***************************************属性变量开始********************************************[Bindable]/*** 选中的值*/public var text:String = "";[Bindable]/*** 文本边线是否可见*/public var isVisibleBorder:Boolean = true;[Bindable]/*** 控件图标是否可见*/public var isVisibleImg:Boolean = true;/*** 是否显示时分*/public var IsShowHoursAndMinutes:Boolean = false;/*** 是否显示清空*/public var IsShowClear:Boolean = true;/*** 是否显示今天*/public var IsShowToday:Boolean = true;[Bindable]/*** 是否可以手动输入* 设置手动输入则 FormatStr 格式化将不起作用* 输入日期字符串格式如2012-02-05 或 2012-02-05 11:20:55 */public var IsEditable:Boolean = false;[Bindable]/*** 文本宽度*/public var TxtWidth:Number = 140;[Bindable]/*** 文本高度*/public var TxtHeight:Number = 25;/*** 格式化字符串格式* YYYYMMDDJJNNSS* OR* YYYY-MM-DD JJ:NN:SS* OR* YYYY年MM月DD* 总之必须包含日期格式化字母*/public var FormatStr:String = "";/*** 控件选择的最小年份*/public var MinYear:Number=1899;/*** 控件选择的最大年份*/public var MaxYear:Number=2199;/*** 提示信息*/private var MsgTips:String = "";/*** 日期控件*/private var gWin:UC_DateField_Control = new UC_DateField_Control();//***************************************属性变量结束********************************************/*** 加载完成*/private function init():void{//设置是否可以手动输入func_SetIsEditTable();}/*** 打开日期控件*/private function OpenDateUc(event:MouseEvent):void{//判断是都已经弹出if(gWin.visible){//弹出日历控件PopUpManager.addPopUp(gWin,this,true);//设置窗体位置SetPopUpWinXOrY();//设置参数func_SetParement();}else {gWin.visible = true;gWin.includeInLayout = true;}//设置焦点gWin.setFocus();//监听父窗体获取焦点parentApplication.addEventListener(FocusEvent.FOCUS_IN,func_ListenerWinFocusIn );//TextInput 不可用Lbl_DateTime.enabled = false;}//监听执行函数父窗体变化改变用户控件位置private function moveReload(event:ResizeEvent):void{SetPopUpWinXOrY();}/*** 设置参数*/private function func_SetParement():void{//获取页面显示gWin.SelectData = text;gWin.gIsShowHoursAndMinutes = IsShowHoursAndMinutes;//是都显示时分gWin.gIsShowToday = IsShowToday;//是否显示今天gWin.gIsShowClear = IsShowClear;//是否显示清空gWin.gFormatStr = FormatStr.toLocaleUpperCase();//日期格式化字符gWin.gMinYear = MinYear;//最小年限gWin.gMaxYear = MaxYear;//最大年限//监听选择时间事件gWin.addEventListener("DateFieldSelectData",func_GetData);//父窗体变化监听器parentApplication.addEventListener(ResizeEvent.RESIZE,moveReload);}/*** 父窗体获取焦点事件*/private function func_ListenerWinFocusIn(aEvent:FocusEvent):void{//隐藏日期控件-删除监听事件DisplayWin();}/*** 获取当前选择的日期*/private function func_GetData(aEvent:String):void{text = gWin.SelectData;//隐藏日期控件-删除监听事件DisplayWin();}/*** 设置弹出窗体的位置*/private function SetPopUpWinXOrY():void{var point:Point = new Point(unscaledWidth - LBtn_Open.width,0);point = localToGlobal(point);var xVal:Number = point.x;var yVal:Number = point.y;var sm:ISystemManager = systemManager.topLevelSystemManager;var screen:Rectangle = sm.getVisibleApplicationRect();//窗体宽度var gWinWidth:Number = gWin.gWinWidth;//窗体高度var gWinHeight:Number = gWin.gWinHeight;//按钮x坐标点距离var gPointX:Number = point.x;//按钮y坐标点距离var gPointY:Number = point.y;if (screen.right > gWinWidth + gPointX && screen.bottom < gWinHeight + gPointY){//Y轴显示不全xVal = gPointXyVal = gPointY - gWinHeight + unscaledHeight -2;//unscaledHeight 是控件的高度}else if (screen.right < gWinWidth + gPointX && s creen.bottom < gWinHeight + gPointY){//X和Y轴都显示不全xVal = gPointX - gWinWidth + LBtn_Open.width - 3;//-3是希望有3像素间隔yVal = gPointY - gWinHeight + unscaledHeight;//unscaledHeight 是控件的高度}else if (screen.right < gWinWidth + gPointX && s creen.bottom > gWinHeight + gPointY){//X轴显示不全xVal = gPointX - gWinWidth + LBtn_Open.width - 3;//-3是希望有3像素间隔yVal = gPointY;}point.x = xVal;point.y = yVal;gWin.move(point.x, point.y);}/*** 隐藏日期控件-删除监听事件*/private function DisplayWin():void{gWin.visible = false;gWin.includeInLayout = false;//监听父窗体获取焦点parentApplication.removeEventListener(FocusEvent.FOCUS_IN,func_ListenerWinFocu sIn);//回复textinput的可用状态Lbl_DateTime.enabled = true;}/*** 设置是否可以手动输入*/private function func_SetIsEditTable():void{//可以手动输入if(IsEditable){//清空日期格式化字符串FormatStr = "";//日期控件不显示时间IsShowHoursAndMinutes = false;//设置文本输入限制Lbl_DateTime.restrict = "0-9 \\- :";//限制输入长度Lbl_DateTime.maxChars = 10;//监听焦点丢失事件Lbl_DateTime.addEventListener(FocusEvent.FOCUS_OUT,func_TextInputFocusOut);}else{//不可以手动输入Lbl_DateTime.addEventListener(MouseEvent.CLICK,func_TextInputClick);}}/*** 监听文本框焦点丢失事件*/private function func_TextInputFocusOut(aEvent:FocusEvent):void{ //如果验证不通过if(Lbl_DateTime.text != ""&& !func_VilidateDate(Lbl_DateTime.text)){Alert.show(MsgTips,"日期提示",Alert.OK,null,func_DateError,null,Alert.OK);}else{text = Lbl_DateTime.text;}}private function func_DateError(aEvent:CloseEvent):void{Lbl_DateTime.textDisplay.setFocus();}/*** 监听文本框单击事件*/private function func_TextInputClick(aEvent:Event):void{OpenDateUc(null);}/*** 验证时间字符串是否合法* @param aDateStr 如 2012-03-05或 2012-02-05 12:26:35* return Boolean true 合法 false 不合法*/private function func_VilidateDate(aDateStr:String):Boolean{var tRet:Boolean = false;tRet = func_VilidateDateYMD(aDateStr);return tRet;}/*** 验证年月日字符串是否合法* @param aDateStr 如 2012-03-05** return Boolean true 合法 false 不合法*/private function func_VilidateDateYMD(aDateStr:String):Boolean{var tRet:Boolean = true;//正则日期var tRegExp:RegExp =/^[1-2]{1}[0-9]{3}-[0-1]{1}[0-9]{1}-[0-3]{1}[0-9]{1}$/;//当前日期对象var tDate:Date = new Date();//通过正则验证if(func_ValidateExpDate(aDateStr,tRegExp)){var tYera:Number = Number(aDateStr.substr(0,4));var tMonth:Number = Number(aDateStr.substr(5,2));var tDay:Number = Number(aDateStr.substr(8,2));//判断年输入的正确性if(tYera < MinYear || tYera > MaxYear){MsgTips = "日期输入有误:应在"+MinYear+"-"+MaxYear+"年之间";//输入的错误时间改成当前时间text = aDateStr.replace(tYera,tDate.fullYear);return false;}//判断天 1 3 5 7 8 10 12 -- 31天if(tMonth == 1 || tMonth == 3 || tMonth == 5 || tMonth == 7 || tMonth == 8 || tMonth == 10 || tMonth == 12){if(tDay < 1 && tDay > 31){MsgTips = "日期输入有误:"+tYera+"年"+tMonth+"月没有【"+tDay+"】号";//输入的错误时间改成当前时间text = aDateStr.substr(0,8) + "01";return false;}}//判断天 4 6 9 11 -- 30天if(tMonth == 4 || tMonth == 6 || tMonth == 9 || tMonth == 11){if(tDay < 1 && tDay > 30){MsgTips = "日期输入有误:"+tYera+"年"+tMonth+"月没有【"+tDay+"】号";//输入的错误时间改成当前时间text = aDateStr.substr(0,8) + "01";return false;}}//判断天平年 28天闰年29天if(tMonth == 2){if(tYera%4 != 0){if(tDay < 1 || tDay > 28){MsgTips = "日期输入有误:"+tYera+"年"+tMonth+"月没有【"+tDay+"】号";//输入的错误时间改成当前时间text = aDateStr.substr(0,8) + "01";return false;}}else{if(tDay < 1 || tDay > 29){MsgTips = "日期输入有误:"+tYera+"年"+tMonth+"月没有【"+tDay+"】号";//输入的错误时间改成当前时间text = aDateStr.substr(0,8) + "01";return false;}}}}else{MsgTips = "日期格式输入有误:请输入正确格式;\r\n如:2000-01-01";//输入的错误时间改成当前时间text =tDate.fullYear+"-"+setStrAddZero(tDate.month+1)+"-"+setStrAddZero(tDate.date);Lbl_DateTime.text = text;return false;}return tRet;}/*** 验证日期是否合法正则表达式* @param aDate 2012-01-01* @return**/public functionfunc_ValidateExpDate(aDate:String,aRegExp:RegExp):Boolean{var tRet:Boolean = false;try{var tRegExp:RegExp = aRegExp;if (aDate.search(tRegExp) != -1){tRet = true;}}catch(e:Error){}return tRet;}/*** 位数不够补0*/private function setStrAddZero(aIntStr:Number):String{var tRet:String = String(aIntStr);if(tRet.length<2){tRet="0" + tRet;}return tRet;}]]></fx:Script><s:HGroup id="Group_Content" gap="3" verticalAlign="middle"><s:TextInput x="0" y="0" id="Lbl_DateTime" text="{text}"borderVisible="{isVisibleBorder}" editable="{IsEditable}" width="{TxtWidth}" height="{TxtHeight}"/><mx:Image id="LBtn_Open"source="@Embed(source='mx/controls/DateChooser.png')" visible="{isVisibleImg}" includeInLayout="{isVisibleImg}" width="22" buttonMode="true" toolTip="选择日期" click="OpenDateUc(event)"/></s:HGroup></s:Group>组件1. UC_DateField_Control.mxml 弹出组件<?xml version="1.0" encoding="utf-8"?><s:BorderContainer xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx"creationComplete="init()" backgroundColor="0xE4E4E4"><s:layout><s:BasicLayout/></s:layout><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.events.NumericStepperEvent;import mx.managers.PopUpManager;import spark.events.IndexChangeEvent;import spark.events.TextOperationEvent;[Bindable]/*** 选中的值*/public var SelectData:String;[Bindable]/*** 窗体的宽度*/public var gWinWidth:Number = 176;[Bindable]/*** 窗体的高度*/public var gWinHeight:Number = 216;[Bindable]/*** 控件选择的最小年份*/public var gMinYear:Number=1899;[Bindable]/*** 控件选择的最大年份*/public var gMaxYear:Number=2199;/*** 是否首次加载*/private var gIsFirstLoad:Boolean = true;[Bindable]/*** 是否显示时分*/public var gIsShowHoursAndMinutes:Boolean = false;[Bindable]/*** 是否显示清空*/public var gIsShowClear:Boolean = true;[Bindable]/*** 是否显示今天*/public var gIsShowToday:Boolean = true;/*** 格式化字符串格式* YYYYMMDDJJNNSS* OR* YYYY-MM-DD JJ:NN:SS* OR* YYYY年MM月DD* 总之必须包含日期格式化字母*/public var gFormatStr:String = "";/*** 日期对象*/private var gNowTime:Date = new Date();;[Bindable]/*** 星期*/private var weekName:ArrayCollection = new ArrayCollection(["日","一","二","三","四","五","六"]);/*** 页面加载函数*/private function init():void{//首次加载设置默认选择的年和月份if(gIsFirstLoad){NS_Year.value = getTimeByType(1)//当前年NS_Month.value = getTimeByType(2);//当前月NS_Hours.value = getTimeByType(4);//当前小时NS_Minutes.value = getTimeByType(5);//当前分钟//监听年文字变更NS_Year.textDisplay.addEventListener(TextOperationEvent.CHANGE,func_YearTextCh ange);//监听月文字变更NS_Month.textDisplay.addEventListener(TextOperationEvent.CHANGE,func_MonthText Change);}//设置日期setDay();}/*** 年控件文本变更事件*/private function func_YearTextChange(aEvent:TextOperationEvent):void{ if(NS_Year.textDisplay.text.length == 4){NS_Year.value = Number(NS_Year.textDisplay.text);NS_Year_changeHandler(null);}}/*** 年变更事件*/protected function NS_Year_changeHandler(event:Event):void{gNowTime.setFullYear(NS_Year.textDisplay.text,gNowTime.month,gNowTime.date);init();}/*** 月控件文本变更事件*/private function func_MonthTextChange(aEvent:TextOperationEvent):void{ if(NS_Month.textDisplay.text != ""){var tMonth:Number = Number(NS_Month.textDisplay.text);if(tMonth>=1 && tMonth<=12){NS_Month.value = tMonth;NS_Month_changeHandler(null);}}}/*** 月变更事件*/protected function NS_Month_changeHandler(event:Event):void{gNowTime.setFullYear(gNowTime.fullYear,NS_Month.value-1,gNowTime.date);init();}/*** 清空按钮事件*/protected function Lbtn_Clear_clickHandler(event:MouseEvent):void{SelectData = "";//分发事件func_dispatchEvent();}/*** 今天按钮事件*/protected function Lbtn_NowDay_clickHandler(event:MouseEvent):void{var tNowDate:Date = new Date();//年var tYear:String = setStrAddZero(tNowDate.fullYear);//月var tMonth:String = setStrAddZero(tNowDate.month+1);//日var tDay:String = setStrAddZero(tNowDate.date);//小时var tHours:String = setStrAddZero(tNowDate.hours);//分var tMintes:String = setStrAddZero(tNowDate.minutes);//秒var tSeconds:String = setStrAddZero(tNowDate.seconds);SelectData = tYear+"-"+tMonth+"-"+tDay;//是否显示时分秒if(gIsShowHoursAndMinutes){SelectData += " "+tHours+":"+tMintes+":"+tSeconds;}//如果有日期格式化字符串就格式化if(gFormatStr!=""){SelectData =gFormatStr.replace("YYYY",tYear).replace("MM",tMonth).replace("DD",tDay).replace("JJ",tHours).replace("NN",tMintes).replace("SS",tSeconds);}//分发事件func_dispatchEvent();//从新加载gIsFirstLoad = true;init();}/*** 关闭*/protected function Lbl_Close_clickHandler(event:MouseEvent):void{//分发事件func_dispatchEvent();}//**********************************自定义事件****************************************/*** 获取当前选择日期*/public function getDate(aDay:String):void{var tRet:String = "";//年var tYear:String = setStrAddZero(NS_Year.value);//月var tMonth:String = setStrAddZero(NS_Month.value);//日var tDay:String = setStrAddZero(Number(aDay));//小时var tHours:String = setStrAddZero(NS_Hours.value);//分var tMintes:String = setStrAddZero(NS_Minutes.value);//秒var tNowDate:Date = new Date();var tSeconds:String = setStrAddZero(tNowDate.seconds);SelectData = tYear+"-"+tMonth+"-"+tDay;//是否显示时分秒if(gIsShowHoursAndMinutes){SelectData += " "+tHours+":"+tMintes+":"+tSeconds;}//如果有日期格式化字符串就格式化if(gFormatStr!=""){SelectData =gFormatStr.replace("YYYY",tYear).replace("MM",tMonth).replace("DD",tDay).replace(" JJ",tHours).replace("NN",tMintes).replace("SS",tSeconds);}//分发事件func_dispatchEvent();}/*** 设置日期*/private function setDay():void{//当前时间var tTempDate:Date = new Date(NS_Year.value,NS_Month.value,0);//当前月有多少天var tSumDay:Number = tTempDate.date ;//这个月的第一天var tFirstDay:Date = new Date(NS_Year.value,NS_Month.value-1,1);//这个月的第一天星期几var tWDay:Number = tFirstDay.day ;//几号var tTodayNum:Number = getTimeByType(3);//遍历日期var tMDays:ArrayCollection = new ArrayCollection();for(var i:Number=0; i<tSumDay; i++){tMDays.addItem((i+1).toString());}for(i=0; i<tWDay; i++){tMDays.addItemAt(null,0);}List_Days.dataProvider = tMDays;//首次加载设置默认选择的日期if(gIsFirstLoad){List_Days.selectedIndex = tWDay+tTodayNum-1;gIsFirstLoad = false;}}/*** 根据传过来的的时间获取* @param aType 1年 2月 3号 4小时 5分钟*/private function getTimeByType(aType:Number):Number{//返回值变量var tRet:Number;//临时变量-字符串存在下标var tIndex:Number = -1switch(aType){case 1://判断格式化字符串不等于空并且有格式化字符tIndex = gFormatStr.indexOf("YYYY");if( gFormatStr != "" && tIndex != -1){tRet =SelectData.length>=(tIndex+4)?Number(SelectData.substr(tIndex,4)):gNowTime.fullYear ;}else{tRet =SelectData.length>4?Number(SelectData.substr(0,4)):gNowTime.fullYear;}break;case 2://判断格式化字符串不等于空并且有格式化字符tIndex = gFormatStr.indexOf("MM");if( gFormatStr != "" && tIndex != -1){tRet =SelectData.length>=(tIndex+2)?Number(SelectData.substr(tIndex,2)):gNowTime.month+1;}else{var tArray:Array = SelectData.split("-");tRet =tArray.length>1?Number(tArray[1]):gNowTime.month+1;}break;case 3://判断格式化字符串不等于空并且有格式化字符tIndex = gFormatStr.indexOf("DD");if( gFormatStr != "" && tIndex != -1){tRet =SelectData.length>=(tIndex+2)?Number(SelectData.substr(tIndex,2)):gNowTime.date;}else{var tArrayD:Array = SelectData.split("-");tRet =tArrayD.length==3?Number(String(tArrayD[2]).substr(0,2)):gNowTime.date;}break;case 4://判断格式化字符串不等于空并且有格式化字符tIndex = gFormatStr.indexOf("JJ");if( gFormatStr != "" && tIndex != -1){tRet =SelectData.length>=(tIndex+2)?Number(SelectData.substr(tIndex,2)):gNowTime.hours;}else{var tTempH:Array = SelectData.split(" ");if(tTempH.length >= 2){var tArrayH:Array = tTempH[1].split(":");tRet = tArrayH.length>1?tArrayH[0]:gNowTime.hours;}else{tRet = gNowTime.hours;}}break;case 5://判断格式化字符串不等于空并且有格式化字符tIndex = gFormatStr.indexOf("NN");if( gFormatStr != "" && tIndex != -1){tRet =SelectData.length>=(tIndex+2)?Number(SelectData.substr(tIndex,2)):gNowTime.minutes;}else{var tTempM:Array = SelectData.split(" ");if(tTempM.length >= 2){var tArrayM:Array = tTempM[1].split(":");tRet =tArrayM.length>1?tArrayM[1]:gNowTime.minutes;}else{tRet = gNowTime.minutes;}}break;}return tRet;}/*** 分发选择完成事件*/private function func_dispatchEvent():void{dispatchEvent(new Event("DateFieldSelectData"));}/*** 位数不够补0*/private function setStrAddZero(aIntStr:Number):String{var tRet:String = String(aIntStr);if(tRet.length<2){tRet="0" + tRet;}return tRet;}]]></fx:Script><fx:Declarations><!-- 将非可视元素(例如服务、值对象)放在此处 --><mx:Glow id="MouseOverGlow" duration="1000" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="20.0" blurYFrom="0.0" blurYTo="20.0" color="0x22A050"/><mx:Glow id="MouseOutGlow" duration="1000" alphaFrom="0.3" alphaTo="1.0" blurXFrom="20.0" blurXTo="0.0" blurYFrom="20.0" blurYTo="0.0" color="0x3380DD"/></fx:Declarations><s:Group id="DateWin" height="{gWinHeight}"><s:VGroup gap="0"><s:HGroup horizontalAlign="center" width="100%" gap="2" paddingTop="-1" paddingLeft="-1"><s:NumericStepper id="NS_Year" minimum="{gMinYear}"maximum="{gMaxYear}" maxChars="4" width="55" change="NS_Year_changeHandler(event)"/> <s:Label text="年" height="24" verticalAlign="middle"textAlign="center"/><s:NumericStepper id="NS_Month" minimum="1" maximum="12"maxChars="2" width="50" change="NS_Month_changeHandler(event)"/><s:Label text="月" height="24" verticalAlign="middle"textAlign="center"/><mx:Spacer width="100%"/><s:Label id="Lbl_Close" text="关闭" verticalAlign="middle" textAlign="center"height="24" paddingLeft="3" paddingRight="3"rollOverEffect="{MouseOverGlow}"rollOutEffect="{MouseOutGlow}"fontWeight="bold" color="Red" buttonMode="true" toolTip="关闭窗体"click="Lbl_Close_clickHandler(event)"/></s:HGroup><s:List id="Lbl_Days" dataProvider="{weekName}" fontSize="12" borderVisible="false" fontWeight="bold" enabled="false" color="#033FCC"><s:layout><s:TileLayout requestedRowCount="1" requestedColumnCount="7"/> </s:layout><s:itemRenderer><fx:Component><s:ItemRenderer><fx:Script><![CDATA[override public function setdata(value:Object):void {super.data = value;if (value == null) {Lbl_TitleDay.text = null;return;}Lbl_TitleDay.text = String(data);}]]></fx:Script><s:states><s:State name="normal"/></s:states><s:SkinnableContainer><s:Label id="Lbl_TitleDay" width="20" height="20" fontSize="13" textAlign="center" verticalAlign="middle"/></s:SkinnableContainer></s:ItemRenderer></fx:Component></s:itemRenderer></s:List><s:List id="List_Days" fontSize="12" borderVisible="false" height="150" width="176" left="1"><s:layout><s:TileLayout requestedRowCount="6" requestedColumnCount="7" horizontalAlign="center"/></s:layout><s:itemRenderer><fx:Component><s:ItemRenderer><fx:Script><![CDATA[import mx.controls.Alert;override public function setdata(value:Object):void {super.data = value;if (value == null) {Lbl_Day.text = null;Lbl_Day.visible = false;Lbl_Day.includeInLayout = false;return;}else{Lbl_Day.visible = true;Lbl_Day.includeInLayout = true;}Lbl_Day.text = String(data);}/*** 点击日期控件*/public functionLbl_Day_clickHandler(event:MouseEvent):void{outerDocument.getDate(Lbl_Day.text);}]]></fx:Script><s:states><s:State name="normal"/></s:states><s:SkinnableContainer><s:Label id="Lbl_Day" width="20" height="20" fontSize="13" paddingLeft="-5" paddingRight="-5" textAlign="center"verticalAlign="middle" click="Lbl_Day_clickHandler(event)"/></s:SkinnableContainer></s:ItemRenderer></fx:Component></s:itemRenderer></s:List><s:HGroup horizontalAlign="center" width="100%" gap="1" paddingLeft="-1" paddingBottom="-1"><s:HGroup visible="{gIsShowHoursAndMinutes}" gap="1"><s:NumericStepper id="NS_Hours" minimum="0" maximum="23" maxChars="2" width="40"/><s:Label text="时" height="24" verticalAlign="middle"textAlign="center"/><s:NumericStepper id="NS_Minutes" minimum="0" maximum="59" maxChars="2" width="40"/><s:Label text="分" height="24" verticalAlign="middle"textAlign="center"/></s:HGroup><mx:Spacer width="100%"/><s:Group><s:Label id="Lbtn_Clear" text="清空" height="24" paddingLeft="3" paddingRight="3" toolTip="清空日期时间"verticalAlign="middle" textAlign="center" buttonMode="true" fontWeight="bold"rollOverEffect="{MouseOverGlow}"rollOutEffect="{MouseOutGlow}"color="black" backgroundColor="#F1F5FB"click="Lbtn_Clear_clickHandler(event)"/><s:Rect width="100%" height="100%"><s:stroke><s:SolidColorStroke color="#6185D9"/></s:stroke></s:Rect></s:Group><s:Group><s:Label id="Lbtn_NowDay" text="今天" height="24"paddingLeft="3" paddingRight="3" toolTip="选择当前日期时间"verticalAlign="middle" textAlign="center" buttonMode="true" fontWeight="bold"rollOverEffect="{MouseOverGlow}"rollOutEffect="{MouseOutGlow}"color="Red" backgroundColor="#F1F5FB"click="Lbtn_NowDay_clickHandler(event)"/><s:Rect width="100%" height="100%"><s:stroke><s:SolidColorStroke color="#6185D9"/></s:stroke></s:Rect></s:Group></s:HGroup></s:VGroup></s:Group></s:BorderContainer>。