hide virtual keyboard

[daduzh]

Hello,
I am trying to prevent the virtual keyboard from popping up on mobile devices when using the datepicker field in contactform7.

thanks you

[rinkaslb]

Any luck? i'm trying the same thing. Cheers

[TomasHurtz]

I solved the problem for mobiles by adding the following javascript code to only execute if:

• you are on a specific page (in my case page ID 136 is my contact page;
• only if user is on a device (testing this using wp_is_mobile)

To get this to work:

1a) Ensure ID is added to the date field in CF7 (for example: [date* readonly id:myID456..... etc.

1b) If you are using date and time field together, then it looks something like this [datetime* id:myID456 date-format:dd/mm/yy time-format:HH:mm min-date:2 max-date:365 min-hour:9 max-hour:18 step-minute:15 first-day:1]

2a) Add following to your active theme functions file;

function wp223311_hook_javascript() {
  	if (is_page(136) ) {   // << id of your page
			 if ( wp_is_mobile() ) {  // << only target devices
			 ?>
		  		<script type="text/javascript">
    				    jQuery(function() {
         				jQuery( "#myID456" ).datepicker({  }).attr('readonly','readonly').addClass("test");
    				    });
				</script>
		  <?php
		  } // end if wp_is_mobile
  	} // end if is_page
} // end function
add_action('wp_head', 'wp223311_hook_javascript');

2b) If you are using date and time field together, then it looks something like this:
Same as above except use this instead: jQuery( "#myID456" ).datetimepicker

I also added a test class - so you can easily view source page of code and search for test so you can see the class is added to correct element in form

Good luck!