Responsive Calendar not displaying correctly in Chrome

  • ericssonukfso
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 1

ericssonukfso created the topic: Responsive Calendar not displaying correctly in Chrome

Hi Folks,

I'm having issues with the responsive calendar element type no longer working correctly and momentarily popping up when the button's click and then vanishing again. I've tested in Firefox and it's fine, I'm 99% sure it used to work fine in Google Chrome until the most recent update. I'm currently running Chrome v73.0.3683.86 (Official Build) (64-bit).

I've tested on another PC with the same version of Chrome and have the same problem. I've also tested someone else's site and that exhibits the same symptoms, so not a site specific issue. Both PC's used have different vendors of AV and no Chrome plugins enabled.

I've attached a screen recording exhibiting the issue. Could you please confirm it's not just me. The normal calendar element appears to work correctly.

File Attachment:

File Name: Responsive...ssue.zip
File Size:4,910 KB


Thanks,
Richard
#235196
Attachments:
  • Posts: 5958
  • Karma: 119
  • Thank you received: 554

MarioPuco replied the topic: Responsive Calendar not displaying correctly in Chrome

Hi,

Your are correct, this behavoir does show for me as well.
Go to your form > advanced >more options > form pieces > before form > add the following code in there :
echo "
<script>
 jQuery(document).ready(function(){
	ff_getElementByName('kal').addEventListener('click', function() {
	document.querySelector('#ff_elem9144_calendarButton').focus();	
});
    });
 </script>
";

Note : replace ff_elem9144_calendarButton with your calendar button element ID.

It will not resolve this problem 100% but there is certanly some imporvment in the behavoir.

Let me know how it goes.

Regards,
Mario
Satisfied with our Support ?
PayPal Tip
===============================================
Need to renew Pro Support?
Buy Here!
===============================================
Satisfied?
Consider a membership!
===============================================
Like us on Facebook
===============================================
#235205
  • Posts: 16
  • Thank you received: 0

LaurieM replied the topic: Responsive Calendar not displaying correctly in Chrome

Hi there!

I'm not having any success with the suggested fix.

I've got the element ID from the form records. It's 4634.

As well as trying several other alternatives, I used the following code:
echo "
<script>
 jQuery(document).ready(function(){
	ff_getElementByName('kal').addEventListener('click', function() {
	document.querySelector('#ff_elem4634_calendarButton').focus();	
});
    });
 </script>
";

That is: I replaced 9144 with 4634.

Whatever I put in there, it simply breaks the responsive calendar element. That is: the button doesn't bring up the responsive calendar popup.

I note that the original poster uses the term Responsive Calendar not working in Chrome but working in Firefox. That's exactly the same problem that I'm having.

However, when I view the screenshot it looks like the calendar, not the responsive calendar. In the screenshot, the apparent calendar (not responsive calendar) gives the same fault as for me in Chrome. The calendar works as expected for me in Chrome and Firefox.

If the responsive calendar can't be configured to work correctly in Chrome, I'd be quite happy to use the calendar instead. However, the calendar is not suitable in it's current configuration as it self populates with today's date and I need to be sure that people will choose the correct date required before submitting (which is the date a response is required by).

Is it possible to configure the calendar to not self populate?

Thanks,
Laurie.
#235334
  • Posts: 5958
  • Karma: 119
  • Thank you received: 554

MarioPuco replied the topic: Responsive Calendar not displaying correctly in Chrome

Hi,

Did you also change ff_getElementByName('kal') with your calendar name ?
Mine is kal while yours is something different.
Adjust this also if you haven't and let me know if it had any effect.

Regards,
Mario
Satisfied with our Support ?
PayPal Tip
===============================================
Need to renew Pro Support?
Buy Here!
===============================================
Satisfied?
Consider a membership!
===============================================
Like us on Facebook
===============================================
#235358
  • Posts: 16
  • Thank you received: 0

LaurieM replied the topic: Responsive Calendar not displaying correctly in Chrome

Hi Mario. Thanks for the reply.

I'm still having no success with the responsive calendar displaying the datepicker popup correctly in Chrome. It's fine in FF.

Upon clicking the select button the popup appears momentarily. If I make a long click on the button, the datepicker stays as long as I hold but disappears as soon as I release the mouse button. Upon a second click the datepicker stays and can be used.

I've added another piece of JS code also in Form Pieces to increase the dates to min 1920, max 2030. This is for date of birth.

I did fail to change the element name as you suggested but have fixed that now.

I've rechecked my edits to the code you gave and can't see any errors. I'd be pleased if you could check it. The ID and element name are correct.

Here's the code I've entered:
echo "
<script>
 jQuery(document).ready(function(){
	ff_getElementByName('DateBirth').addEventListener('click', function() {
	document.querySelector('#ff_elem4751_calendarButton').focus();	
});
    });
 </script>
";



echo '<script type="text/javascript">
                                        
    JQuery(document).ready(function () {
                             
        JQuery("#ff_elem4751_calendarButton").pickadate({
			format: "dd-mm-yyyy", 
                       selectYears: 101, 
			min: [1920,1,1], max: [2030,12,31],
                        selectMonths: true,
                        editable: true,
                        firstDay: 1,
			onSet: function() {JQuery("#ff_elem4751").val(this.get("value"));}
		});
        });
</script>';

I'd be pleased too if you could tell me how to edit the calendar (not the responsive calendar) to not auto populate the field with today's date. This calendar will do my job quite well if only I can stop it auto populating.

Thanks,
Laurie.
#235363
  • Posts: 16
  • Thank you received: 0

LaurieM replied the topic: Responsive Calendar not displaying correctly in Chrome

Sorry!

I think I omitted in my previous post to say that the code to extend the dates to 1920 - 2030 is successful.

Laurie.
#235365
Moderators: ForumSupport, tomeperica
Time to create page: 0.070 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here