Display times in App Designer components

Using App Designer, I want to provide the user of an application with the ability to choose a date and time. The date is easy to achieve with the Date Picker component. I have not been able to find an obvious way to select a time. I could use the Edit Field (Text) component, but that would be too error prone (typos, formatting). I tried to use the Spinner and Edit Field (Numeric) components, but I could not find a way to change the format to a time. The 'ValueDisplayFormat' property of both allows you to create a custom format, but I couldn't figure out how to get a time format in this manner. Is there a way to make that work? I am new to App Designer, so I may be missing something obvious, or maybe App Designer does not give you the flexibility of manual programming or GUIDE. I want to avoid going down one of those paths, but how difficult would it be to make something programatically or using GUIDE to do what I want? How would I then incorporate that into an App Designer project? Are there other ways to allow a user to input times to applications created with App Designer? Maybe some creative way of using the existing components? Can you make your own custom components for use in App Designer? If so, what does that entail? Do people post components in the File Exchange?

Thanks for the help.

Matt

[Peng Li]

"or maybe App Designer does not give you the flexibility of manual programming or GUIDE."

Just a commment that appdesigner definitely gives more flexibility than GUIDE. One example is the access of gui data using GUIDE is annoying as every time you have to remember this. OO offers clearly better way to access class properties.

appdesigner results in similar structure as you manually program an interface based class. If you check the appdesigner code, all interface components are generated within the CreateComponents methods, which is what you need to manually do if you start from scratch.

For the time part, I don't have a better clue. Hope someelse has. What I have done before is to place a simple edit field with some default message like HH:mm:ss to show users how to format the time. But unfortunately matlab doesn't have a good way to make this message a placeholder like what you have in Word/Powerpoint etc.

Answer 1

[Ameer Hamza]

Although the time picker is not available in App designer, the attached app shows a workaround using UITable.

[Matt]

Is there any way to force the text formatting to display both digits in each column in the event that a number from 0-9 is selected from the drop-downs? Also, typing "04" in one of the drop downs, for example, results in the value just reverting to what was there previously (i.e. it doesn't retain that value). Is there any way to get the table to accept that format when typing it into the application?

[Ameer Hamza]

See the attached file. It displays 2 digits for all numbers. For the second issue. I don't think it possible to revert back to the previous value if the user inputs a valid input like '04', because it is not currently possible to distinguish whether callback was generated by the typing on clicking the menu item. However, the attached code shows that if the user enters invalid input, like '30' in hours column, it will be reverted to last value.

[Matt]

What I meant by that second comment was that if you type "04" and press enter or tab (in the first app), that input is not accepted because the only valid values are numeric values. The field in which you typed "04" reverts back to whatever value was present previously. Now, in the second updated app, the input to the table is formatted as text, so the reverse is true. If you type "04" and press enter or tab, the value is accepted. If you type "4" and press enter or tab, the value reverts back to whatever value was present previously. Is there any way around this, where you could enter either "04" or "4" and have the cell display "04" in either case?

[Ameer Hamza]

Please check the attached app. It accepts any valid number, like 4 and 04, and convert it to 04. You can add any logic in the callback function.

[Matt]

Unfortunately, I do not see any change when running that compared to the previous example. If I enter 18 for hours, 35 for minutes, and 23 for seconds, then click in the Hours field, then type "4", the 4 is visible in the field. But when I press tab or enter, the field immediately goes back to 18. If I type "04" and press tab or enter, "04" remains in the field.

[Ameer Hamza]

I don't get this type of behavior. The gif shows that if I enter a single-digit number, it retains. I have made some unrelated changes in the attached app file. Please try this.

[Matt]

Thanks for putting that gif in. I'm not double clicking to highlight the text. If you run the app, single click the "Hour" cell, type "4" and press enter or tab, the original value of 01 returns immediately. That is the quickest way of entering information, so I imagine that is what people will do.

[Ameer Hamza]

Ok. I get the problem now. Please check the attached app.

[Matt]

Thanks for following up. I'm still seeing the same issue.

1. Run app
2. Single-click the "01" under "Hour"
3. Type "4". Single "4" appears and automatically opens the drop down menu.
4. Press tab or enter. "4" is automatically replaced with "01" and drop down menu disappears.

With this most recent iteration, I also noticed that double-clicking "01" and replacing it with "4" and pressing tab or enter also results in the value reverting to "01".

[Ameer Hamza]

Pressing Tab key does not do anything in my case. I am using a macOS, and there might be a difference between platforms. However, pressing enter after typing a 4 does not revert back to 01. Please see this gif. You can consider adding breakpoints in the callback function and see what are the values of variables after you change the value in any cell

[Matt]

I ended up using 3 spinner components side-by-side as a workaround. I was able to enter values the way I wanted on my system.