Minimum age with the jQuery UI Datepicker

Our client want User Date Of Birth Field in Worpdress Registration Form with restrict the minimum age of registering users has to be 18. For Registration we using Theme My Login — WordPress Plugins and for DOB Calendar use the fabulous jQuery UI Datepicker

1st – How to add jQuery Datepicker in WordPress website

In WordPress, Very easy to add jQuery Datepicker by adding few line code.
to use jQuery Datepicker in your wordpress website you need to load require jQuery script and css for Datepicker.
with use of WordPress wp_enqueue_scripts action load jQuery Datepicker CSS and JS file. add below code in your active theme functions.php file

add_action( 'wp_enqueue_scripts', 'wdo_theme_enqueue_styles', 1000);
function wdo_theme_enqueue_styles() {
   wp_enqueue_script( 'jquery-ui-datepicker' );
   wp_register_style( 'jquery-ui', 'https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
   wp_enqueue_style( 'jquery-ui' ); 
}

In Form in which you want to use Datepicker add below jQuery script

Let’s back on our main task – Set minimum age limit with the jQuery UI Datepicker
With following few lines Javascript code it’s very easy to set up a Date of Birth field so that the a user has to be a least 18 years old from current Day.

$(function() {
  $("#dob").datepicker(
  {
      minDate: new Date(1900,1-1,1), maxDate: '-18Y',
      dateFormat: 'dd/mm/yy',
      defaultDate: new Date(1970,1-1,1),
      changeMonth: true,
      changeYear: true,
      yearRange: '-110:-18'
    }
  );					
});

To use jQuery UI Datepicker we need load jQuery UI Datepicker css and js files with use of WordPress wp_enqueue_scripts action below code

add_action( 'wp_enqueue_scripts', 'wdo_enqueue_styles_script');
function wdo_enqueue_styles_script() {
    wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/css/ui-lightness/jquery-ui-1.8.16.custom.css', array(''));
    wp_enqueue_script('wdo-js-dp',get_stylesheet_directory_uri().'/js/jquery-ui-1.8.16.custom.min.js',array('jquery'));
   wp_enqueue_script('wdo-js-dpa',get_stylesheet_directory_uri().'js/jquery-ui-sliderAccess.js',array('wdo-js-dp'));
}
// make sure you uploaded css, js files on correct folder path given in above code

With load JS, CSS files by above code it get loaded in all pages of your wordpress sites. so if you sure you need Jquery Datepicker only on User Registration page than i recommended instead of load Datepicker library files by wp_enqueue_scripts action direct add it on register-form.php like below

How to add additional Field in Registration form by Theme By login plugin

– Move register-form.php file from Theme By login plugin folder to active theme.
– Add Date of Birth field code where you want to show it

      
        
        *
      
    

Validate DOB field required

add_filter( 'registration_errors', 'registration_custom_errors', 0, 3 );
function registration_custom_errors( $errors, $sanitized_user_login, $user_email ) {
	if ( ! isset( $_POST['user_dob'] )  || $_POST['user_dob']=='' ) {
		$errors->add( 'user_dob_error', __( 'ERROR: You must enter Date of Birth.', 'theme-my-login' ) );
	}
	return $errors;
}

Save DOB field value in Database

On User form submit action we need capture custom added DOB field value and store in Database

add_action( 'user_register', 'custom_update_user' );
function custom_update_user( $user_id ) {
	if ( isset( $_POST['user_dob'] ) && $_POST['user_dob']!=''  ) {
		 update_user_meta( $user_id, '_user_dob', $_POST['user_dob'] );
	}
}

Show User’s DOB in wp-admin side Users list page

add_filter( 'manage_users_columns', 'wdo_usr_column_addded_to_user' );
function wdo_usr_column_addded_to_user( $column ) {
    $column['_user_dob'] = 'DOB';
    return $column;
}

add_filter( 'manage_users_custom_column', 'wdo_usr_column_addded_to_user_row', 10, 3 );
function wdo_usr_column_addded_to_user_row( $val, $column_name, $user_id ) {
    global $wpdb;
	if ( '_user_dob' == $column_name ) {
		//$user = get_userdata( $user_id );
		$dob = get_user_meta( $user_id, '_user_dob', true );
		if($dob =='') $dob ='--';
		return $dob ;
	}
}