Topic: Date Picker close when clicked outside of the datepicker

We normally seen other date pickers,which actually close when we click outside of the date picker.

So i thought to implement the same here in our FA with js. So just tried this and it works fine. Hope it will be good for users, if you commit it to core.

window.addEventListener('click', function(e){   
  if (document.getElementById('CC').contains(e.target)){} else{
   if (cC.visible()) {
    cC.hide();
      }
  }
});

Append this code to date_picker.js file,which actually created from ui_view.inc

Re: Date Picker close when clicked outside of the datepicker

There is a "Back" link on the calendar display that does it but your method may be useful too - hope it will not clash when multiple date fields are on the same form.

@joe: Attached is the code change in includes/ui/ui_view.inc needed to have the date_picker.js recreated on js cache purge.

Post's attachments

includes-ui-ui_view.zip 35.8 kb, 3 downloads since 2019-01-05 

You don't have the permssions to download the attachments of this post.

Re: Date Picker close when clicked outside of the datepicker

Hello Guys,

This has been committed to stable repo. Thanks @kvvaradha and @apmuthu.

The fixed file can be downloaded here.

Joe

4 (edited by kvvaradha 01/05/2019 10:57:43 am)

Re: Date Picker close when clicked outside of the datepicker

That's nice to see. 

@apmuthu,actually if you open another date picker, its outside of current one. So the already opened date picker will be closed before opens the new one.

I guess that wont be much difficult for the users to work on.

Re: Date Picker close when clicked outside of the datepicker

kvvaradha wrote:

We normally seen other date pickers,which actually close when we click outside of the date picker.

So i thought to implement the same here in our FA with js. So just tried this and it works fine. Hope it will be good for users, if you commit it to core.

window.addEventListener('click', function(e){   
  if (document.getElementById('CC').contains(e.target)){} else{
   if (cC.visible()) {
    cC.hide();
      }
  }
});

Append this code to date_picker.js file,which actually created from ui_view.inc

Re: Date Picker close when clicked outside of the datepicker

Hello kvvaradha,
I'm working on some bootstrap theme(s), where I'm faced with below issue;

-> the theme works fine, but the datepicker creates issues ;
  - clicked for any forms having the date picker ; the top nav bar comes down ,
  - when want to select date ; the date picker is out from its place - on upper of top navbar,
  -  AND  all the issues are solved and the theme is re-positioned well  , once the date is selected from the date picker...

Any solution ?...

Thanks in advance...
A.P

Re: Date Picker close when clicked outside of the datepicker

Bootstrap implementation may have other working scripts for datepicker.