2

Is there a UI component for mobile app that lets to select either:

  • Year
  • Month and year
  • Day, month and year?

I need to make a picker for planting date. The user might forget the exact date.

Improve this question
3
  • 2
    There are likely several options based on your system's framework. Consider asking this question in a development forum related to your system.
    – Izquierdo
    Jul 17 '20 at 16:32
  • I'm a developer myself. There's no native option for iOS nor for Android.
    – Andrey Gordeev
    Jul 17 '20 at 16:36
  • Maybe this question would be better suited on Software Recommendations
    – musefan
    Jul 22 '20 at 13:33
3
+25

I think you can do the following to solve this.

Separate the date in 2 fields. Year + Day and Month. You can first ask them the year (mandatory field) and make the other 2 options (month, day) optional or suggest a default based on the data you have from the user based on:

  1. What is the user planting?
  2. When is the recommended first day to plant that crop? (This might provide them some insights when they planted it)
Improve this answer
6
  • I think asking the user to enter 3 values one by one instead of having one field is not user-friendly, especially on mobile devices.
    – Andrey Gordeev
    Jul 20 '20 at 8:41
  • 1
    Yeap, you have a special case here and you need to do some trade-offs. If you make those 2 optional I think that's saving the user 2 taps :)
    – Lonut
    Jul 20 '20 at 8:43
  • 3
    @AndreyGordeev This isn't actually a bad idea, since you want it to be accessible on mobile. You don't have to show all fields at once on the screen. Touching a year will display the months, touch a month will display the days. Each with the option to save the previous without choosing the next. A component that shows the idea (but without the default selected and with a save button): vuetifyjs.com/en/components/date-pickers
    – jazZRo
    Jul 20 '20 at 16:16
  • @jazZRo That sounds much better, thanks. I didn't think that way. Can you please add an answer?
    – Andrey Gordeev
    Jul 20 '20 at 16:21
  • @jazZRo also I couldn't find anything related to what you've described on the page you linked :-/
    – Andrey Gordeev
    Jul 21 '20 at 6:26
0

Seems like there is a big difference between your options, especially if they are just picking a Year.

You can certainly modify an existing UI component that lets you select all three values (i.e. a calendar/date picker UI, which is standard in most development frameworks) and set the validation rules and interactions to mimic this feature, which is by default not set to behave as you have described.

See the date picker element from jQuery UI below:

enter image description here

By default you select a value in the calendar and it sets the day, month and year. But you can turn the Month and Year labels on the calendar into input fields instead of labels to select the Month and Year as well to capture all three inputs.

Even though there is nothing technically challenging about doing this, you might need something to ensure that the user is aware of the exact behaviour of the UI element or else they might get stuck or unable to complete the input. For example, this might be to disable the display of individual days if the Month is not selected (e.g. one of your dropdown values might be "None", in which case you can't select the day).

enter image description here

Improve this answer
2
  • Unfortunately, this kind of UI won't work for mobile, and goes against Apple HIGs.
    – Andrey Gordeev
    Jul 23 '20 at 16:02
  • @AndreyGordeev I guess that means you get to create a new custom component then :D
    – Michael Lai ♦
    Jul 23 '20 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.