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
 */
function load_my_script_for_pmpro() {
	
	// defined( 'IS_PROFILE_PAGE' ) ||  current_user_can('administrator') )

	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( {
			dateFormat: 'yy-mm-dd',
			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;
		padding: 5px;
	}
	.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
	}
	.ui-datepicker .ui-datepicker-header {
		position: relative;
		padding: .2em 0;
	}
	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		position: absolute;
		top: 2px;
		width: 1.8em;
		height: 1.8em;
	}
	.ui-datepicker .ui-datepicker-prev-hover,
	.ui-datepicker .ui-datepicker-next-hover {
		top: 1px;
	}
	.ui-datepicker .ui-datepicker-prev {
		left: 2px;
	}
	.ui-datepicker .ui-datepicker-next {
		right: 2px;
	}
	.ui-datepicker .ui-datepicker-prev-hover {
		left: 1px;
	}
	.ui-datepicker .ui-datepicker-next-hover {
		right: 1px;
	}
	.ui-datepicker .ui-datepicker-prev span,
	.ui-datepicker .ui-datepicker-next span {
		display: block;
		position: absolute;
		left: 50%;
		margin-left: -8px;
		top: 50%;
		margin-top: -8px;
	}
	.ui-datepicker .ui-datepicker-title {
		margin: 0 2.3em;
		line-height: 1.8em;
		text-align: center;
	}
	.ui-datepicker .ui-datepicker-title select {
		font-size: 1em;
		margin: 1px 0;
	}
	.ui-datepicker select.ui-datepicker-month,
	.ui-datepicker select.ui-datepicker-year {
		width: 45%;
	}
	.ui-datepicker table {
		width: 100%;
		font-size: .9em;
		border-collapse: collapse;
		margin: 0 0 .4em;
	}
	.ui-datepicker th {
		padding: .7em .3em;
		text-align: center;
		font-weight: bold;
		border: 0;
	}
	.ui-datepicker td {
		border: 0;
		padding: 1px;
	}
	.ui-datepicker td span,
	.ui-datepicker td a {
		display: block;
		padding: .2em;
		text-align: right;
		text-decoration: none;
	}
	.ui-datepicker .ui-datepicker-buttonpane {
		background-image: none;
		margin: .7em 0 0 0;
		padding: 0 .2em;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	.ui-datepicker .ui-datepicker-buttonpane button {
		float: right;
		margin: .5em .2em .4em;
		cursor: pointer;
		padding: .2em .6em .3em .6em;
		width: auto;
		overflow: visible;
	}
	.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
		float: left;
	}

	/* with multiple calendars */
	.ui-datepicker.ui-datepicker-multi {
		width: auto;
	}
	.ui-datepicker-multi .ui-datepicker-group {
		float: left;
	}
	.ui-datepicker-multi .ui-datepicker-group table {
		width: 95%;
		margin: 0 auto .4em;
	}
	.ui-datepicker-multi-2 .ui-datepicker-group {
		width: 50%;
	}
	.ui-datepicker-multi-3 .ui-datepicker-group {
		width: 33.3%;
	}
	.ui-datepicker-multi-4 .ui-datepicker-group {
		width: 25%;
	}
	.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
	.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
		border-left-width: 0;
	}
	.ui-datepicker-multi .ui-datepicker-buttonpane {
		clear: left;
	}
	.ui-datepicker-row-break {
		clear: both;
		width: 100%;
		font-size: 0;
	}

	/* RTL support */
	.ui-datepicker-rtl {
		direction: rtl;
	}
	.ui-datepicker-rtl .ui-datepicker-prev {
		right: 2px;
		left: auto;
	}
	.ui-datepicker-rtl .ui-datepicker-next {
		left: 2px;
		right: auto;
	}
	.ui-datepicker-rtl .ui-datepicker-prev:hover {
		right: 1px;
		left: auto;
	}
	.ui-datepicker-rtl .ui-datepicker-next:hover {
		left: 1px;
		right: auto;
	}
	.ui-datepicker-rtl .ui-datepicker-buttonpane {
		clear: right;
	}
	.ui-datepicker-rtl .ui-datepicker-buttonpane button {
		float: left;
	}
	.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
	.ui-datepicker-rtl .ui-datepicker-group {
		float: right;
	}
	.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
	.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
		border-right-width: 0;
		border-left-width: 1px;
	}

	/* Icons */
	.ui-datepicker .ui-icon {
		display: block;
		text-indent: -99999px;
		overflow: hidden;
		background-repeat: no-repeat;
		left: .5em;
		top: .3em;
	}
	</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');