Introduction
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 5 and 12.
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.
Implementation Options
Adding an alert box
If you would like an alert to show on the screen when your visitors choose their date, simply add this code snippet to your site. If you need assistance on how to add code snippets to your site, please review this tutorial.
/**
* Display an alert box 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_check_age() {
?>
<script>
jQuery(function($) {
// Update the 1425_22 to match the form and field ID
// of your form and date picker field
window.wpforms_1425_22 = window.wpforms_1425_22 || {};
window.wpforms_1425_22.datepicker = {
mode: "single",
onClose: function(selectedDates, dateStr, instance) {
var year = selectedDates[0].getFullYear();
if (year < 2007 || year > 2015) {
alert( 'Minimum age requirement is 5 or maximum age requirement is 12' );
this.clear();
}
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_check_age', 10 );
In the code snippet above, there are a few things to be updated. Our example form ID is _1425 and our Date / Time field ID is _10, you’ll need to update this code snippet to match your own form and field IDs. If you need any assistance in finding your form and field IDs, please review this tutorial.
Also, remember to update the 2007 and 2015 to meet your requirements. If you were only needing to evaluate one date, just remove the || year>2015 above and update the 2007 to the year you need to review.
Finally, you’ll need to also update your message that will display in the alert window.
Now if a visitor selects a Date of Birth that is before 2007 or above 2015, an alert will display on screen.
Adding an error message on submit
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 #1425.
if ( absint( $form_data[ 'id' ] ) !== 1425 ) {
return $fields;
}
if (isset( $fields[10][ 'value' ] )) {
$timestamp = strtotime( $fields[10][ 'value' ] );
$year=date('Y',$timestamp);
}
if($year < 2007 || $year> 2015) {
// Check the field ID 10 and show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ] [ '10' ] = esc_html__( 'Minimum age requirement is 5 or maximum age requirement is 12', 'plugin-domain' );
}
}
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 );
Just like with the first code snippet, there are a few things you’ll want to update such as the 1425 to match your own form ID, updating the field ID of 10 to match your own field ID as well as the years being evaluated in if($year < 2007 || $year > 2015) and the message that will display on error: Minimum age requirement is 5 or maximum age requirement is 12.
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.
Related
Action References:
FAQ
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 );