Using TimePicker and DatePicker for entering time and date information

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:

TimeDate_TimePickerUIThe 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.)

TimeDate_DatePickerUI

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:

TimeDateUI-AfterTimePick

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.

TimeDateDesigner

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.

Blocks Code

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:

TimeDateInitialize

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:

TimeDate_DatePicker

The TimePicker is similar to DatePickerTimePicker 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.

TimeDate_TimePicker

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.

Downloads

  • 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!

Afterword

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.

16 thoughts on “Using TimePicker and DatePicker for entering time and date information”

    1. Good question Chloe!

      Drag a Join text block in to the blocks editor.

      At the upper left of the Join block is a blue item with a little gear shape inside it. Click on the blue item and you will see a “pop up” menu drawing of the join block.

      At upper left you’ll see “String”. Click on that and drag it to below the 2 “String” items in the right side panel. You can drag as many “String” items as you want to add more join values into the combined string. Give that a try and let us know how that works!

      Ed

  1. please i need a little help.. i’ve been working on an app for a while now .. it’s suppose to have about 90 . It’s a devotional which means i need each content to display on a particular day.. for instance ” as today is 4-5-2016, i have a particular content to display today then tomorrow it will display another content on and on like that…
    in summary a screen for a day , another screen for another day.. please how to i go about it thanks for your anticipated respnse

    1. I wonder if you could use the TinyDB database for this?

      Use the date as the “tag” or key field, which you use to look up the text. Then store the text in the data value.

      Like this:
      Tag = “04-05-2016”
      Value = “text you want to display”

      Tag = “04-06-2016”
      Value = “text you want to display for next day”

      Pre-load the TinyDB with all the values you wish to use.

      Your app would then check the current date and use that to look up the corresponding text value in TinyDB.

      For a basic tutorial on using TinyDB, see
      http://appinventor.pevest.com/?p=58

      How do you get the current date or time? I have not written a tutorial on that (yet) but in the Designer View, drag a Clock component (located in “Sensors”) to your app’s design view. The clock component will appear at the bottom as a “non-visible” component.

      In the Blocks editor, you can reference the clock component – click on Clock under “Components” and see a pop up of events, methods and properties available with the clock. You can find options to obtain the date and time from a current time “instance”. Use Clock1.Now to get a current time (and date) instance.

      I should write up a tutorial on using the Clock! I will add that to my list of topics!

      Ed

    1. Try using these methods:

      number Weekday(InstantInTime instant)
      Returns the day of the week represented as a number from 1 (Sunday) to 7 (Saturday)
      text WeekdayName(InstantInTime instant)
      Returns the name of the day of the week from the instant

      Ed

        1. I may have time later today to post a sample code section for this. If I do, it will appear here on this web site.

          Ed

  2. is there a method to write date and it show the calendar ?
    for example 14/8/1998 and it show the full calendar

Comments are closed.