Flex Mobile Development – DateSpinner Sample (with source)!

November 17, 2011By 20 Comments

The next feature I want to highlight in the upcoming Flex 4.6 release is the new DateSpinner control. The DateSpinner allows you to represent and select a date and/or time through a custom-skinned set of SpinnerList controls out of the box in Flex 4.6. Here’s an example:


If you take a look at the DateSpinner.as source code in the SDK, you will see there are a number of SpinnerList controls defined as properties within it to use for repesenting the year, month, day etc to make up this DateSpinner:

 /**
     *  The SpinnerList that shows the year field of the date.
     * 
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6 
     */ 
    protected var yearList:SpinnerList;

    /**
     *  The SpinnerList that shows the month field of the date.
     * 
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6 
     */ 
    protected var monthList:SpinnerList;
    
    /**
     *  The SpinnerList that shows the date field of the date.
     * 
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6 
     */ 
    protected var dateList:SpinnerList;

selectedDate
The current date is shown by default on the DateSpinner control, however you can select a different date by setting the selectedDate property such as in the following where I’m setting the date to the last day of the year (remember the month offset starts at 0 so we would use 11 instead of 12 for the month value):

<s:DateSpinner id="dt" selectedDate="{new Date(2011,11,31)}" displayMode="{rg.selectedValue}"/>

Here’s the result:

displayMode
The displayMode property is used to control what to display in the DateSpinner, and can be set to show the date, time or date and time. The spark.components.calendarClasses.DateSelectorDisplayMode class can be used to set this property to a predefined constant such as shown in the code below:

