Ionic2-Calendar icon indicating copy to clipboard operation
Ionic2-Calendar copied to clipboard

Next and Back button click event not working

Open NIYASSURABHI opened this issue 5 years ago • 11 comments

I'am using two arrow buttons to navigate next/prev month. using

var mySwiper = document.querySelector('.swiper-container')['swiper'];
mySwiper.slideNext();

But its not working in my ionic4 (Angular8) Application. Please help me on this

NIYASSURABHI avatar Dec 02 '19 11:12 NIYASSURABHI

@NIYASSURABHI How is it not working? Any error message printed out in the console? This is just a simply DOM query, could you check the DOM structure to if the queried element exists ('.swiper-container')?

twinssbc avatar Dec 02 '19 14:12 twinssbc

�@NIYASSURABHI How is it not working? Any error message printed out in the console? This is just a simply DOM query, could you check the DOM structure to if the queried element exists ('.swiper-container')?

When i console the swiper , the active index is changing. But view is not changing. Normal swiping is working

NIYASSURABHI avatar Dec 03 '19 04:12 NIYASSURABHI

I have fixed this issue by changing current date as you said in another issue. this.calendar.currentDate = new Date(this.calendar.currentDate.setMonth(this.calendar.currentDate.getMonth() + 1));

But i noticed another situation that, when i click right navigation from January 31 its showing march 2 (because February have only 29 days) .this issue is happening on several months because some have 30 and some have 31. How can i handle this situation?

NIYASSURABHI avatar Dec 03 '19 06:12 NIYASSURABHI

@NIYASSURABHI You could set the date to some day in the middle of the month so that it won't cause such edge case. Another way is you could check after setting the month, whether the month is the expected one, if not, adjust the date to the expected month.

twinssbc avatar Dec 04 '19 00:12 twinssbc

@NIYASSURABHI You could set the date to some day in the middle of the month so that it won't cause such edge case. Another way is you could check after setting the month, whether the month is the expected one, if not, adjust the date to the expected month.

Do u have any workaround to handle this. it will be very helpful for me

NIYASSURABHI avatar Dec 05 '19 08:12 NIYASSURABHI

"Another way is you could check after setting the month, whether the month is the expected one, if not, adjust the date to the expected month."

How can i do this? Can u please give a guidance?

NIYASSURABHI avatar Dec 06 '19 09:12 NIYASSURABHI

var cuurentday=this.calendar.currentDate; let currentMonth = cuurentday.getMonth();
let nextMonth = new Date(cuurentday.setMonth(cuurentday.getMonth() + 1)); debugger

if(nextMonth.getMonth()-currentMonth>1){
  this.calendar.currentDate = new Date(this.calendar.currentDate.getFullYear(),currentMonth+1, 0);
 }
 else{

  this.calendar.currentDate = new Date(this.calendar.currentDate.setMonth(this.calendar.currentDate.getMonth() + 1));

// }

i have tried with this logic..but its jumping to next 2 months

NIYASSURABHI avatar Dec 06 '19 13:12 NIYASSURABHI

I am also getting the below error when clicking on next or previous: ERROR TypeError: Cannot read property 'swiper' of null

And I am also not able to see any generated elements inside the DOM. image

Please guide me in this.

Fresh-Dev-zunairzakir avatar Dec 06 '19 14:12 Fresh-Dev-zunairzakir

@Fresh-Dev-zunairzakir Did you import the NgCalendarModule in module file? This looks like the calendar element is not recognized.

twinssbc avatar Dec 09 '19 15:12 twinssbc

@NIYASSURABHI You need to add more logic to avoid edge case, for example always set the date to some day in the middle of the month, instead the first and last day. For example, new Date(2019,01,31) return Mar 03, instead of some day in Febuary.

twinssbc avatar Dec 09 '19 15:12 twinssbc

Do you sloved this problem ? I have also problem with next prev button navigation. Sometimes it works but mostly not... it's hard to say why it's false..

insidew avatar Dec 18 '19 14:12 insidew