Calendar field on Contact Form 7: how can I make it clickable everywhere in the field?

user_15736409 0
Viewed 624

As of now I can only make the calendar show up by clicking on the calendar icon on the right of the date field. I would like to click anywhere on the field and make the calendar show. How can I make this happen? Thank you very much!

contact-form-7 wordpress css html
1 Answers

The calendar field as you call it is using the <input type="date"> HTML attribute which shows a calendar on most browsers.

Adding this function to your functions.php or as a plugin will make a regular text field into a calendar popup unsing jQuery UI.

Use a form tag that includes class:use-datepicker

Date: [text your-date class:use-datepicker]

This function will only enqueue scripts and style on pages where the contact form 7 shortcode is in use.

function dd_add_datepicker_to_cf7() {
    $load_scripts = false;
    if ( is_singular() ) {
        $post = get_post();
        if ( has_shortcode( $post->post_content, 'contact-form-7' ) ) {
            $load_scripts = true;
        }
    }
    if ( $load_scripts ) {
        wp_enqueue_script( 'jquery-ui-datepicker' ); // included with WordPress
        wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
        // Choose a different theme is you want https://cdnjs.com/libraries/jqueryui
        wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/theme.min.css' );
        add_action( 'wp_print_footer_scripts', function () {
            // add different options to datepicker if you want https://api.jqueryui.com/datepicker/
            echo '<script type="text/javascript">jQuery(function($){$(".use-datepicker").datepicker()});</script>';
        } );
    }

}

add_action( 'wp_enqueue_scripts', 'dd_add_datepicker_to_cf7', 99 );
user_38214670
Related