Issues with month and year picker in scroll mode

[cmarquis]

Subject of the issue

When in the infinite scroll mode the month and year picker act a bit strange. If your default range is during the current month of the current year the pickers show the month correct but last year rather than this year. Also when using the left/right scroll arrows to jump between months it seems to go back a month on the first click but the second click causes the date grid jump back to last year.

The following screenshot (default start and end date of yesterday):

Produces:

Notice how the year is off in the month and year picker but the grid shows the correct selection.

[BUG] Bug Reproduce Steps

• Create a DateRangePicker with a default range that has a start and end date of yesterday and is set to infinite scroll.
• Display the picker in a browser and notice the year dropdown is last year rather than the current year.
• Use the left/right scroll arrows and notice the grid jumping between last year and this year.

[BUG] Expected behaviour

• The month and year picker should have the correct date to match the range.
• The left/right arrows should go to the correct months.

Environment

Package Version: 1.0.0-beta
React version: 16.4
Node version: 8.9.4
Browser: Chrome 67

[mkg0]

@wethil could you look at it

[wethil]

Sorry for delay, I am working on it

[kesha-antonov]

I have same problem

I see 1918 instead of 2018

[hlmortensen]

Are there any updates on this?

[hlmortensen]

I noticed that when I have scrolling turned on and I scroll a little before doing anything else in the date picker, many of the issues do not appear. It's when I try to use the arrows before doing any scrolling, I see issues. Adding a little auto-scrolling upon page load might help for now.

[wethil]

Sorry I was very busy and couldn't take a look so much. Now I am started to fixing again

[ot-raypeters]

Any update on this?

Perhaps a knowledge dump here may help inspire some open-source contributions :)

[tlr3552]

@cmarquis In this project, do the down arrows render by default within the month/year pickers? If not, any chance you remember how that was done?

[scamden]

@tlr3552 looks like the svg url is getting truncated weirdly,

i add a style override to fix myself

.rdrCalendarWrapper select {
  background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
}

[onurkerimov]

This issue is resolved in the latest release. (1.1.0) Thank you for pointing it out. I'm closing this.

[abdulbasit1248]

Try yearDropdownItemNumber={50}