Add User: incorrect years in "Birthdate" date picker

[ceefour]

Add User: incorrect years in "Birthdate" date picker

Description

The years go into the future.

Steps to reproduce

Steps to reproduce the behavior:

1. Click Add user
2. Click on Birthdate
3. The earliest year selectable is 2010. I doubt if any current FusionAuth developers can fill this field ^_^

Expected behavior

Some years ago (perhaps 100 years ago?) up to this year.

Screenshots

Platform

(Please complete the following information)

• Device: Web
• OS: Ubuntu 18.04
• Browser + version: Chrome 81

Additional context

Add any other context about the problem here.

[robotdan]

Bug is likely in the date picker widget.

https://github.com/inversoft/prime.js/blob/master/src/main/js/Widgets/DateTimePicker.js
https://github.com/inversoft/prime.js/blob/master/src/test/js/Widgets.DateTimePickerTest.js

If anyone wants to take a crack at it and fix it, a PR would be great.

[amans330]

@robotdan
• The expected behaviour suggests that the years should start from 100 years ago, that's okay?
• Displaying the list from 1920 might look weird, almost every time people would have to scroll down a lot. A better option would be to have years in decreasing order starting from the current year?

[robotdan]

If you look at the code ( https://github.com/inversoft/prime.js/blob/7ae67b0e586e98f454750c942d1c53bc2983d59a/src/main/js/Widgets/DateTimePicker.js#L256 ) you'll see the intended behavior is to show 10 years in either direction of the current value. I would start with just fixing it so the behavior matches the intention.

[amans330]

@robotdan I think you misunderstood. I corrected the code already, now the year range would be 100 years before the current year to the current year. What I was asking is should I go for 100 years or maybe 90 or 80 years.

[ceefour]

@amans330 I agree for BirthDate, years should be listed decreasing

[robotdan]

@amans330 not sure I follow. Once you have the bug fixed, you can submit a PR and I can look at it, I'm sure your questions ill be clearer once I look at the code. Thanks!

[amans330]

PR --> inversoft/prime.js#25

[robotdan]

We'll be moving to an HTML 5 date picker.

[robotdan]

here is a decent replacement using HTML 5 in a self service form. This just an example, but it will set the min and max age for birthdays based upon the current year.

<div class="form-row">
  [#local currentYear = .now?date?string("YYYY") /]
  [#local minYear = (currentYear?number - 120)  + "-01-01"/]
  [#local maxYear = (currentYear?number - 10) + "-01-01"/]
  <label for="${fieldId}">${label} [#if field.required] <span class="required">*</span>[/#if]</label>
  <input id="${fieldId}" type="date" name="${key}" [#if field.key = "user.birthDate"]min="${minYear}" max="${maxYear}"[/#if]/>
</div>