Primeng: Calendar's 'Relative to today's year' yearRange doesn't work

[ghost]

This simply prints all the numbers provided in range "-nn:+nn" in a loop and doesn't give years relative to today's year i.e. for a year range "-0:+5" it simply prints the numbers from 0 to 5 and not years. See preview:

[GuskiS]

Same here.

[nont65]

+1

[FabioBentoLuiz]

Same here... working just with absolute values:
[yearRange]="('1900:2016')"

[jasonburrows]

+1

[davidkirolos]

+1

[KallumTanton]

+1 Can this be looked into please? I know the documentation only shows the example of absolute but this really isn't suitable for applications that require relative dates.

[KallumTanton]

Just to add to my last comment, here's my work around:

Create a string property:

yearRange: string = (new Date().getFullYear() - 5) + ':' + (new Date().getFullYear() + 30);

Then use this property as the value for the PrimeNG Calendar yearRange property:

[yearRange]="yearRange"

It's a bit long-winded for what could be simply yearRange="c-5:c+30" but it works.

[Mrtcndkn]

Please try with the latest PrimeNG version and comment if the issue still persists.

[mfish0005]

Seems to still exist for me? Maybe I just don't know the syntax. Here's what I've tried

<p-calendar #dob="ngModel" name="dob" [yearNavigator]="true" [monthNavigator]="true" yearRange="this.minDate:this.maxDate" [minDate]="this.minBirthdate" [maxDate]="this.maxBirthdate"></p-calendar>                                                                 

[mfish0005]

This is deja vu...I just ran into the same problem again and apparently I reported it months ago but I guess it went unnoticed.

If I pass the string as a literal yearRange="1902:2012" it works.

I've tried everything I can think of but unless I pass it as a literal the year dropdown shows up empty. My solution was to use Angular Material's datepicker instead.

this.yearRange: string = '';

this.yearRange = (this.minBirthdate.getFullYear()).toString() + ':' + (this.maxBirthdate.getFullYear().toString());

<p-calendar inputStyleClass="input" name="dob" [yearNavigator]="true" [monthNavigator]="true" yearRange="yearRange" required placeholder="Select birthdate..." [(ngModel)]="dob"></p-calendar>

[marob]

Have you tried wrapping yearRange in brackets?

<p-calendar inputStyleClass="input"
                    name="dob"
                    [yearNavigator]="true"
                    [monthNavigator]="true"
                    [yearRange]="yearRange"
                    required
                    placeholder="Select birthdate..."
                    [(ngModel)]="dob"
>
</p-calendar>

[mfish0005]

Yes that works! I didn't understand the significance of the brackets before. Thanks @marob