Applying datepicker to hidden field/container

Topic: Applying datepicker to hidden field/container

Kneidels pro asked 3 years ago

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

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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 3 years ago

THANK YOU @Grzegorz Bujański !!!

Grzegorz Bujański staff commented 3 years ago

You're welcome :)

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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 3 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 3 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 3 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

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

Hi. I've created a working code snippet for you. Check it: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/2130795

Kneidels pro commented 3 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 3 years ago

You can trigger click the icon after clicking on input and hide the icon. I updated the snippet.

Kneidels pro commented 3 years ago

Thanks. so there is no way to get this to work without the icon trigger altogether?

Grzegorz Bujański staff commented 3 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 3 years ago

Got it thank you.

Grzegorz Bujański staff commented 3 years ago

You're welcome.

Kneidels pro commented 3 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

<a href="/profile/?id=82601" target="_blank" rel="nofollow">@Grzegorz Bujański</a> - your sample has the key lines of the code:

<pre class="prettyprint"><code>$('#example').on('click', () => {
 $('i').trigger('click')
 });
</code></pre>

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:

<pre class="prettyprint"><code> $('#example').on('click', () => {
 $('#cont i').trigger('click'); // on the container of the field
 });
</code></pre>

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

Please insert min. 15 characters.

Grzegorz Bujański staff commented 3 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 3 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 3 years ago

@Grzegorz Bujański , just checking you saw my comment to replicate the issue?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.18.0
Device: PC
Browser: Firefox
OS: Win10
Provided sample code: Yes
Provided link: Yes

Kneidels

Pro User 257Support score
39Questions 11Answers 20Snippets