Date Picker Form Issue Mobile - Support | Kriesi.at

Tagged: date-picker date form

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
September 19, 2023 at 4:52 pm #1419600
IconicD
Participant
When using the date picker form input field on mobile, the phone default keyboard appears and hides the date picker

See: https://ibb.co/BBBfbFN

I believe this can be resolved to stop the keyboard from appearing using the following code but this should be fixed in the theme:

<input type="text" inputmode="none" />

Source:

Everything You Ever Wanted to Know About inputmode

Please advise

ps.
I am not getting any notification emails of topic updates despite checking the box – Notify me of follow-up replies via email
- This topic was modified 1 year, 3 months ago by IconicD.
- This topic was modified 1 year, 3 months ago by IconicD.
September 20, 2023 at 6:34 am #1419647
Ismael
Moderator
Hey IconicD,

Thank you for the info.

We will forward the issue to our channel. For the meantime, please add this code in the functions.php file to apply the inputmode attribute to the datepicker.
```
function av_custom_inline_script() {
        // apply inputmode to datepicker
	wp_add_inline_script( 'jquery', 
		"
		(function($) {
                    $('.avia_datepicker').each(function() {
                        $(this).attr('inputmode', 'none'); 
                    });
                })(jQuery);
		"
	);
     }
add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );
```
Best regards,
Ismael
September 20, 2023 at 1:49 pm #1419715

IconicD
Participant

Have you tested this code on one of your installs?

Unfortunately, it doesn’t work for me on Chrome/Android.

September 20, 2023 at 2:14 pm #1419717
Yigit
Keymaster
Hi,

Please try using the code as the following:
```
function av_custom_inline_script()
{
    // apply inputmode to datepicker
    wp_add_inline_script( 'jquery', 
    "
    (function($) {
            $('.avia_datepicker').attr('inputmode', 'none'); 

            $('body').on('av_resize_finished', function() {
                $('.avia_ajax_form + .ajaxresponse').scrollTo(-50);
            });
    })(jQuery);
    "
    );
}
add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );
```
Our developers addressed this issue and the fix will be included in the upcoming version.

Best regards,
Yigit
September 20, 2023 at 3:04 pm #1419725

IconicD
Participant

Also is there a way to display the date picker calendar on screen rather than having it show via pop up?

September 20, 2023 at 3:37 pm #1419729

IconicD
Participant

Great. The last code is working now.

One other issue on mobile that needs fixing is that after submitting the form the ‘Your Message Has Been Sent!’ success message is hidden above from the visitor as it disappears off the screen.

September 21, 2023 at 5:10 am #1419814

Ismael
Moderator

Hey!

‘Your Message Has Been Sent!’ success message is hidden above from the visitor as it disappears off the screen.

We slightly modified the script above. Please try it again.

// https://kriesi.at/support/topic/date-picker-form-issue-mobile/#post-1419717

Regards,
Ismael

September 21, 2023 at 9:54 pm #1419961
IconicD
Participant
The updated code with the -50 scroll seems to have broken the keyboard display fix. Please check your end.

I can live without the success message by forwarding to a new URL after submission so feel free to give me the previous code that fixed the keyboard issue.
- This reply was modified 1 year, 2 months ago by IconicD.
September 22, 2023 at 7:54 am #1419995
Ismael
Moderator
Hi,

Thank you for the update.

The changes should not have affected the previous script. Please make sure to copy the code directly from the forum, not from your email. This is the previous script without the scrollTo changes.
```
function av_custom_inline_script()
{
    // apply inputmode to datepicker
    wp_add_inline_script( 'jquery', 
    "
    (function($) {
            $('.avia_datepicker').attr('inputmode', 'none'); 
    })(jQuery);
    "
    );
}
add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );
```
Best regards,
Ismael
October 10, 2023 at 11:50 am #1422003
Guenni007
Participant
try that instead:
```
function remove_text_input_mode_on_datepicker(){
?>
<script type = "text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		$('.avia_datepicker').each(function() {
			$(this).attr('readonly','readonly');
		});  
	})(jQuery);
});
</script>
<?php
}
add_action( 'wp_footer', 'remove_text_input_mode_on_datepicker', 20 );
```
October 11, 2023 at 10:15 am #1422097

Guenni007
Participant

So – it seems to work with the attribute of Ismael, just not when you insert it there afterwards via script.
It must be hardcoded in the class-form-generator.php ;)

the attribute readonly works even if you add it via script.

October 11, 2023 at 11:42 am #1422106

Ismael
Moderator

Hi,

the attribute readonly works even if you add it via script.

@Guenni007: Thank you for the info. Hope it helps the user.

Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.