PrimeNG Angular, year-picker not working as Reactive

Question

am I doing something wrong or is this a bug (middle, year picker not working):

      <!-- Month Control -->
      <input
        type="month"
        view="month" 
        dateFormat="mm" 
      >

      <!-- Year Control -->
      <input
        type="year"
        view="year"
        dateFormat="yy"
      />
      <p-calendar
        view="year"
        dateFormat="yy"
      />

The MONTH control works as a date-picker, the bottom p-calendar year-picker works, but the middle one for year picker does not and only shows as a text-input field.

Is there some specific set of "type" "view", ... etc I am missing that I maybe have not tried yet? Or, is this in fact a bug still/again?

I a thinking the bug-fix 2 years ago only fixed the "formControlName" reactive use with the "p-calendar" for year-picker, not the underlying/complete reactive+yearpicker 'fix' (https://github.com/primefaces/primeng/issues/11223)

--Versions: Angular CLI: 16.2.11 Node: 18.17.1 Package Manager: npm 9.6.7 OS: win32 x64 primeng: 16.9.1

Thanks for advice if I've missed something or confirmation it should be raised as a bug.

Answer 1

I would recommend just using the <p-calendar> as a datepicker.

If you still want to have a dedicated Input for a year you could use regex patterns to validate the Input like this.

    //.ts

    formGroup = new FormGroup({
      year: new FormControl('', {
        validators: Validators.pattern('20[0-2][0-9]'),
      }),
    });

    changedValue(): void {
      const yearInput = this.formGroup.get('year');
      const valid: boolean = yearInput?.errors ? false : true;

      console.log(valid);

      // Do stuff with the input value
    }

    //.html

    <form [formGroup]="formGroup">
        <input formControlName="year" (change)="changedValue()">
    </form>

This would add an error to the FormControl if the input value isnt a number between 2000 and 2029.

Answer 2

HTML does not support "type=year" yet to show just the year. You can make something custom with type=number and provide min max value something like this or use the p-calender.