<?xml version="1.0" encoding="utf-8"?>

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" title="DateSpinner Sample" xmlns:components="components.*">

<fx:Script>

<![CDATA[

import views.SnippetView;

import spark.components.calendarClasses.DateSelectorDisplayMode;

]]>

</fx:Script>

<fx:Declarations>

<s:RadioButtonGroup id="rg"/>

</fx:Declarations>

<s:navigationContent>

<s:Button label="Snippet" click="navigator.pushView(views.SnippetView,data)"/>

<s:Button label="Tutorial" click="navigateToURL(new URLRequest(data.tutorial))"/>

</s:navigationContent>

<s:layout>

<s:VerticalLayout paddingTop="100" paddingBottom="15" paddingLeft="15" paddingRight="15" gap="25" 

  horizontalAlign="center" verticalAlign="top"/>

</s:layout>

<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" minDate="{new Date(2011,06,01)}" maxDate="{new Date(2011,11,31)}" displayMode="{rg.selectedValue}"/>

</s:HGroup>

<s:Label text="{dt.selectedDate}"/>

<components:QuestionBlock bottom="40" horizontalCenter="0" questionData="{data}"/>

</s:View>