Troubleshooting - Date and Time placeholders do not appear on mobiles

The issue

Date and time placeholders in forms do not appear when accessed on mobile devices. Instead these fields appear blank.

Note

This error appears on real mobiles, when you view the page through the Elementor Editor, the placeholders appear.

This error is caused by how HTML 5 handles date and time fields.

There are two possible solutions to this issue:

To toggle HTML 5 off:

Go to the Form widget and open the Date or Time field. For details, see Form widget.
Toggle Native HTML 5 to Off.

Note

Only Elementor Pro users can add custom code.

Custom code can show the placeholders.

To add the custom code:

Go to WP Admin and navigate to Elementor >Custom Code.
Click Add New Custom Code or New Code.
Give a title to your custom code.
Use the Location dropdown menu to select <body>-Start.
Past the following code into the code area.
<style>
.custom-cls-form .elementor-date-field {
   -webkit-appearance: none;
}
.custom-cls-form .elementor-date-field:before {
   content: attr(placeholder);
}
.custom-cls-form .elementor-date-field.date-selected:before {
   content: "" !important;
}
.custom-cls-form input::-webkit-date-and-time-value {
   text-align: left !important;
   width: 100% !important;
   display: block !important;
   position: absolute;
}
</style>

<script>
jQuery(document).on('change', '.custom-cls-form .elementor-date-field', function () {
   if (jQuery(this).val() !== '') {
      jQuery(this).addClass(‘date-selected’);
   } else {
      jQuery(this).removeClass('date-selected');
}
});

</script>
Click Publish.
Click Save & Close.

Note
You have the option of limiting where this code will apply but we recommend just applying it to the entire site. See Conditions, triggers, and advanced rules for details.

We now have to go back to the form and direct the form to use this code.

Open the page containing the form in the Elementor Editor and select the form.
Click the Advanced tab.
In the Layout section, locate the CSS Classes field and enter custom-cls-form.

Your forms should work properly on mobiles.