Best Way to Capture Date of Birth and Display Age

Wappler General Need Help
1

Hey gang...

I have to implement a date of birth field... do you think it is best to do it as:

  1. Three separate dropdown inputs [day] [month] [year]
  2. Three separate numeric boxes [DD] [MM] [YYYY]
  3. A date picker

Curious to hear your thoughts!

2

I say keep it simple for yourself with the date picker. I can’t think of an advantage to splitting it into 3 inputs

2 Likes
3

Definitely a Date Picker in my opinion. With the other two you run a real risk of invalid dates ...... eg; February 31 and leap years create an even bigger challenge.

4

I've seen single fields that pre-fill the slashes for the date separator, those are my favourite. I don't know how compliant they are in terms of ARIA (screen readers)

5

I would go with the date picker so long as the year is easily changed. You might also want to set the default date to be something like 20 years ago (01-01-2000 for example) just to speed up the selection process. But they will be able to also type in the date so that should make it the best method.

6

@teodor... is it possible to set an option on the date picker so you can easily select the year you were born in? :thinking:

I can't seem to see an option for this... I can only seem to scroll through month my month...

7

I use a standard date input type, not the datepicker. This uses the browser UI and that includes the ability to type in the date or select the year so I find it to be much better, and more reliable.

1 Like
8

Thanks for that @sitestreet ...

What do you mean by a "standard date input type"? Can I select that in the Wappler GUI or do I put it in by hand?

When I try to insert something in Wappler, I only get date pickers appear using the search term "date"...

Do you mean one of these?

input_date
input_date1046×807 138 KB

9

there's Show Dropdowns option which makes the year and the mont dropdowns for easier selection.

10

I don't 'convert to datepicker' but instead just set it as 'Date':

Screenshot 2024-08-23 at 12.29.52
Screenshot 2024-08-23 at 12.29.52798×370 22.4 KB

11

Thanks for that @teodor... they look a bit odd though on the date picker... its put the year under the month and all left aligned.

(This is with 3.9.7... big 6.8.0 upgrade starts on 1st Sept! :tada: )

dropdowns

12

That's how it looks with the dropdowns enabled:

Screenshot 2024-08-23 at 14.37.49
Screenshot 2024-08-23 at 14.37.492036×1142 151 KB

13

Thanks @Teodor … maybe I have some CSS which is messing around with it! :thinking:

14

Yep!

15

So I did it with the input of type date solution as @sitestreet suggested.

It gives a nice simple text entry but a calendar based possibility too.

I also wanted to display their age, which took a bit of a fiddle to work out how to do... this was the code I ended up with:

(contact.data.contact.dob.daysUntil(current_datetime.datetime)/365).floor()

Thanks for all your input everyone! :tada:

1 Like
16

This might help you ....