PMPro Customization: Register Helper - Add JQuery widget date of birth date picker to checkout

pmpro-customizations.php

<?php
/*
Plugin Name: PMPro Customizations
Plugin URI: https://www.paidmembershipspro.com/wp/pmpro-customizations/
Description: Customizations for my Paid Memberships Pro Setup
Version: .1
Author: Paid Memberships Pro
Author URI: https://www.paidmembershipspro.com
*/
 
//Now start placing your customization code below this line

function my_pmprorh_init()
{
	//don't break if Register Helper is not loaded
	if(!function_exists( 'pmprorh_add_registration_field' )) {
		return false;
	}
	
	//define the fields
	$fields = array();
	$fields[] = new PMProRH_Field(
		'date_of_birth', // input name, will also be used as meta key
		'text', // type of field
		array(
			'label'     => 'Date Of Birth', // custom field label
			'class'     => 'my-datepicker', // date class
			'profile'   => true, // show in user profile
			'required'  => true, // make this field required
			// 'addmember' => true, // Uncomment to display in Add Member
			// 'memberslistcsv' => true, // Uncomment to Include in Member List CSV Export
		)
	);
	//add the fields into a new checkout_boxes are of the checkout page
	foreach($fields as $field)
		pmprorh_add_registration_field(
			'checkout_boxes',				// location on checkout page
			$field						// PMProRH_Field object
		);
	//that's it. See the PMPro Register Helper readme for more information and examples.
}
add_action( 'init', 'my_pmprorh_init' );


/**
 * Load content for specific pages, checkout or confirmation page
 * Add this code to your PMPro Customizations Plugin - https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/
 */
function load_my_script_for_pmpro() {
	
	global $pmpro_pages;
	if ( is_page( $pmpro_pages['checkout'] ) || is_page( $pmpro_pages['confirmation'] ) ||  is_page( $pmpro_pages['account'] ) ||  is_page( $pmpro_pages['billing'] ) ||  is_page( $pmpro_pages['cancel'] ) ||  is_page( $pmpro_pages['invoice'] ) ||  is_page( $pmpro_pages['levels'] ) ||  is_page( $pmpro_pages['popup-cvv'] ) ) {
	?>
	<script>
	jQuery(document).ready(function($) {
		$( ".my-datepicker" ).datepicker( {
			showButtonPanel: true,
			changeMonth: true,
			changeYear: true
		});            
	});
	</script>
	<style>
	/* Customize the style and layout for the Jquery datepicker here */
	#ui-datepicker-div {
		background-color: #fff;
		border: 1px solid #333;
	}
	</style>
	<?php
	}
}
add_action( 'wp_head', 'load_my_script_for_pmpro' );


function my_enqueue_scripts() 
 {
      // tell WordPress to load the JQuery Datepicker, the ui-core depency will automatically be loaded,
    wp_enqueue_script('jquery-ui-datepicker');  
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');