Thank you for sharing the access details.
I didn't find any custom code in the user form "Upgrade for VIP membership", for the custom date picker field.
As your form includes a date type field to edit the current user's "Date of Birth" field, here are the slightly different steps, that you'll need to follow:
1. In the form's field editor, replace:
[cred_field field="date-of-birth" force_type="field" class="form-control" output="bootstrap"]
With:
<input type="text" class="shadow-event-date" name="shadow-event-date" value="[types usermeta='date-of-birth' style='text' format='F j, Y' current_user='true'][/types]">
<div style="display:none;">
[cred_field field="date-of-birth" force_type="field" class="form-control" output="bootstrap"]
</div>
This will add a new shadow text field for the date of birth and hide the actual date type field.
2. In the form's "JS editor", include the following custom script, that will connect a date picker with the shadow date of birth field and fill its value in the hidden date type field when a date is selected:
jQuery( document ).ready(function() {
jQuery( function() {
jQuery( 'input[name="shadow-event-date"]' ).datepicker();
});
jQuery('input[name="shadow-event-date"]').on('change', function() {
var newVal = this.value;
jQuery('input[name="wpcf-date-of-birth[display-only]"]').val(newVal);
jQuery('input[name="wpcf-date-of-birth[datepicker]"]').val(newVal);
});
});
3. The last step would be to add a custom function attached to the "cred_save_data" hook, that saves the value from the shadow date of the birth field into the actual date type date of birth field when the form is submitted:
add_action( 'cred_save_data', 'custom_shadow_dates_func', 10, 2 );
function custom_shadow_dates_func( $post_id, $form_data ) {
if ($form_data['id']==106337) {
$date = new DateTime($_POST['shadow-event-date']);
$date_timestamp = $date->getTimestamp();
update_user_meta($post_id, 'wpcf-date-of-birth', $date_timestamp);
}
}
The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.
