Not working on mobile

Seems to be working well for me on the tests I did on mobile. You should apply the css class for text field you want to convert and not the submit button.

In CF7 you can give unique ids to fields using this format:

[text text-123 id:very-special-field]

So then in the plugin settings you would use

#very-special-field

To target that specific field to convert it into a date field.
Hope it helps.

Greetings, Carlos

I managed to turn a couple text fiels using a class. But now on mobile after tapping on the text field to open the date time picker, the calendar opens but immediately slides up out of view. It behaves as if the keyboard pushes the calendar up and out of view where it is unreachable. This happens wether the setting to use keyboard input is turned on or off.

Test post on website: https://portal.beatate.ca/2018/11/08/booking/

The first contact form on the page is inserted via cf7 shortcode and the contact form on the bottom of the page is a widget which appears on each page of the website. Both forms are using the same cf7 shortcode and same classes for date time picker.

It may be only my device (iPhone SE) but I have no other devices for testing.

There are some CSS rules in your theme forcing the table cells to have bigger padding. Rules like:

table td {
padding: 15px 20px!important;
}

And

table th {
padding: 15px 20px!important;
font-size: 16px;
color: #505050;
}

This is causing the calendar table to be much bigger than it’s supposed, probably causing issues on smaller screens. You would need to at least remove those !important tags in the styles.

This would be the first thing to test.

I removed the important tags, still didn’t work. then i commented out that whole css code for table th and td, still doesn’t work.

Before I’d even made any changes according to you suggestion, i didn’t see the date time picker show up at all on mobile anymore. but the page still moves up as if the keyboard was pushing it out of the way.

i also just realized that on mobile the placeholder text doesn’t appear in the date time field so maybe that means the plugin is not loading properly on mobile.

Works well on an iphone 6, the keyboard doesn’t display and the calendar displays well. Tested on an android device and it also works well. Maybe it’s a cache issue on your phone? Try on an incognito tab or a different browser to check.

Strange… I’ve cleared cache on my iPhone SE and tried three different browsers and the same problem persists. Maybe its the result of small screen size? Is there any css or php changes i could make to make the plugin more responsive maybe?

I was having the same issue, and came across this tread for solution.
I found I had some problem Table styles in my theme stylesheet (media query) that were overriding on mobile/smaller screens.

Could be the same problem you’re having?
Thought I would share.

Great Plugin Carlos. Looks much better than the default date calendar on CF7.
Thanks.

Thank you for the feedback @jberg1 ! Thank you for sharing. Initially it did seem like it was an issue with the table styles also.