加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

flex 日期控件

发布时间：2020-12-15 04:07:15 所属栏目：百科 来源：网络整理
导读：来源： 原创 来源链接： http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html 编程环境： FlashBuilder4 是否解决： 已解决 作品案例类别： 否 组件或控件： 是 官方教程? http://help.adobe.com/zh_CN/flex/using/WS2d
  • 来源：原创
  • 来源链接：http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html
  • 编程环境：FlashBuilder4
  • 是否解决：已解决
  • 作品案例类别：否
  • 组件或控件：是
官方教程? http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/DateField.html#displayedMonth

DateChooser? 控件



DateField 控件? 比上面多了文本输入框



通过下面这个例子简要介绍一下
复制代码
  1. <?xml version="1.0"?>
  2. <!-- controlsdateDateChooserEvent.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4. ????xmlns:s="library://ns.adobe.com/flex/spark"
  5. ????xmlns:mx="library://ns.adobe.com/flex/mx">
  6. ????<fx:Script>
  7. ????????<![CDATA[
  9. ????????import mx.events.CalendarLayoutChangeEvent;
  10. ????????
  11. ????????private function useDate(eventObj:CalendarLayoutChangeEvent):void {
  12. ????????????// Make sure selectedDate is not null.
  13. ????????????if (eventObj.currentTarget.selectedDate == null) {
  14. ????????????????return
  15. ????????????}
  16. ????????????//Access the Date object from the event object.????????
  17. ????????????day.text=eventObj.currentTarget.selectedDate.getDay();
  18. ????????????date.text=eventObj.currentTarget.selectedDate.getDate();
  19. ????????????month.text=eventObj.currentTarget.selectedDate.getMonth() + 1;
  20. ????????????year.text=eventObj.currentTarget.selectedDate.getFullYear();
  21. ????????????
  22. ????????????wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) +
  23. ????????????????"/" + (eventObj.currentTarget.selectedDate.getDate() +????????????
  24. ????????????????"/" + eventObj.currentTarget.selectedDate.getFullYear());
  25. ????????}
  26. ????????]]>
  27. ????</fx:Script>
  28. ????<mx:DateChooser id="date1" change="useDate(event)"/>
  29. ????<mx:Form x="200">
  30. ????????<mx:FormItem label="Day of week">
  31. ????????????<mx:TextInput id="day" width="100"/>
  32. ????????</mx:FormItem>
  33. ????????<mx:FormItem label="Day of month">
  34. ????????????<mx:TextInput id="date" width="100"/>
  35. ????????<mx:FormItem label="Month">
  36. ????????????<mx:TextInput id="month" width="100"/>
  37. ????????<mx:FormItem label="Year">
  38. ????????????<mx:TextInput id="year" width="100"/>
  39. ????????<mx:FormItem label="Date">
  40. ????????????<mx:TextInput id="wholeDate" width="100"/>
  41. ????</mx:Form>??????
  42. </s:Application>



其中 属性 selectedDate.getDay()为得到一星期的第几天，selectedDate.getDate();? selectedDate.getMonth() + 1; selectedDate.getFullYear(); 依次为得到日，月 ，年

注意 月需要+1 因为系统设定 一月为0， 十二月为11。 还有按住ctrl键可以取消选择日期



下面介绍一下如何修改控件的样式

  • headerStyleName
  • weekDayStyleName
  • todayStyleName
