Topic: Applying datepicker to hidden field/container
I need a hidden datepicker field, which appears on demand. I ran into issue having the datepicker applied by default ( $(".datepicker").datepicker() applied on all pages, for example),
So tried initiating it after the field is displayed. I also tried with applying the datepicker method on the field container as in the final example on https://mdbootstrap.com/docs/jquery/forms/date-picker/
but that didn't work either.
Here is my snippet. Why would the datepicker not work on this scenario?
Thanks
https://mdbootstrap.com/snippets/jquery/moshe/2127819
Hi. I've created a working code snippet for you. Check it: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/2130795
Kneidels pro commented 5 years ago
Looks good. but do you have an example that works without the calendar icon, but rather justr by clicking in the field? as in the final example of the datepicker page.
Grzegorz Bujański staff commented 5 years ago
You can trigger click the icon after clicking on input and hide the icon. I updated the snippet.
Kneidels pro commented 5 years ago
Thanks. so there is no way to get this to work without the icon trigger altogether?
Grzegorz Bujański staff commented 5 years ago
Unfortunately not. When designing a new date picker, we decided that it would open after clicking on the icon. If you want to open the picker after clicking on input you need to use this workaround
Kneidels pro commented 5 years ago
Got it thank you.
Grzegorz Bujański staff commented 5 years ago
You're welcome.
Kneidels pro commented 4 years ago
@Grzegorz Bujański - your sample has the key lines of the code:
$('#example').on('click', () => {
$('i').trigger('click')
});
Which allows a click on the field to behave as though the icon has been clicked thereby triggering the datepicker.I have another fontawsome icon on the page that triggers an even, so the code above actually triggers both the other event and the datepicker!
So i changed the code to:
$('#example').on('click', () => {
$('#cont i').trigger('click'); // on the container of the field
});
Which solved the issue above (so, i correctly get only the datepicker and no other event), but when selecting the date from the calendar - i get like 2 or 3 pop occurrences of the calendar, each time i need to select a date till it disappears ...it looks like each time the datepicker field is dynamically initiated, its creates another root container. so the trigger then gives 2 or 3 (or more) instances... To see this in action - see this snippet - and to see this issue, click on the SHOW link a number of times, as though the fields is being hidden and shown dynamically a few times.
Can you suggest something?
Thanks so much
Grzegorz Bujański staff commented 4 years ago
Unfortunately you haven't linked the snippet. I checked it here: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/2130795#html-tab-view and I can't reproduce this issue. In the DOM I only see one datepicker and I added an onOpen callback, it also executes only once.
Kneidels pro commented 4 years ago
Thank you - i mean the same snippet as above. but even using yours, here is the issue:
click SHOW select a date - all is good.
now - click SHOW another 3 times (this replicates the field being hidden and then displayed again). Now, try select the date again - you will be presented with a calendar popup about 3 or 4 times one after the next.
Kneidels pro commented 4 years ago
@Grzegorz Bujański , just checking you saw my comment to replicate the issue?
Ok. I See now. There I can see two solutions to this problem.
1. Initializing the datepicker before clicking the show button:
$(".datepicker").datepicker({
onOpen: () => {
console.log('show')
}
});
$("#clicker").click(function(){
$("#cont").show();
$('#example').on('click', () => {
$('i').trigger('click')
});
});
2. Or Hiding the show button after clicking:
$("#clicker").click(function(){
$("#cont").show();
$(".datepicker").datepicker({
onOpen: () => {
console.log('show')
}
});
$('#example').on('click', () => {
$('i').trigger('click')
});
});
Kneidels pro commented 4 years ago
Thank you. My issue isnt really the 'show' button, that was just to show you how its shown/hidden.
So solution 1 seems like the way to go. Thanks!
PS - is this a bug that you can fix?
Grzegorz Bujański staff commented 4 years ago
Hi. Unfortunately not. If you trace the code, you will notice that it worked correctly - After clicking on the show button, it was supposed to initialize the datepicker and show it. Each click on show added a new instance of the datepicker class. Therefore several windows appeared.
Kneidels pro commented 4 years ago
Thanks again.
I just cant seem to get this right. I am still getting 2 instances of the datepicker popup. they look different too... which is odd. Your demo on snippets seems fine. But in my application i just cant get it, and i don't know what the issue is. Can i ask you to take a quick glance- i have pretty much remove everything else from the page except for the relevant component. Thank you. This is the link: https://bit.ly/3n7mVcl
Looks like you initialized new and old datepicker. I found something like this in the code:
$ (".Datepicker").pickadate ({
formatSubmit: 'dd / mm / yyyy',
format: 'dd / mm / yyyy'
});
Later you have a new datepicker initialization:
$ ("#frequencyDateHolder").datepicker ({
onOpen: () => {
console.log ('show')
}
});
note the difference: pickadate -> datepicker
pickadate === old datepicker, datepicker === new datepicker
Kneidels pro commented 4 years ago
THANK YOU @Grzegorz Bujański !!!
Grzegorz Bujański staff commented 4 years ago
You're welcome :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.18.0
- Device: PC
- Browser: Firefox
- OS: Win10
- Provided sample code: No
- Provided link: Yes