Use HTML5 Datepicker
Experimental Snippet 
Some users, especially on mobile, may prefer their browser’s native datepicker. This snippet will convert date fields to use the native datepicker if the visitor is on a mobile device. Optionally, you can have the date fields converted for all users (including desktop).
Instructions
- Install our free Custom JavaScript for Gravity Forms plugin.
- Download the plugin here: https://gravitywiz.com/gravity-forms-code-chest/
- Copy and paste the snippet into the editor of the Custom Javascript for Gravity Forms plugin.
- Download the plugin here: https://gravitywiz.com/gravity-forms-code-chest/
Code
Filename: gw-use-html5-datepicker.js
/**
* Gravity Wiz // Gravity Forms // Use HTML5 Datepicker
*
* Experimental Snippet
*
* Some users, especially on mobile, may prefer their browser's native datepicker. This snippet will
* convert date fields to use the native datepicker if the visitor is on a mobile device. Optionally, you can
* have the date fields converted for all users (including desktop).
*
* Instructions:
* 1. Install our free Custom JavaScript for Gravity Forms plugin.
* Download the plugin here: https://gravitywiz.com/gravity-forms-code-chest/
* 2. Copy and paste the snippet into the editor of the Custom Javascript for Gravity Forms plugin.
*/
var onlyConvertOnMobile = true; // Change to false if you wish for all devices to use HTML5 datepicker
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if ( isMobile || onlyConvertOnMobile === false ) {
jQuery.fn.datepicker = function() {};
jQuery( '#gform_fields_GFFORMID .ginput_container_date input' )
.attr( 'type', 'date' );
}
Does this work on popups as well. I’ve tried so many options and codes for some reason elementor and gravity forms combined dislike popups of any sort.
Hi Juliana,
I would expect it to work within popups, but if the issue you’re experiencing has to do with Gravity Forms not working within Elementor popups, then this would be an issue you have to report to Gravity Forms support.
That said, it sounds like you may be running in to a known issue between Gravity Forms and Elementor popup, and a quick workaround that has worked for others is to include the JS code below in the form using the popup.
jQuery(document).on( 'elementor/popup/show', function() { jQuery(document).trigger('gform_post_render', [GFFORMID, 1]); });Before you contact the Gravity Forms support about this, can you try installing the following snippet on the form using our free Code Chest plugin.
I hope this helps.
Best,
Hi, this is really awesome! I couldn’t activate it on my site because it is not compatible with GP Limit Dates and Minimum Date +3 day setting. Do you think it can be recovered?
Hi Michele,
I’ll forward this to our developers to see if support can be added to use the Limit dates feature with the HTML5 date picker. We’ll reply to this comment with updates when there is an update on your request.
Best,