How to make Gravity Forms date inputs read only

We've talked in a previous article about disabling weekends and holidays in a Gravity Forms date picker and how doing so only affects the date picker itself, not the date input. This means that users can still type in a date that is not allowed by the date picker, and we'd like to prevent that.

Making a date input read only is easy, both using code and visually with Hero for Gravity Forms. Once the date input is read only, users can only select a date from the date picker, thus preventing them from typing in an invalid date.

Using the Gravity Forms JavaScript API

Gravity Forms makes available a custom jQuery event named gform_post_render which happens every time a form is rendered. We'll listen for this event and add our code to make the desired date input read only.

Let's start by creating a simple plugin, as described in the article about adding custom code to WordPress. We'll create an example.php file to hold the plugin code, ZIP it, upload it in the admin section and activate the newly created plugin. We can add our custom code as part of the <head> generated by WordPress.

example.php

<?php

/**
 * Plugin Name: Example Custom Code
 */

function example_wp_head() {
?>
    <script>
    </script>
<?php
}

add_action( 'wp_head', 'example_wp_head', 20 );

We're using 20 as the priority to add_action() to make sure the Gravity Forms JavaScript code is loaded along with all its dependencies, including jQuery, which we'll use to listen for the gform_post_render event. Since Gravity Forms uses the default priority of 10, we need to use a higher priority.

So let's listen for the gform_post_render event.

example.php

<?php

/**
 * Plugin Name: Example Custom Code
 */

function example_wp_head() {
?>
    <script>
        jQuery( document ).on(
            'gform_post_render',
            function() {
            }
        );
    </script>
<?php
}

add_action( 'wp_head', 'example_wp_head', 20 );

Be aware that this is a jQuery event, not a Gravity Forms hook, so we need to use the jQuery on() method to listen for it, not the Gravity Forms gform.addAction() or gform.addFilter().

Now that we can execute code as soon as a Gravity Form is rendered, we can simply look for the input we want and disable it.

Gravity Forms inputs always have an ID that starts with input_ and is followed by the form ID, an underscore, and the field ID. So, for example, if we wanted to target field 10 from form 1, we'd need to look for an element with the ID input_1_10. And since we have jQuery available, we can use jQuery( '#input_1_10' ) to find it.

Once found, it's a simple matter of making it read only it by adding the readonly attribute. We can do this with the jQuery attr() method that's available on all jQuery objects.

example.php

<?php

/**
 * Plugin Name: Example Custom Code
 */

function example_wp_head() {
?>
    <script>
        jQuery( document ).on(
            'gform_post_render',
            function() {
                jQuery( '#input_1_10' ).attr(
                    'readonly', true
                );
            }
        );
    </script>
<?php
}

add_action( 'wp_head', 'example_wp_head', 20 );

And that's it! We've made the date input read only.

Now users can only select a date from the date picker, and typing a date in the input is no longer possible.

Using Hero for Gravity Forms

With Hero for Gravity Forms, it's even easier to make a Gravity Forms date input read only. Simply check “Read Only Input” in the Appearance section!