How to Use Conditional Logic With a Date Picker

Are you interested in harnessing the power of Conditional Logic alongside your date picker field? Conditional Logic allows you to dynamically adjust the fields displayed in your form based on specific criteria. In this tutorial, we’ll explore a practical example: displaying a dropdown field if our visitor is 21 years or older. Through a step-by-step walkthrough accompanied by a concise code snippet, we’ll guide you through the implementation process.

Conditional Logic offers a versatile solution for tailoring form interactions to match user characteristics or behavior. By integrating Conditional Logic with a date picker field, you can create dynamic forms that adapt to user input, providing a personalized and intuitive user experience.

In our example, we’ll demonstrate how to enhance your form’s functionality by revealing additional fields based on the visitor’s age. This approach can be particularly useful for age-restricted content, event registrations, or any scenario where customized form interactions are desired.

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.

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.

Using Conditional Logic for a Date field

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.

Reference Action

wpforms_wp_footer_end