Date Field - Flex

Dates are used in many fields of Computer Science and as well in daily applications. From a simple Daily Attendance to a Comment system, everywhere date plays a major role. This post also has a date in order to tell the world about the Posted Date. Validation of user-input dates manually by writing code can be quite tricky and hence popular languages provide a user control able to hold dates, only valid dates. Flex uses a DateField to achieve this.

DateField is a combination of a TextInput and a Calendar icon, providing an interactive way of picking up Dates. Clicking on the Calendar icon opens a DateChooser control, which allows the user to select a desired date. This post discusses in detail about using the Date Field effectively. The DateField control is defined as mx.controls.DateField.

To position at desired location (x, y) in the window, the x and y properties can be used. If no x and y are specified, then the DateField is located at (0, 0).

<mx:DateField x="100" y="100"/>

The DateField can be re-sized to any desired dimension using the height and width property. By default the height and width are large enough to hold any selected date.

<mx:DateField x="100" y="100" width="150" height="30"/>

The DateField would look like the one shown below, first one is the default layout and the second one is when expanded.

The names of the days are so short. Aren't they? Those can be given longer names by using the dayNames property. Below shown is an example.

<mx:DateField x="100" y="100" width="150" height="30" dayNames="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"/>

Similar way, the names of the month can also be changed using the monthNames property in the above mentioned format. Values between '[' and ']' are Arrays.

For example assume there exists an data entry system where some one types into some data on a selected date, say Monday to Friday. I wanted to enter only Weekdays not Weekends, not even accidentally. Few days can be disabled in a DateField, let us see how

<mx:DateField x="100" y="100" width="150" height="30" disabledDays="['0', '6']" />

In this case, Sunday and Saturday are disabled, and cannot be selected either.

By default, the controls displays the current month and year, of course these can be changed.

<mx:DateField x="100" y="100" width="150" height="30" displayedMonth="0" displayedYear="2012" />

0 stands for January. This can be useful, when someone selects their date-of-birth. No one born this month or year would operate a computer. Right?:)

Also the range of years that are valid can also be selected using maxYear and minYear properties.

The start day of the week can also be changed.

<mx:DateField x="100" y="100" width="150" height="30" displayedMonth="0" firstDayOfWeek="1" />

Now the week starts on Monday as shown below.

The format of the date being used changes form place to place. The commonly used format is MM/DD/YYYY, but can vary depends on the geographic location. To change the format the following code can be used

<mx:DateField x="100" y="100" width="150" height="30" formatString="DD/MM/YYYY" />

The two formats are shown in the diagram.

As in the above shown figures, always today is shown, I mean highlighted. This can be disabled as well. Also, the navigation for year is not enabled by default. It can be enabled using the below code.

<mx:DateField x="100" y="100" width="150" height="30" showToday="false" yearNavigationEnabled="true" />

By effectively using the aforementioned things, a DateField can be used across multiple applications.

See also,

No comments:

Post a Comment