How do I display a custom field in an existing form on the front end?

Question

I just have one custom field (from metabox.io) that I need added to the front end of an existing form. Can someone just clarify the steps. I tried following this tutorial: https://voodoopress.com/add-a-meta-box-to-use-custom-fields-on-front-end-post-form/ but am confused with the steps such as adding the input fields into an array. Do we only need to do this if we're creating a form from scratch? Will this array already exist if I'm using an existing form?

I just need someone to clarify how to get the values of the metabox into an input field on the form and saving the data if the user edits the page and also if they submit.

**UPDATE

Admin code:

function get_dates( $meta_boxes ) {
$prefix = 'prefix-';

$meta_boxes[] = array(
    'id' => 'mydates',
    'title' => esc_html__( 'Dates Available', 'mydates' ),
    'post_types' => array( 'listing', 'page' ),
    'context' => 'side',
    'priority' => 'low',
    'autosave' => false,
    'fields' => array(
        array(
            'id' => $prefix . 'mydates',
            'type' => 'date',
            'name' => esc_html__( 'Date Picker', 'mydates' ),
            'desc' => esc_html__( 'Select multiple dates', 'mydates' ),
            'clone' => true,
            'sort_clone' => true,
        ),
    ),
);

return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'get_dates' );

Front end form (editing and submitting the form)

$mydates = if(isset($_POST['prefix-mydates'])) echo $_POST['prefix-mydates'];


<fieldset>
<input type="text" value=""  id="prefix-mydates" class="rwmb-date hasDatepicker" size="60" tabindex="20" name="prefix-mydates">
</fieldset>

Answer 1

This worked for me:

In the template file (used with that existing form), before the get_header(); call/line, add this code:

global $my_dates_MB;

// If you changed the meta box ID (i.e. mydates), change it also below.
add_filter( 'rwmb_show_mydates', '__return_false' );

$meta_boxes = get_dates( [] );
$my_dates_MB = rwmb_get_meta_box( $meta_boxes[0] );

if ( isset( $_POST['my_dates_post_ID'] ) ) {
    // Save the meta data.
    $my_dates_MB->save_post( $_POST['my_dates_post_ID'] );
}

// Enqueue styles and scripts.
add_action( 'wp_enqueue_scripts', [ $my_dates_MB, 'enqueue' ] );
//$my_dates_MB->enqueue();

Then replace this:

$mydates = if(isset($_POST['prefix-mydates'])) echo $_POST['prefix-mydates'];


<fieldset>
<input type="text" value=""  id="prefix-mydates" class="rwmb-date hasDatepicker" size="60" tabindex="20" name="prefix-mydates">
</fieldset>

..with this: (UPDATED; May 02 2018)

<?php
global $my_dates_MB;

// Get the current post ID.
$post_id = get_the_ID();

// Set the post ID for the "meta box".
$my_dates_MB->set_object_id( $post_id );

// Show the meta box.
$my_dates_MB->show();
?>

<input type="hidden" name="my_dates_post_ID" value="<?php echo $post_id; ?>" />

That will print the whole "meta box" as defined in your custom get_dates() function (btw, change its name to something unique), but that should not be an issue since the meta box has just one field.

You'd get something like this: (not including the "Submit" button)