Tag: Pro plugin

At this point the Conditional Fields plugin is unaware of date ranges, but this is a problem that can be solved with custom functions. Custom functions are available in Conditional Fields Pro. Check out the example below.

[group nope]Enter a date between 29-Aug-2019 and 7-Sept-2019:[/group]
[date date]
[group well-done]Well done![/group]

In order for this form to work you need to add this javascript code to your theme:

<script>
    
    fromdate = new Date(2019,7,29);
    untildate = new Date(2019,8,7);
    
    function date_between($field) {
    
        //expected format: yyyy-mm-dd
        
        var checkdate_str = $field.val();
        var dmy = checkdate_str.split("-");
        
        if (dmy.length !== 3 ||
        isNaN(dmy[0]) || dmy[0].length!==4 ||
        isNaN(dmy[1]) || dmy[1].length!==2 ||
        isNaN(dmy[2]) || dmy[2].length!==2 )
        {
        return false; //invalid format
        }
        
        var checkdate = new Date(dmy[0], dmy[1] - 1, dmy[2]);
        
        if (checkdate === "Invalid Date" || isNaN(checkdate))
        {
        return false; // invalid date
        }
        
        //at this point the date is valid
        
        if (checkdate > fromdate && checkdate < untildate) {
            return true; // date is between the from and until date
        } else {
            return false; // date is not between the from and until date
        }
    }
    
    function not_date_between($field) {
        return !date_between($field);
    }
    
</script>

CF7 Conditional Fields PRO 1.6.2 introduces the possibility to write your own JavaScript functions to determine whether or not a group should be shown.

    o
   /__o
 _// <
'

<label>Date of birth:
[date date-of-birth "2010-04-03"]</label>

[group minus-18]
Sorry, you are too young to watch dirty pictures. Try decreasing your date of birth.

[/group][group plus-18]
Hooray! You are older than 18. Here's some explicit content:
<pre style="font-family:monospace">
    o   
   /__o 
 _// < 
'   
</pre>
[/group]

In order for the above example to work, you need to create two JavaScript functions – not PHP functions! – called isOlderThan18($field) {} and isYoungerThan18($field) {} in your theme. These functions need to return true or false. Preferably, you need to place these functions somewhere in a custom JS file, or if you must, in your header.php or footer.php, for example before the closing </body> tag in your theme.

The $field parameter passed is the jQuery object of the date field. If you want to access the DOM field directly, you can get it with $field[0].

Here’s the full JavaScript code used to check if the user is older or younger than 18:

<script>

    function isOlderThan18($field) {

        //expected format: yyyy-mm-dd

        var birthdate_str = $field.val();
        var dmy = birthdate_str.split("-");

        if (dmy.length !== 3 ||
            isNaN(dmy[0]) || dmy[0].length!==4 ||
            isNaN(dmy[1]) || dmy[1].length!==2 ||
            isNaN(dmy[2]) || dmy[2].length!==2 )
        {
            return false; //invalid format
        }

        var birthdate = new Date(dmy[0], dmy[1] - 1, dmy[2]);

        if (birthdate === "Invalid Date" || isNaN(birthdate))
        {
            return false; // invalid date
        }

        //at this point the date is valid

        if (calculateAge(birthdate) >= 18) {
            return true; // older than 18
        } else {
            return false; // younger than 18
        }

    }

    function isYoungerThan18($field) {
        return !isOlderThan18($field);
    }

    function calculateAge(birthdate) { // birthday is a date
        var ageDifMs = Date.now() - birthdate.getTime();
        var ageDate = new Date(ageDifMs); // miliseconds from epoch
        return Math.abs(ageDate.getUTCFullYear() - 1970);
    }

</script>