How to Use Conditional Logic With a Date Picker

Introduction

Would you like to use Conditional Logic with your date picker field? In this tutorial, we’re going to show a Dropdown field if our visitor is 21 years or older. Using a small code snippet, we’ll walk you through each step.

Creating your form

To begin, we’ll create a new form and add our fields. We’re going to capture the Name, Email, Date field (for our Date of Birth) and we’ll have a Dropdown field that will be hidden with our code snippet unless the date of birth shows that the user is 21 or over.

If you need any help with creating your form, please check out this helpful guide.

create your form and add your fields

Adding a CSS class name to the Dropdown field

Because we know, for the purpose of this tutorial, we want to hide our Dropdown field when the form loads, we’re going to now add a CSS class name to the Dropdown field.

To do this, select the Dropdown field you added to your form and click Advanced. Next, scroll to the CSS Classes and add the CSS class name age-restriction and then click Save on the form to save the changes.

add the name age-restriction to the CSS Classes on the Dropdown field

Adding the snippet

Now it’s time to add the snippet to your site. If you’re not sure where and how to add snippets, you can review this tutorial for assistance.

/**
 * Use conditional logic with a date field to show or hide another form field
 *
 * @link  https://wpforms.com/developers/how-to-use-conditional-logic-with-a-date-picker/
 */
 
add_action( 'wp_head', function () { ?>
  
    <style>
 
    /* CSS hide this field on page load */
    #wpforms-form-2575 .age-restriction {
            display:none;
        }
    
	/* CSS show this field if date conditional logic is true */
    #wpforms-form-2575 .age-restriction.show-field {
            display:block;
        }
  
    </style>
  
<?php } );


// Conditional logic for a field
function wpf_dev_age_restriction_check() {
    ?>
    <script>
        jQuery(function($) {
             
            // Only fire this script when the field ID 22 for form ID 2575 is changed
            document.querySelector( "#wpforms-2575-field_22-container" ).onchange = function() { 
             
                // Get year selected from Date Of Birth field for 
                // form ID 2575 and 
                // field ID 22
                var oneDate = $( "input#wpforms-2575-field_22" ).val();
                var date_selected = new Date(oneDate); 
				var date_selected_formatted = date_selected.toLocaleDateString();
				var year_selected = date_selected.getYear();
				
                // Get current year
                var twoDate = new Date();
				var now = twoDate.toLocaleDateString();
				var year_now = twoDate.getYear();
                 
                // Is person 21 years or older? 
                if ((year_now - year_selected) < 21) {
					
					// No, then we will continue to hide the single line text field
                    $( ".age-restriction" ).addClass( "no" );
					} 
				    else {
					// Yes, then we will show the single line text field			
					$( ".age-restriction" ).addClass( "show-field" );
					}

            }
			
        });
         
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_age_restriction_check', 10 );

This snippet will first, hide the Dropdown field when the form first loads. Then as any changes are made to our Date of Birth field, it will run the snippet to grab the year from the field and subtract that from the current year. If the user is 21 years or older, the Dropdown2575, the Date Picker field ID is 22. You’ll need to update these IDs in the snippet to match your own IDs. For assistance in finding these ID numbers, please review this tutorial.

And that’s all you need to use Conditional Logic with a date picker field. Would you like to change the position of the date picker popup? Check out our tutorial on How To Change the Position of the Date Picker Popup.

Action Reference: wpforms_wp_footer_end