The TimePicker and DatePicker User Interface Controls
Entering the date and time are common features of business applications. We could use a text edit box and let the user type in times (like 10:30) or dates (12 January 2015) but both methods require the user to enter the time or date in the proper format – and the app needs to test the entered data to ensure it was entered correctly.
A better solution is to use App Inventors TimePicker and DatePicker controls. Both provide a graphical method of selecting input values. For example, the TimePicker displays the following:
The time is set by pressing the + or – buttons above and below the hours and minutes. The AM/PM indicator is a toggle – when it shows PM, a press changes it to AM, and when it shows AM, a press changes it to PM. With this input system, the user can never entered an invalid time (the user could, of course, enter the wrong time, but that is a different problem!)
DatePicker presents a similar display but instead of hours and minutes, DatePicker shows month, day of month, and the year. (I suspect this control follows the date format specified for the device – some countries write dates as month/day/year and some write dates as day/month/year. I did not check to see if this is the case but am guessing the control follows the country format specified for the device.)
The Designer View
To demonstrate use of TimePicker and DatePicker, I created this simple program with a button press to select a date and another to select the time. After selecting either the date or time, the value selected is displayed on screen:
This screen layout (see below) is defined using a vertical layout inside of a horizontal layout, at top, and then a two horizontal layouts inside a vertical layout where the values are displayed on the screen.
The item Select Date looks like a button control – but it is actually a DatePicker control. Select, click and drag the DatePicker control from the User Interface Palette in the App Inventor Designer, and then drop it on to the app design canvas. Do the same for TimePicker.
Then, select the control on the canvas (click with your mouse) and go over to the Text field in the Properties area and change the text to read “Select Date” or “Select Time” depending on the control.
You also need a Clock control, found in the Sensors section of the Palette. Drag the Clock control to the canvas. The Clock is a non-visible control that appears beneath the app user interface layout.
To obtain the current date and time, our app calls the Clock1 control. Times are stored in an internal format that is based on milliseconds, since the year 1970. This peculiar format is produced by the Clock control but must be converted into year, month, day, and hour and minute values.
Step 1 is to obtain the CurrentTime. This is done by referencing the Clock1.SystemTime property (which is in the millisecond format) and then passing that to the Clock1.MakeInstantFromMills method and saving the result in the variable CurrentTime.
Step 2 converts the CurrentTime value by using additional Clock1 methods. for the Year, Month and DayofMonth.
Step 3 obtains the hours and minutes but does so using an alternative method of calling Clock1.Now to obtain the current time. (We could have used this in place of the MakeInstantFromMill and SystemTime method shown above.)
Both methods are shown in these example blocks:
The DatePicker is automatically activated when the Set Date button is pressed; it is not necessary to call the DatePicker or to implement an event handler. Usage is automatic. However, once the date has been selected, an .AfterDateSet event occurs and this is where code needs to be inserted to make use of the selected date. In this example, the selected year, month and day are converted into a text string and displayed on the app screen:
The TimePicker is similar to DatePicker – TimePicker is activated automatically when the Set Time button is pressed on screen. Once the time has been selected, code processes the AfterTimeSet event and obtain the TimePicker1.Hour and TimePicker1.Minute values.
We could stop here, if we wished. However, the time is returned in 24 hour time. Extra code has been added to reformat the time into the familiar 12-hour HH:MM AM or PM format. The if-then, else-if-then, else-if-then compound blocks perform the conversion of the 24 hour time to 12 hour time, and set the AM or PM indicator. You may notice we never set the AM indication – that’s because the indicator is initially set to AM. Only if the time is greater than 12 noon is the indicator changed to PM.
With this code, you have the pieces for entering dates and times. In a business oriented application, these values might be stored in a TinyDB or a Google Fusion table.
Key Features Shown
- Use of the TimePicker and DatePicker in the user interface design
- Processing the return values from both TimePicker and DatePicker
- How to convert the 24-hour time into 12-hour AM/PM format.
- TimeDate.aia App Inventor source file
- Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”
Please Share on Social Media
Please click on the buttons below this post to share with your friends on Facebook or other social media.
If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!
A couple of weeks back, I had an ear problem that left me dizzy for a few days. That cleared up, fortunately. Then I was on a short vacation, got back, and promptly got sick with a terrific cold. Only just now climbing back from that. Anyway, that’s why posting here has been sparse, plus with my time intensive volunteer robotics work at a local high school going on until 2 weeks ago too.