Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The DateSpinner component allows us to represent and select a date and time through a custom skin set of SpinnerList controls right out of the box in Flex 4.6. And it's made up of a set of SpinnerList controls that can be used to represent these dates and times. Now the displaymode property controls whether we're selecting the date, the time, or both. Let's explore how to use the DateSpinner component. So again, I'm going to go through and I'm going to build a Flex mobile project. Let's call it DateSpinner.
I'm going to use the default Flex SDK. We'll build a Blank application, leave all of the defaults, again, leave all of the defaults, and click Finish, just like so. And then what I'm going to do is inside of the Declarations block, let's build a Radio Button group. So I'm just going to say s:RadioButtonGroup. I'm going to give this an id of rg for radio group, like so. Again, so that's non-visual object, so I'm going to declare it in my Declarations block. And then let's define a layout here.
So I'll just say s:layout, and let's create a VerticalLayout here, and I'll just add again some padding. I'll say, we'll add paddingTop. We'll put in 15 pixels here. I'll say paddingBottom="15" pixels, paddingLeft="15" pixels, and then I'll say paddingRight, again, we'll just be consistent and we'll add that in, and then I'll say let's set up a gap of also 15 pixels there.
We'll set up our horizontalAlign, we'll align that to the center, and then we'll align it vertically to the top. So we'll set that up, and we'll close off our VerticalLayout tag there, close off the layout. And then let's add in a spark label control and inside of that label control, I'll just add in some text, and I'll simply say Select Display Mode, just like so. So there's that. And then I will simply say spark HGroup and then inside of the HGroup there, I'll add in a RadioButton control and I'll say the label of the RadioButton control.
I'll set up a binding, and I'll say label, and I'll say DateSelectorDisplaymode. I'll say DATE_AND_TIME. So this just simply means that we'll show how to link this to the SpinnerList component in just a moment, but give the end user this option here inside of the RadioButton control, and let's link it back to the RadioButton group that we created earlier. So I'll say groupName="rg", and then I'll simply say selected="true." Close that.
And then I'll simply add in another RadioButton, same thing. And I'll say label, and in this case, I'll just simply say label and we'll do the same thing. We'll say DateSelectorDisplaymode. And then we'll simply just say, instead and DATE_AND_TIME, we'll say DATE and then again link that back to my RadioButton group, so they'll have the option to select just the date instead of the date and time.
We'll see how the component will display. And then again, I'll create another RadioButton here and I'll say label, and we'll do the same thing but this time just for the TIME. So I'll say DateSelectorDisplaymode.TIME, and again, link it back to the RadioButton group that we created earlier. So then make sure that those radio buttons are inside of the HGroup. And then after the HGroup, let's create another HGroup. So I'll say s:HGroup. I'll say verticalAlign="middle" there, and then let's create a DateSpinner component in here, and I'll give it an id of, let's call it dt, for date and time.
And then I'll just say displaymode, and these are the display modes that you can set for the DateSpinner component, and those are inside of the radio buttons. So we should just be able to say, if we set up a binding here, we'll just say, set up a binding. I'll save my RadioButton group, and I'll just simply say selectedValue and that should be either DATE_AND_TIME DateSelectormode, DATE or just TIME, depending on what the end user has selected. Close that. And then finally, outside of the HGroup, let's just add in a Label control here.
And I'll say the text property of the label control is equal to dt.selectedDate, just like so. And there is my label control where I have dt.selectedDate. I'll hit Save. So you'll see the errors there. The reason those errors occurred is because we have not imported the classes that we need for the DateSelectorDisplaymode. So if I go and add a script block in here, what I can do is I can say fx:Script right up here and I can simply just say import spark.components.calendarClasses.DateSelectorDisplaymode.
Now as long as you import those classes, when you save it, you should see that that actually eliminates those errors. So now if I go back here and I just simply click on Run Configurations and I set up mobile application and I set this to target my Apple iOS platform, I say on desktop, and I say Apple iPad, let's test this actually on the iPad. Great! So here's what my DateSpinner control would look like with both date and the time selected. And of course, you could see the end user can select the different times.
Now if we just want a date, we can just select that, or if we just want the time, we can select that. So this illustrates the power and the flexibility of the DateSpinner component and how we can set that. So again, don't forget to add those import statements. Now we can also stylize the DateSpinner component by adding a style block and referencing the DateSpinner class. So if I just go here and I say fx:Style and I just simply reference my spark namespace, and then I reference the DateSpinner class, just like so, I can add a custom style in here. So let's try that.
I'll say, for example, accentColor. Oh, I'm feeling creative. Let's see how magenta looks. And then I'll say the color is blue, letterSpacing, let's set that to 5 pixels. And then the textIndent, we'll set that to 5 as well, and then the textDecoration--and of course, all of these are listed in the documentation, but then let's try that for underline.
So I hit Save, and let's see how that styling looks. Okay, so maybe I'm not that creative, but you guys can see that you can apply the styling to the Spinner component by utilizing those CSS classes. Very, very powerful.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92581 Viewers
82 Video lessons · 104155 Viewers
71 Video lessons · 75692 Viewers
56 Video lessons · 107077 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.