Flex 3 mx:DateField 를 사용하여 range(범위)를 주기

mx:DateField를 사용할 경우에 2가지의 property를 사용하여 날짜를 선택하게 하거나 선택하지 못하게 할 수 있습니다.

 

위와 같이 2011년 6월 14일~ 2011년 6월 24일까지 선택하게하고
위의 양 화살표(◀/▶) 버튼을 통해서 이동을 못하게 하려면 어떻게 해야 할까요?



 1. 2011년 6월 14일 ~ 2011년 6월 24일까지만 선택하게 하기

위 방법을 하려면 mx:DateField 컴포넌트의 disabledRanges 프로퍼티를 사용하시면 됩니다.
disabledRanges:Array 입니다.
이 Array 에는 Object가 들어가게 되는데 Map의 형태를 띄고 있는 {rangeStart: new Date(), rangeEnd : new Date() } 가 들어가게 됩니다.

코드를 보게 되면 아래와 같이 나옵니다.

viewDateField.disabledRanges = [ 
	{rangeStart: new Date( 2010, 1, 1 ), rangeEnd: new Date( 2011, 5, 14 )}, 
	{rangeStart: new Date( 2010, 5, 24 )}
];

2. 양 화살표(◀/▶) 버튼을 통해서 이동을 못하게 하기

DateField 컴포넌트의 프로퍼티중 selectableRange:Object를 사용하면 선택할 수 있는 범위를 조절 할 수 있게 됩니다.
이 Object도 위에서 사용한 것처럼 {rangeStart: new Date(), rangeEnd : new Date() } 와 같은 방법으로 쓸 수 있습니다.
다만 이 프로퍼티의 경우에는 Array가 아니라 Object이기때문에 하나의 범위만을 지정할 수 있습니다.

viewDateField.selectableRange = 
	{rangeStart: new Date( 2011, 5, 15 ), rangeEnd: new Date( 2010, 5, 23 )};