How to close the [DatePicker] Calendar while scrolling the page


I am using DatePicker in reactive. When m clicking on input, calendar is opening and now if i will scroll down the page how to close the calendar even without selected any date.

Hi Shrinjala,

Try applying this JS in on ready event of your web block or screen.

document.getElementsByClassName("screen-container")[0].addEventListener('scroll', function() {

  console.log('Scroll event');

  document.getElementsByClassName('pika-lendar')[0].style.display = 'none';


Reference :


Saravanan Santhanam.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.