Datepicker in Contact Form 7 not working in PopUp Pro

Good Evening

I have a similar issue with PopUp pro as mentioned in the following post
https://premium.wpmudev.org/forums/topic/datepicker-in-gravity-forms-not-working-in-popup-pro

Only in my case it's an issue with Contact Form 7, as in the other post, the issue can be recreated by going to http://waterfront.rudland.it/bar-restaurant/ and clicking the booking form button on the right hand side, a working example of the form can be found on http://waterfront.rudland.it/bar-restaurant-2/

Any help would be appreciated

  • Nithin

    Hi martman2002uk,

    Hope you are doing good today. :slight_smile:

    I tested the [date] format in my test server, and it seems to work fine.

    This seems to be a conflict with Contact form 7 Datepicker, could you please try creating a new popup with the the basic date tag, ie with Datepicker plugin disabled, and check whether it works fine?

    If not, there could be a conflict in your system. Since I don't see you mention about performing a plugin conflict test, could you please run a quick plugin/theme conflict test as illustrated in getting support manual (flowchart), and rule out whether any plugin is causing this issue.
    http://premium.wpmudev.org/manuals/using-wpmu-dev/getting-support/

    Please let us know how that goes, so that we could give a closer look. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi martman2002uk,

    Hope you are doing good today. :slight_smile:

    Thank you for sharing the detailed explanation of the issue, I was able to notice that the fallback for date doesn't work when it comes to FF, and IE browsers. It seems like the popup isn't able to recognize the fallback code implemented through the plugin, since you are using the plugin only to make the date picker work in other browser. I'm pinging the developer regarding this, and will check whether the fallback could be implemented in the Popup, without the use of the date picker plugin, and see whether we could have a quick workaround, so that it works in all browsers.

    Please do note that developers work round the clock with many critical issues, and hence have a slow response time. Either myself, or the developer will keep you posted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Panos

    Hey martman2002uk ,

    Sincere apologies for delay!

    Could you please try adding the following snipped on a mu-plugin or your child theme's functions.php:

    function wpmudev_popup_fired_cookie(){
    
    	setcookie( 'wpmudevpopupfired' , 'fired', time() + 120, "/");
    
    }
    
    add_action( 'popup-init', 'wpmudev_popup_fired_cookie' );
    
    function wpmudev_add_datepick_popup(){
    
    	if( !isset( $_COOKIE['wpmudevpopupfired'] ) || $_COOKIE['wpmudevpopupfired'] != 'fired' ) return;
    
    	setcookie( 'wpmudevpopupfired', 'expired', time() - 3600, "/");
    	wp_enqueue_script( 'jquery-ui-datepicker' );
    	wp_enqueue_style('wpmudev-popup-ui-css','http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css',false,"1.12.1",false);
    	//replace smoothness with any of the following:
    	//base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond
    	//smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader
    
    	?>
    	<script type="text/javascript">
    	(function($) {
    
    		$( window ).load(function(){
    			$( '.wpcf7-date' ).on( 'click', function(){
    				$( this ).datepicker().datepicker('show');
    				$( '#ui-datepicker-div' ).css( 'z-index', '999999' );
    			});
    		});
    
    	})(jQuery);
    
    	</script>
    	<?php
    }
    
    add_action( 'wp_footer', 'wpmudev_add_datepick_popup' );

    and let us know how it works on your side?

    Thanks!

    Warm wishes for a happy new year!

    • martman2002uk

      Hi Panos

      No need to apologise, appreciate your help, and happy new year to you as well :slight_smile:

      Have tried your code (in the themes functions.php which I've attached in-case there's something in the start affecting it) and unfortunately, the date picker still doesn't work in the popup, have updated the page on the website with a test popup and link (showing what the popup should display) which are under the TESTING heading.

      http://waterfront.rudland.it/bar-restaurant/

      Is there anything else you can suggest.

      Many thanks

      Martin

        • martman2002uk

          Whoops again, functions file in full below...

          <?php
          /**
          * (at)package   Organic
          * (at)author   YOOtheme http://www.yootheme.com
          * (at)copyright   Copyright (C) YOOtheme GmbH
          * (at)license   http://www.gnu.org/licenses/gpl.html GNU/GPL
          */
          
          // check compatibility
          if (version_compare(PHP_VERSION, '5.3', '>=')) {
          
              // bootstrap warp
              require(__DIR__.'/warp.php');
          }
          
          function wpmudev_popup_fired_cookie(){
          
          	setcookie( 'wpmudevpopupfired' , 'fired', time() + 120, "/");
          
          }
          
          add_action( 'popup-init', 'wpmudev_popup_fired_cookie' );
          
          function wpmudev_add_datepick_popup(){
          
          	if( !isset( $_COOKIE['wpmudevpopupfired'] ) || $_COOKIE['wpmudevpopupfired'] != 'fired' ) return;
          
          	setcookie( 'wpmudevpopupfired', 'expired', time() - 3600, "/");
          	wp_enqueue_script( 'jquery-ui-datepicker' );
          	wp_enqueue_style('wpmudev-popup-ui-css','http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css',false,"1.12.1",false);
          	//replace smoothness with any of the following:
          	//base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond
          	//smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader
          
          	?>
          	<script type="text/javascript">
          	(function($) {
          
          		$( window ).load(function(){
          			$( '.wpcf7-date' ).on( 'click', function(){
          				$( this ).datepicker().datepicker('show');
          				$( '#ui-datepicker-div' ).css( 'z-index', '1' );
          			});
          		});
          
          	})(jQuery);
          
          	</script>
          	<?php
          }
          
          add_action( 'wp_footer', 'wpmudev_add_datepick_popup' );
  • Panos

    Hi martman2002uk ,

    Sorry to hear it's not working :slight_frown:

    I have it tested on my installation only. It would be very helpful if I could do some further testing on your site. I would need ftp and admin access to your site or even better if you have a staging site. You can send ftp and login credentials privately through our contact form:

    https://premium.wpmudev.org/contact/#i-have-a-different-question

    In Subject field use: "Attn: Panos Lyrakis"
    so it gets assigned to me.

    In the message include the following:
    - Admin login:
    Admin username
    Admin password
    Login url

    - FTP credentials
    host
    username
    password
    (and port if required)

    - link back to this thread for reference: https://premium.wpmudev.org/forums/topic/datepicker-in-contact-form-7-not-working-in-popup-pro

    Thanks!

  • Panos

    Hey martman2002uk ,

    Thanks for providing access!

    I modified the code in your functions.php to:

    function wpmudev_add_datepick_popup(){
    
    	global $post;
    
    	$pages_with_datepick_in_popup = array(
    		'797'
    	);
    
    	if( !isset( $post->ID ) || ! in_array( $post->ID, $pages_with_datepick_in_popup ) ) return;	
    
    	setcookie( 'wpmudevpopupfired', 'expired', time() - 3600, "/");
    	wp_enqueue_script( 'jquery-ui-datepicker' );
    	wp_enqueue_style('wpmudev-popup-ui-css','http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css',false,"1.12.1",false);
    	//replace smoothness with any of the following:
    	//base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond
    	//smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader
    
    	?>
    	<script type="text/javascript">
    	(function($) {
    
    		$( window ).load(function(){
    
    			$( '.wp-page' ).delegate( '.wpcf7-date', 'click', function(){
    
    				$( this ).datepicker().datepicker('show');
    				$( '#ui-datepicker-div' ).css( 'z-index', '999999' );
    			});
    		});
    
    	})(jQuery);
    
    	</script>
    	<?php
    }
    
    add_action( 'wp_footer', 'wpmudev_add_datepick_popup' );

    I tested it on chrome and FF and seems to be working now. Could you please try it and let us know how it goes on your side?

    In case you need to add the datepicker on other pages,you can add their ids in the $pages_with_datepick_in_popup array

    Thanks!

    • martman2002uk

      Hi Panos

      Thanks very much for looking at the issue for me, I can now happily report that...

      Datepicker in Contact Form 7 is now working in PopUp Pro

      Have tested the datepicker in IE, FF, Chrome and Safari and cant see any issues with it.

      I've taken the code in the functions.php file and converted it into a plugin (as is good practice) and just wondering is the $pages_with_datepick_in_popup array needed, if the function is enabled on all pages, regardless of whether a popup exists, does it affect anything ?

      Many thanks for all the help you have given, apologies that this turned into a bit of a challenge.

      Martin

  • Panos

    Hi martman2002uk ,

    Glad to know that it now works for you!

    is the $pages_with_datepick_in_popup array needed, if the function is enabled on all pages, regardless of whether a popup exists, does it affect anything

    It shouldn't affect anything really. The reason for this check is to load additional content (the short script and the css and js enqueues for datepicker ) only when required, so this doesn't add to load time on the other pages. I don't think you can tell the difference as these are not that big files, but it's good practice to follow :slight_smile:

    Cheers!

  • Panos

    Hi martman2002uk ,

    You can remove completely this part:

    global $post;
    
    	$pages_with_datepick_in_popup = array(
    		'797'
    	);
    
    	if( !isset( $post->ID ) || ! in_array( $post->ID, $pages_with_datepick_in_popup ) ) return;

    So the script will be included on every page.

    In case you need to include script on specific pages only, you can keep that part and add the page ids in the array like:

    $pages_with_datepick_in_popup = array(
    		'797', '790', '816', '955'
    	);

    Hope this helps!