全面认识FlexDateChooser组件

本文和大家重点讨论一下Flex DateChooser组件的使用，Flex DateChooser组件即日期选取组件，它主要用于显示日历和进行某天的选择，使用的是AS中的Date类。

专业从事成都网站设计、网站制作,高端网站制作设计,小程序制作,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务，采用H5开发+CSS3前端渲染技术，响应式网站设计，让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组，与您实时在线互动，随时提供解决方案，畅聊想法和感受。

Flex DateChooser组件

日期选取组件用于显示日历和进行某天的选择，使用的是AS中的Date类。

创建Flex DateChooser组件

下面的例子创建了一个日历组件，并且选中日期为2004年12月22号：

我们还可以通过脚本的方式来设置选中日期

 
 
 
  
  
  1:   
  
  2:  
  
  
3:functioninitDC()    
  
  4:{    
  
  5:date1.selectedDate=newDate(2004,12,12);    
  
  6:}    
  
  7:]]>   
  
  8:   
  
  9:

Flex DateChooser组件使用了AS的Date类的一些方法

可以使用get和set方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了Flex DateChooser组件的使用。

 
 
 
  
  
  1:   
  
  2:  
  
  
3:functionuseDate(eventObj)    
  
  4:{    
  
  5://AccesstheDateobjectfromtheeventobject.    
  
  6:day.text=eventObj.target.selectedDate.getDay();    
  
  7:date.text=eventObj.target.selectedDate.getDate();    
  
  8:month.text=eventObj.target.selectedDate.getMonth();    
  
  9:year.text=eventObj.target.selectedDate.getFullYear();    
  
  10:wholeDate.text=eventObj.target.selectedDate.getFullYear()+    
  
  11:’/’+(eventObj.target.selectedDate.getMonth()+1)+    
  
  12:’/’+eventObj.target.selectedDate.getDate();    
  
  13:}    
  
  14:]]>   
  
  15:   
  
  16:   
  
  17:   
  
  18:   
  
  19:   
  
  20:   
  
  21:   
  
  22:   
  
  23:   
  
  24:   
  
  25:   
  
  26:   
  
  27:   
  
  28:   
  
  29:   
  
  30:   
  
  31:   
  
  32:   
  
  33:

这个例子通过响应组件的change事件来获取选中的日期信息，相信大家也不难看懂。

禁用某个日期段的选取

假如要禁用周一到周四的日期选择，可以使用

更简单的写法为：

1:

或者

 
 
 
  
  
  1:   
  
  2:  
  
  
3:functioninitDC()    
  
  4:{    
  
  5:date1.disabledDays=[1,2,3,4];    
  
  6:}    
  
  7:]]>   
  
  8:   
  
  9:

个人觉得第三种方法比较通用，可以对日历进行初始化的设置。
注意：正确的说法应该是禁用第2～5列的日期。

更改星期名称

Flex DateChooser组件中默认的日历星期名显示为英文，如果要更改成中文名称，可以用：

请注意，如果没有其它设置，数组的第一个元素就表示一周的第一天。当然，最简洁的还是AS的实现方法，而且更加灵活。

 
 
 
  
  
  1:  
  
  
2:date1.dayNames=[’日’,’一’,’二’,’三’,’四’,’五’,’六’];    
  
  3://把周一作为每周的第一天    
  
  4:date1.myDC.firstDayOfWeek=1;    
  
  5://设置日历头部样式为绿色    
  
  6:date1.setStyle(’headerColor’,0x00ff00);    
  
  7://设置字体样式为斜体    
  
  8:date1.setStyle(’fontStyle’,’italic’);    
  
  9://设置日历的选择范围2004.1.1～2004.12.23    
  
  10:date1.selectableRange=    
  
  11:{rangeStart:newDate(2004,1,1),rangeEnd:newDate(2004,12,23)};

Flex DateChooser组件的常用属性和事件还有

 
 
 
  
  
  01:    
  
  02:dayNames//星期的名称显示    
  
  03:disabledDays//不可用的星期    
  
  04:disabledRanges//不可用的日期范围    
  
  05:displayedMonth//当前显示的月份    
  
  06:displayedYear//当前显示的年份    
  
  07:firstDayOfWeek//每周的第一天(0～60表示dayNames中的第一个元素，依次类推)    
  
  08:headerStyle//头部样式    
  
  09:todayStyle//今天的样式    
  
  10:weekDayStyle//周末的样式    
  
  11:monthNames//月份的名称显示    
  
  12:selectableRange//可以选择的日期范围由rangeStart和rangeEnd指定    
  
  13:selectedDate//选中的日期    
  
  14:showToday//是否高亮显示今天的日期    
  
  15:    
  
  16:change//选中日期的事件响应    
  
  17:scroll//移动的事件响应通过对这些属性的设置你可以定义更强大的日历组件了。

网站栏目：全面认识FlexDateChooser组件
网站地址：http://www.shufengxianlan.com/qtweb/news18/143068.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容