Would you like to provide an age restriction for the date picker on your form? You can easily put in a small code snippet that will evaluate the date and provide an alert message on the page if the date doesn’t fall within a certain guideline.
In this example, we’re creating a signup form for a children’s ballet class that can only accept children between the ages of 12 and 18.
Setting up your form
In the first step, just create a new form and add a Date / Time form field to your form.
Once you’ve saved your form, you can move on to the next step.
Providing the age restriction
If you would just like to stop the form from submitting and provide a message under the form field, you can simply add this code snippet to your site instead.
/**
* Display an error message on submission of the form if the date doesn't fall within the guidelines.
*
* @link https://wpforms.com/developers/how-to-provide-an-age-restriction-on-the-datepicker-form-field/ *
*/
function wpf_dev_process( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #6.
if ( absint( $form_data[ 'id' ] ) !== 6 ) {
return $fields;
}
if ( isset( $fields[3][ 'value' ] ) && !empty( $fields[3][ 'value' ] ) ) {
$timestamp = strtotime( $fields[3][ 'value' ] );
if ($timestamp === false) {
// Invalid date format
wpforms()->process->errors[ $form_data[ 'id' ] ][ '3' ] = esc_html__( 'Invalid date format', 'plugin-domain' );
} else {
$birth_year = date('Y', $timestamp);
$current_year = date('Y');
$age = $current_year - $birth_year;
if ($age < 12 || $age > 18) {
// Show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ][ '3' ] = esc_html__( 'Minimum age requirement is 12 and maximum age requirement is 18', 'plugin-domain' );
}
}
} else {
// Date field is empty
wpforms()->process->errors[ $form_data[ 'id' ] ][ '3' ] = esc_html__( 'Date field is required', 'plugin-domain' );
}
return $fields;
}
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 );
Please make sure to adjust the form ID (6) and field ID (3) to match your own IDs. If you’re not sure where to find these IDs, please take a look at this helpful guide.
With this code snippet, if the dates fail the age restriction, a message will display under the field when the Submit button is clicked.
And that’s it! You’ve successfully implemented the age restriction on your form for your date picker field. Would you like to also customize the date picker field in other ways? Check out our tutorial on How to Customize the Date Time Field Date Options.
Reference Actions
FAQ
Q: How can this work if my date field is inside the Repeater Field?
A: No worries! If you’re using a Repeater field and want the code to check all of the available dates in the form, use this snippet instead.
function wpf_dev_process( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #6.
if ( absint( $form_data[ 'id' ] ) !== 6 ) {
return $fields;
}
// Loop through all fields
foreach ( $fields as $field_id => $field ) {
// Check if the field ID matches the pattern for the repeater field
// Field ID 3
if ( preg_match( '/^3(_\d+)?$/', $field_id ) ) {
if ( isset( $field[ 'value' ] ) && !empty( $field[ 'value' ] ) ) {
$timestamp = strtotime( $field[ 'value' ] );
if ( $timestamp === false ) {
// Invalid date format
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Invalid date format', 'plugin-domain' );
} else {
$birth_year = date('Y', $timestamp);
$current_year = date('Y');
$age = $current_year - $birth_year;
if ( $age < 12 || $age > 18 ) {
// Show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Minimum age requirement is 12 and maximum age requirement is 18', 'plugin-domain' );
}
}
} else {
// Date field is empty
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Date field is required', 'plugin-domain' );
}
}
}
return $fields;
}
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 );
Remember, our field ID is 3 so if you take a look at this line of the code if ( preg_match( '/^3(_\d+)?$/', $field_id ) ) { you can see the 3 just after the /^, you’ll need to update this to match your own field ID, but once you’ve updated this and the form ID (6) at the beginning of the snippet, it doesn’t matter how many rows would be added, the snippet will search through each one to compare the date for age restrictions.
Q: Can I compare the literal date instead of just the year?
A: Absolutely! In this snippet, we’re going to check to see if the person completing the form is 18 years or older.
/**
* Check if the date makes the user 18 years or older.
*
* @link https://wpforms.com/developers/how-to-provide-an-age-restriction-on-the-datepicker-form-field/ *
*/
function wpf_dev_compare_dates( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #3116.
if ( absint( $form_data[ 'id' ] ) !== 3116 ) {
return $fields;
}
// Minimum age to complete the form
$age = 18;
// 19 is the ID of date field
$date_1 = $fields[19][ 'unix' ];
// $date_1 can be UNIX_TIMESTAMP or just a string-date.
if( is_string( $date_1 ) ) {
$date_1 = strtotime( $date_1 );
}
// Check date of birth makes the user 18 years or older
if( time() - $date_1 < $age * 31536000 )
wpforms()->process->errors[ $form_data[ 'id' ] ][ 'header' ] = esc_html__( 'Apologies, you need to be 18 or older to submit this form.', 'plugin-domain' );
}
add_action( 'wpforms_process', 'wpf_dev_compare_dates', 10, 3 );