Angular material date doesn't load past years correctly

Topic: Angular material date doesn't load past years correctly

Brett King pro asked 6 years ago

I'm having an issue where if you have your max year anything less than 2010 when using the angular material date component the year drop down is blank. The following is the object I'm using for initializing the date picker. The intent with these settings is that we don't allow anyone under 18 to apply so we start the max year at the last valid year.

{{ "dateFormat": "mm/dd/yyyy", "disableSince": {year: 2003, month: 10, day: 16}, "disableUntil": {year: 1917, month: 10, day: 14}, "maxYear": 2003, "minYear": 1917 };

Is there any additional properties I need to set? I am using the example project that is provided with the pro download to test this, so it's outside of my application environment. I can provide a zip of that if needed though. I'm using Angular MDBootstrap V 4.3.1

Add comment

Witold Tkaczyk free answered 6 years ago

1 0 Best answer

Hello <a href="https://mdbootstrap.com/support/?user=alanal">Brett King, </a>
We will fix this in next release. If you want to fix this bug temporarily go to <code>[your-path-to-mdb-angular]/pro/date-picker/datepicker.component</code> and replace <code>yearsList</code> function with this:
<pre>yearsList():void{

this.years= [];

constcurrentYear=this.visibleMonth.year;

letfirstYear=currentYear-7>0?currentYear-7:1;

letlastYear=currentYear-7>0?currentYear+7:currentYear+7+firstYear%7;

// firstYear = firstYear < this.opts.minYear ? this.opts.minYear : firstYear;

firstYear=this.opts.minYear;

// lastYear = lastYear > this.opts.maxYear ? this.opts.maxYear : lastYear;

lastYear=this.opts.maxYear;

for (leti=firstYear;i<=lastYear;i++) {

this.years.push(i);

}

</pre>
next, you need to set your default time. You can take solution from <a href="https://mdbootstrap.com/support/howto-programmatically-set-the-date-in-datepicker/">https://mdbootstrap.com/support/howto-programmatically-set-the-date-in-datepicker/</a> but simply replace this:
<pre>ngAfterViewInit(){

setTimeout(() =>this.datePicker.onUserDateInput("2017-10-13"), 0);

}
</pre>
with this:
<pre>ngAfterViewInit(){

setTimeout(()=>this.datePicker.selectDate({year:2003,month:10,day:16}),0);

}</pre>
and it's done.
I hope this will help you.
Regards

Please insert min. 20 characters.

Hello Brett King,

We will fix this in next release. If you want to fix this bug temporarily go to [your-path-to-mdb-angular]/pro/date-picker/datepicker.component and replace yearsList function with this:

yearsList():void{

  this.years= [];

  constcurrentYear=this.visibleMonth.year;

  letfirstYear=currentYear-7>0?currentYear-7:1;

  letlastYear=currentYear-7>0?currentYear+7:currentYear+7+firstYear%7;

  // firstYear = firstYear < this.opts.minYear ? this.opts.minYear : firstYear;

  firstYear=this.opts.minYear;

  // lastYear = lastYear > this.opts.maxYear ? this.opts.maxYear : lastYear;

  lastYear=this.opts.maxYear;

  for (leti=firstYear;i<=lastYear;i++) {

    this.years.push(i);

  }

}

next, you need to set your default time. You can take solution from https://mdbootstrap.com/support/howto-programmatically-set-the-date-in-datepicker/ but simply replace this:

ngAfterViewInit(){


  setTimeout(() =>this.datePicker.onUserDateInput("2017-10-13"), 0);

}

with this:

ngAfterViewInit(){

  setTimeout(()=>this.datePicker.selectDate({year:2003,month:10,day:16}),0);

}

and it's done.

I hope this will help you.

Regards

Brett King pro commented 6 years ago

Thanks! Is there any information on when the next release might be?

Dawid Adach pro commented 6 years ago

Hi Brett, we will release new update soon as Angular 5 is scheduled to be released within few days , therefore we will release new update to adjust MDB to Angular 5.

Felix Vanhoutte pro commented 6 years ago

Hi, We upgraded to the angular 5 version, and this is still not fixed. When will the fix be included in the official pro version? Regards

Damian Gemza staff commented 6 years ago

Hello Felix, Could you describe me, what's wrong to you? I've checked this: I set maxYear to 2003, minYear to 1917, disableSince: 2003 and disableUntil: 1917, and when i click year dropdown, everything is okay (I see years list). Checked this on Angular 5.2.1 and CLI 1.6.5 os Ubuntu 16 x64 and Opera, Chrome, Firefox. Please let me know. Best Regards, Damian

Felix Vanhoutte pro commented 6 years ago

Hello Damian, We are on version 5.1.1 of md bootstrap. In the IMyOptions interface (to create the options object), the properties disableSince and disableUntil are not defined. Also when I look to the source of datepicker.component.ts the old yearsList() function is still used: yearsList(): void { this.years = []; const currentYear = this.visibleMonth.year; let firstYear = currentYear - 7 > 0 ? currentYear - 7 : 1; let lastYear = currentYear - 7 > 0 ? currentYear + 7 : currentYear + 7 + firstYear % 7; firstYear = firstYear this.opts.maxYear ? this.opts.maxYear : lastYear; for (let i = firstYear; i <= lastYear; i++) { this.years.push(i); } } Regards, Felix

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Felix, 1. disableSince and disableUntil are defined in /date-picker/interfaces/options.interface.ts file (lines 21 and 22). They're optional, not obligatory (? sign), 2. you have right - there was old code. In update it will be included new one (code from Witek's comment), 3. Even after update this code, everything is working fine. When i've got maxYear set to 2003, when i click on years dropdown, i see years from 2003 - 1984. It isn't working to you? Or if you update your's yearsList() function with this one from Witek's comment, it works fine?

Felix Vanhoutte pro commented 6 years ago

Hello Damian, 1. I found the disableSince and disableUntil properties, it accepts a date object instead of a number. When I provide such object, it still does not work. 2. I adapted the md bootstrap source with the new yearsList() function, then it does work. But we do not want to make adaptations to 3th party libraries (to prevent update issues in the future). So we are waiting for an official version that has the fix. Thanks! Felix

Damian Gemza staff commented 6 years ago

Felix, in few next days we will release an update. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Brett King

Pro User 0Support score
4Questions 0Answers 0Snippets