Provide way to quickly set year when entering DOB

[shubhangiagarwal76]

🚀 Feature Proposal

There is no feature for selecting the year directly. Provide an arrow for switching years in DOB section.

Example

Each user will be at ease if this feature will be provided

[jackcmeyer]

For anyone interested in working on this issue, our DateTimePicker can use the showYearDropdown prop.

[JDarke]

I'd like to take a shot at this one, please.

[jackcmeyer]

I'd like to take a shot at this one, please.

Sounds great @JDarke!

[JDarke]

Thanks, Jack.

I've got the year dropdown to show, by passing in the showYearDropdown as true in DatePickerWithLabelFormGroup.tsx:

const DatePickerWithLabelFormGroup = (props: Props) => {
  const {
    onChange,
    label,
    name,
    isEditable,
    value,
    isRequired,
    feedback,
    isInvalid,
    maxDate,
  } = props
  const id = `${name}DatePicker`
  return (
    <div className="form-group">
      <Label text={label} htmlFor={id} isRequired={isRequired} />
      <DateTimePicker
        dateFormat="MM/dd/yyyy"
        dateFormatCalendar="LLLL yyyy"
        dropdownMode="scroll"
        maxDate={maxDate}
        selected={value}
        timeIntervals={30}
        withPortal={false}
        disabled={!isEditable}
        feedback={feedback}
        isInvalid={isInvalid}
        showYearDropdown={true}                     /*** NEW LINE ADDED ***/
        onChange={(inputDate) => {
          if (onChange) {
            onChange(inputDate)
          }
        }}
      />
    </div>
  )
}

Does this also require a new test, or is it not needed as the prop is always passed as true? (This only affects DatePicker, not DateTimePicker, so it seems right that we'd always want the year dropdown when picking a date but not a time, yes?)