<?xml version="1.0" encoding="utf-8"?>
<!-- Demonstrates new DateSpinner component -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="DateSpinner Sample">
	<fx:Script>
		<![CDATA[
			import spark.components.calendarClasses.DateSelectorDisplayMode;
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:RadioButtonGroup id="rg"/>
	</fx:Declarations>
	
	<s:layout>
		<s:VerticalLayout paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15" gap="15" 
						  horizontalAlign="center" verticalAlign="top"/>
	</s:layout>
	
	<s:TextArea width="90%" editable="false" skinClass="spark.skins.mobile.TextAreaSkin"
				text="The DateSpinner control is a specific SpinnerList control that can be used to represent and select a date and/or time. The displayMode property controls whether you're selecting the date, time or both date and time. "/>
	
	<s:Label text="Select Display Mode" />
	<s:HGroup>
		<s:RadioButton label="{DateSelectorDisplayMode.DATE_AND_TIME}" groupName="rg" selected="true"/>
		<s:RadioButton label="{DateSelectorDisplayMode.DATE}" groupName="rg"/>
		<s:RadioButton label="{DateSelectorDisplayMode.TIME}" groupName="rg"/>
	</s:HGroup>
	
	<s:HGroup verticalAlign="middle">
		<s:DateSpinner id="dt" displayMode="{rg.selectedValue}"/>			
	</s:HGroup>
	<s:Label text="{dt.selectedDate}"/>
</s:View>

minDate/maxDate
You can specify a minimum or maximum date by using the minDate and maxDate properties to restrict the range of dates shown in the list using code such as the following:

<s:DateSpinner id="dt" minDate="{new Date(2011,06,01)}" maxDate="{new Date(2011,11,31)}" displayMode="{rg.selectedValue}"/>

minuteStepSize
If you’re displaying minutes (using TIME or DATE_AND_TIME mode), there is a minuteStepSize property that can be set to control the minutes increment. Here’s an example of how you would set the minutes to display in 10 minute increments:

<s:DateSpinner id="dt" minuteStepSize="10" minDate="{new Date(2011,06,01)}" maxDate="{new Date(2011,11,31)}" displayMode="{rg.selectedValue}"/>

And a screenshot showing how it displays:

Current Date Color
By default the current (today’s) date is set to a light blue shade as shown in the first screenshot. You can change this color by simply setting an accentColor on your DateSpinner control such as:

<s:DateSpinner id="dt" accentColor="red" minDate="{new Date(2011,06,01)}" maxDate="{new Date(2011,11,31)}" displayMode="{rg.selectedValue}"/>

The result of setting this property is shown below:

Styling the DateSpinner
You can style certain attributes on your DateSpinner to control the font color, indentation, letter spacing etc. Here’s an example showing some properties you may want to customize:

s|DateSpinner
{
	accentColor: magenta;
	color: blue;
	letterSpacing: 5;
	textIndent: 5;
	textDecoration: underline;
}

The result is shown here (not very realistic but you get the idea ;))!

The source code and project for this sample can be found HERE if you’d like to try this out!

Filed in: Adobe FlexFlex 4.5Flex 4.5/MobileFlex 4.6Flex Mobile Tags:

About the Author ()

Comments (20)

Trackback URL | Comments RSS Feed

  1. Adam says:

    Great post :) Its extremely useful. Is there a way to only scroll through the months and days. Like for a daily quote app?

  2. vineet agarwal says:

    Mam I am a regular follower of ur blogs and i respect for u too,
    but i have one personal question

    I come from indian Background and work in a small company,past 6 months i was working on adobe Flash Builder 4.5 and by listening news like Adobe is about to get merge or some of its products are about to get close…..So being a very small investor if it happens i will me and my company will suffer.SO shd i start working on some different platforms or Shd I continue my work…..Please kindly reply me it will be gr88 honour….and what is future perspective please suggest me should I change my working platform of flex or shd i be intact with it …Thank u …

  3. Antonio says:

    Hi, how can i set 24h format on the spinner?
    Thanks

  4. Ivan says:

    Is this possible to hide selected date “glass bar”?

  5. Alexis Desmarais says:

    Any idea for a dateSpinner with 100% with dear devgirl ?

  6. Jacque Reed says:

    Is there a way to get the day included, i.e., Monday, without the time.

  7. Piruthu says:

    Thanks for the article!
    Is it possible to use dateSpinner component in Flash CS5.5?

  8. sekhar says:

    Hi Holly,
    I am trying to place a dateChooser in my mobile application, I donot find any dateChooser option there. when i used it in normal desktop application it works fine but for mobile developement it wont work. Can u plz let me know about any alternative for dateChooser for mobile application developement.?

    Waiting for ue response.
    Sekhar..

  9. sasha says:

    Hi Holly, Thats a nice example…but would like to know is there any other way to display monthly calender as data grid format in flex 4.6 for mobile application?

  10. Alain Levy says:

    As Jacques was asking a few months ago:

    is there a way to display the day name (i.e. Mon, like in the date-and-time example) but without displaying the time.

    Sorry for digging out an old question, but as it has not been answered yet…

    Alain

    • Jacque Reed says:

      Hi Alain,
      I never received any response to my question “Is there a way to display the day name (i.e. Mon, like in the date-and-time example) but without displaying the time.” Is there an easy way to do it?

      Jacque

  11. Fahad says:

    Hi All how can i make the month of January return 1 instead of 0.

  12. Pooja Gupta says:

    Hi Holly,

    I would like to add a background color (different from the default grey) to my DateSpinner control. Please point out how I can do this.

    Thanks in advance.

    Regards,
    Pooja

  13. Neil says:

    Can we add sound to the spinnerlist? How can it be done if it can be done?

  14. Mudassir Hussain says:

    Hi,

    In my application i am using DateSpinner component with displayMode=”dateAndTime”.

    when I slowly move the date spinner to two dates it jumps to next month.

    Please let me know how to fix this issue.
    Thanks in Advance.

    Regards,
    Mudassir Hussain.

  15. Mudassir says:

    Hi, 
    In my application i am using DateSpinner component with displayMode=”dateAndTime”. 

    when I slowly move the date spinner to two dates it jumps to next month. 

    Please let me know how to fix this issue.

    Thanks in Advance.
    Cheers,
    Mudassir Hussain. 

  16. lrj says:

    Hi,how can i use it in a Air Desktop applications?

Leave a Reply