{"id":619,"date":"2015-03-12T15:56:27","date_gmt":"2015-03-12T22:56:27","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=619"},"modified":"2015-03-12T15:56:27","modified_gmt":"2015-03-12T22:56:27","slug":"using-timepicker-and-datepicker-for-entering-time-and-date-information","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2015\/03\/12\/using-timepicker-and-datepicker-for-entering-time-and-date-information\/","title":{"rendered":"Using TimePicker and DatePicker for entering time and date information"},"content":{"rendered":"

The TimePicker and DatePicker User Interface Controls<\/strong><\/p>\n

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.<\/p>\n

A better solution is to use App Inventors TimePicker<\/em> and DatePicker<\/em> controls. Both provide a graphical method of selecting input values. For example, the TimePicker<\/em> displays the following:<\/p>\n

\"TimeDate_TimePickerUI\"<\/a>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!)<\/p>\n

<\/p>\n

DatePicker<\/em> presents a similar display but instead of hours and minutes, DatePicker<\/em> 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.)<\/p>\n

\"TimeDate_DatePickerUI\"<\/a><\/p>\n

The Designer View<\/strong><\/p>\n

To demonstrate use of TimePicker<\/em> and DatePicker<\/em>, 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:<\/p>\n

\"TimeDateUI-AfterTimePick\"<\/p>\n

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.<\/p>\n

\"TimeDateDesigner\"<\/a><\/p>\n

The item Select Date<\/em> looks like a button control – but it is actually a DatePicker<\/em> control. Select, click and drag the DatePicker<\/em> 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\u00a0TimePicker<\/em>.<\/p>\n

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.<\/p>\n

You also need a Clock<\/em> control, found in the Sensors section of the Palette. Drag the Clock<\/em> control to the canvas. The Clock<\/em> is a non-visible control that appears beneath the app user interface layout.<\/p>\n

Blocks Code<\/strong><\/p>\n

To obtain\u00a0the current date and time, our app calls the Clock1<\/em> control. \u00a0Times 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.<\/p>\n

Step 1 is to obtain the CurrentTime<\/em>. This is done by referencing the Clock1.SystemTime<\/em> property (which is in the millisecond format) and then passing that to the Clock1.MakeInstantFromMills<\/em> method and saving the result in the variable CurrentTime<\/em>.<\/p>\n

Step 2 converts the CurrentTime<\/em> value by\u00a0using additional Clock1<\/em> methods. for the Year<\/em>, Month<\/em> and DayofMonth<\/em>.<\/p>\n

Step 3 obtains the hours and minutes but does so using an alternative method of calling Clock1.Now<\/em> to obtain the current time. (We could have used this in place of the MakeInstantFromMill<\/em> and SystemTime<\/em> method shown above.)<\/p>\n

Both methods are shown in these example blocks:<\/p>\n

\"TimeDateInitialize\"<\/a><\/p>\n

The DatePicker<\/em> is automatically activated when the Set Date<\/em> button is pressed; it is not necessary to call the DatePicker<\/em> or to implement an event handler. Usage is automatic. However, once the date has been selected, an\u00a0.AfterDateSet<\/em> event occurs and this is where code needs to be inserted to make use of the selected date. \u00a0In this example, the selected year, month and day are converted into a text string and displayed on the app screen:<\/p>\n

\"TimeDate_DatePicker\"<\/a><\/p>\n

The TimePicker<\/em> is similar to DatePicker<\/em> – TimePicker<\/em> is activated automatically when the Set Time button is pressed on screen. Once the time has been selected, code processes the AfterTimeSet<\/em> event and obtain the TimePicker1.Hour<\/em> and TimePicker1.Minute<\/em> values.<\/p>\n

We could stop here, if we wished. However, the time is returned in 24 hour time.\u00a0 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<\/em> 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\u00a0to PM.<\/p>\n

\"TimeDate_TimePicker\"<\/a><\/p>\n

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.<\/p>\n

Key Features Shown<\/strong><\/p>\n