复制代码
<!-- controlsdateDateChooserStyles.mxml -->
  • ????
  • ????<fx:Style>
  • ????????.myHeaderStyle{
  • ????????????color:#6666CC;
  • ????????????font-family:Times New Roman,Times,serif;
  • ????????????font-size:16px; font-weight:bold;}
  • ????????.myTodayStyle{
  • ????????????color:#CC6633;
  • ????????????font-size:12px; font-weight:bold;}
  • ????????.myDayStyle{
  • ????????????color:#006600;
  • ????????????font-family:Courier New,Courier,mono;
  • ????????????font-size:15px; font-style:italic; font-weight:bold;}
  • ????</fx:Style>
  • ????<mx:DateChooser
  • ????????headerStyleName="myHeaderStyle"
  • ????????todayStyleName="myTodayStyle"
  • ????????todayColor="#CCCCCC"
  • ????????weekDayStyleName="myDayStyle"/>





    • 下面介绍一下如何指定可选择的区域
    [pre]disabledDays??指定不可选择的某个星期几的数组
    disabledRange 指定不可选择的某天的数组
    selectableRange 指定可选择的某天的数组

    复制代码
    <!-- controlsdateDateChooserSelectable.mxml -->
  • ??<mx:DateChooser
  • ????selectableRange="{{rangeStart: new Date(2006,1),
  • ????????rangeEnd: new Date(2006,2,15)}}"
  • ????disabledRanges="{[new Date(2006,11),247); font-size:12px"> ????????{rangeStart: new Date(2006,23),rangeEnd: new Date(2006,1,10)}]}"
  • ????disabledDays="{[0,6]}"/>





    • 通过mxml标签限定选择区域

    复制代码
    <!-- controlsdateDateChooserDisabledOption.mxml -->
  • ????<!-- Use tags.-->
  • ????<mx:DateField>
  • ????????????<mx:disabledDays>
  • ????????????????<fx:Number>0</fx:Number>
  • ????????????????<fx:Number>6</fx:Number>
  • ????????????</mx:disabledDays>
  • ????</mx:DateField>????
  • ????<!-- Use tag attributes.-->
  • ????<mx:DateField disabledDays="[0,6]"/>
  • </s:Application>




    • 下面通过初始化函数 改变日期的颜色和表头
    复制代码
    <!-- controlsdateDateChooserInitializeEvent.mxml -->
  • ????????????import mx.events.DateChooserEvent;
  • ????????????private function dateChooser_init():void {
  • ????????????????myDC.dayNames=['Sun','Mon','Tue',247); font-size:12px"> ????????????????????'Wed','Th','Fri','Sat'];
  • ????????????????myDC.firstDayOfWeek = 3;
  • ????????????????myDC.setStyle("headerColor",0xff0000);
  • ????????????????myDC.selectableRange = {rangeStart: new Date(2009,247); font-size:12px"> ????????????????????rangeEnd: new Date(2012,10)};
  • ????????????private function onScroll():void {
  • ????????????????myDC.setStyle("fontStyle","italic");
  • ????<mx:DateChooser id="myDC"
  • ????????width="200"
  • ????????creationComplete="dateChooser_init();"
  • ????????scroll="onScroll();"/>
  • </s:Application>





    • selectableRange 属性介绍? 下面的代码创建了2个日期的类 rangeStart:cDate,rangeEnd:cDate，开始和结束日期 。 数据来源为XML id="shows"

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
  • <!-- controlsdateProgrammaticDateChooserSelector.mxml -->
  • ????xmlns:mx="library://ns.adobe.com/flex/mx"
  • ????creationComplete="init()">
  • ????????????private function init():void {
  • ????????????????dc1.displayedMonth = 1;
  • ????????????????dc1.displayedYear = 2008;
  • ????????????}??????????
  • ????????????public function displayDates():void {
  • ????????????????var dateRanges:Array = [];
  • ????????????????for (var i:int=0; i<shows.show.length(); i++) {
  • ????????????????????var cDate:Date =
  • ????????????????????????new Date(shows.show.showDate.toString());??????????
  • ????????????????????var cDateObject:Object =
  • ????????????????????????{rangeStart:cDate,rangeEnd:cDate};
  • ????????????????????dateRanges.push(cDateObject);
  • ????????????????}
  • ????????????????dc1.selectedRanges = dateRanges;
  • ????<!-- Define the data for the DateChooser -->????
  • ????<fx:Declarations>
  • ????<fx:XML id="shows" format="e4x">
  • ????????<data>
  • ????????????<show>
  • ?????????????? <showID>1</showID>
  • ????????????????<showDate>02/28/2008</showDate>
  • ????????????????<showTime>10:45am/11:15am</showTime>
  • ????????????</show>
  • ????????????????<showID>2</showID>
  • ????????????????<showDate>02/23/2008</showDate>
  • ????????????????<showTime>7:00pm</showTime>
  • ????????</data>
  • ????</fx:XML>
  • ????</fx:Declarations>
  • ????<mx:DateChooser id="dc1"
  • ????????showToday="false"
  • ????????creationComplete="displayDates();"/>
  • </s:Application>





    • 例如 限定选择区域为从以前到今天
    复制代码
    caidatatime.selectableRange? ={rangeEnd: new Date()};


    • 指定日期的数据格式? 使用formatString 属性? 指定日期格式 "MM","DD","YY",“YYYY”??? 默认为 "MM/DD/YYYY". 请看下面例子 选择下拉框指定日期格式。
    复制代码
    <!-- controlsdateDateFieldFormat.mxml -->
  • ????<mx:HBox>
  • ????????<mx:ComboBox id="cb1">
  • ????????????<mx:ArrayCollection>
  • ????????????????<fx:String>MM/DD/YY</fx:String>
  • ????????????????<fx:String>MM/DD/YYYY</fx:String>
  • ????????????????<fx:String>DD/MM/YY</fx:String>
  • ????????????????<fx:String>DD/MM/YYYY</fx:String>
  • ????????????????<fx:String>DD MM,YYYY</fx:String>
  • ????????????</mx:ArrayCollection>????
  • ????????</mx:ComboBox>
  • ????????<mx:DateField id="date2"
  • ????????????editable="true"
  • ????????????width="100"
  • ????????????formatString="{cb1.selectedItem}"/>??????
  • ????</mx:HBox>????????
  • </s:Application>




    • 同样可以使用?labelFunction 属性 指定格式化的函数。下面例子 使用 formatDate() 来格式化
    复制代码
    <!-- controlsdateDateChooserFormatter.mxml -->
  • ????????????private function formatDate(date:Date):String {
  • ????????????????return dfconv.format(date);
  • ????????????}??????
  • ????????<mx:DateFormatter id="dfconv" formatString="YYYY/MM/DD"/>
  • ????<mx:DateField id="df" labelFunction="formatDate" parseFunction="{null}"/>
  • </s:Application>




    • labelFunction ?属性 可以指定 是否允许用户在输入框中输入日期? parseFunction 的值设置为 null 即不允许输入

    键盘操作??

    Left Arrow
    Moves the selected date to the previous enabled day in the month. Does not move to the previous month.

    Right Arrow
    Moves the selected date to the next enabled day in the month. Does not move to the next month.

    Up Arrow
    Moves the selected date up the current day of week column to the previous enabled day. Does not move to the previous month.

    Down Arrow
    Moves the selected date down the current day of week column to next enabled day. Does not move to the next month.

    Page Up
    Displays the calendar for the previous month.

    Page Down
    Displays the calendar for the next month.

    Home
    Moves the selection to the first enabled day of the month.

    End
    Moves the selection to the last enabled day of the month.

    +
    Move to the next year.

    -
    Move to the previous year.

    Control+Down Arrow
    DateField only: open the DateChooser control.

    Control+Up Arrow
    DateField only: close the DateChooser control.

    Escape
    DateField only: cancel operation.

    Enter
    DateField only: selects the date and closes the DateChooser control.

    Note: The user must select the control before using navigation keystrokes. In a DateField control,all listed keystrokes work only when the date chooser is displayed.

    http://www.freair.com/bbs/read.php?tid=152

    （编辑：李大同）

    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
      相关内容
        推荐文章
          站长推荐
          热点阅读

            【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

            建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

            Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同