Primeng: Dynamic year range support for Calendar

[Ninja-Coding-Git]

<p-calendar [formControl]="form.controls['fieldName']"
                     [monthNavigator]="true"
                     [yearNavigator]="true"
                     [readonlyInput]="true"
                     [maxDate]="maxDate"
                     [yearRange]="'1950:'+maxDate.getFullYear()"
                     [showIcon]="true"></p-calendar>

Dynamic year Range makes default selected Date gone to 1950

Also when default selected Date goes to 1950, all that year (months/days) are disabled, wich is wrong, yearRange starts from 1950 wich should to be enabled to select.

Also when you set maxDate to 5 years ago for example, default selected Date should to be maxDate, not today because all those days/months/years are disabled.

The only way to make it work is to set formControl or ngModel with an initial value, but we want the input with a blank value to force the user set a date.

[amitdahan]

@cagataycivici Is this being worked on? I can push a PR with this fixed.

[amitdahan]

I can think of 2 ways of solving this, either with ngOnChanges for the yearRange @Input, or by using a pipe to transform the yearRange string into an array and use that in the for of loop.

[sanjay-vs]

Anyone found a workaround for this?

[nishantgarg92786]

[monthNavigator]="true"
[yearNavigator]="true"
[readonlyInput]="true"
[maxDate]="maxDate"
[yearRange]=range
[showIcon]="true">
and in ts file
minyear=2018;
maxyear=2022;
range:string=(minyear).toString()+":"+(maxyear).toString();

[sgentile]

I just created a function [yearRange]="getYearRange()"

ie

 getYearRange() {
    const start = moment().subtract(5, 'years').year();
    const end = moment().add(5, 'years').year();
    return `${start}:${end}`;
  }

[Segebre]

I got same idea but it didn't work for me :disappointed:

[antlapit]

This works for me. But this is not the best option. imo.
I use onFocus event to recalculate Calendar component fields.

<p-calendar  #calendar (onFocus)="updateCalendarUI(calendar)" .....>
</p-calendar>

updateCalendarUI(calendar: Calendar) {
        calendar.populateYearOptions(/* year from */, /* year to */);
        calendar.updateUI();
    }

[Sachin124]

How can I bind like this yearRange="{{YearRange}}" using dynamic

[Withnail73]

How can I bind like this yearRange="{{YearRange}}" using dynamic

In case someone's still wondering...

In TS component:

this.yearRange = `${new Date().getFullYear() - 6}:${new Date().getFullYear() + 1}`;

In Html:

[yearRange]="yearRange"

[Zindokar]

How can I bind like this yearRange="{{YearRange}}" using dynamic

In case someone's still wondering...

In TS component:

this.yearRange = `${new Date().getFullYear() - 6}:${new Date().getFullYear() + 1}`;

In Html:

[yearRange]="yearRange"

Hi! I was trying this solution in PrimeNG 8 and angular 8 but it doesn't seem to work. The year navigator it's empty.

HTML

<p-calendar 
  [(ngModel)]="affectedBirthDate" 
  formControlName="affectedBirthDate"
  dateFormat="dd/mm/yy"
  [locale]="es"
  [monthNavigator]="true" 
  [yearNavigator]="true"
  yearRange="yearRange"
  [disabled]="loadingAffected"></p-calendar>

TS constructor

this.yearRange = `${new Date().getFullYear() - 100}:${new Date().getFullYear() + 1}`;

[Withnail73]

Hmm... your range works here in 8. I can't see anything in mine that would make it work over yours...

<p-calendar selectionMode="range" name="daterange" #date='ngModel' [(ngModel)]="search.daterange" [readonlyInput]="true" dateFormat="yyyy-mm-dd" showButtonBar="true" showIcon="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="yearRange"> </p-calendar>

No errors in the console?

I see you have ngModel and formControlName - not sure if that's gonna cause a problem. I think the advice these days is go either with model-driven or reactive forms, not both.

[Withnail73]

oh! you have yearRange="yearRange" instead of [yearRange]="yearRange"

[Zindokar]

oh! you have yearRange="yearRange" instead of [yearRange]="yearRange"

Yes, that was the problem, I thought I had [yearRange]="yearRange"... About model driven and reactive forms I was testing something, but kept only ngModel.

Thanks.