How to add Date Picker in Dynamic Add/Remove Custom Fields (Repeater Fields)

You will need to hook “admin_enqueue_script” and in the callback call wp_enqueue_script('jquery-ui-datepicker'); On the add field event, add the appropriate HTML and execute .datepicker(); for the added input element.

In general, you need related code to save the entered values as well as the current fields state. Also code to output the current fields state and values. You’ve done all this for text fields, add code to cover datepicker fields. To some extent the same code handles any field, but the specific quirks for datepicker need to be addressed. Where variations exist by field type, use if/elseif/else or switch/case structures to handle them.

Hi @bcworkz,
Thanks for helping. I have added the codes accordingly but the datepicker is working weirdly. The date selected in first field get reflected in subsiquent field. Not working properly.

Plz tell me where I am getting wrong. Following is the code.

function project_rewards_select_options() {
    $options = array (
        'Option 1' => 'Option 1',
        'Option 2' => 'Option 2',
        'Option 3' => 'Option 3',
    );

    return $options;
}

function project_reward_callback( $post ) {
    wp_nonce_field( 'project_reward_nonce', 'project_reward_nonce' );
    $reward_value = get_post_meta( get_the_ID(), '_project_rewards', true );
    $options = project_rewards_select_options();

?>

    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
        $( '#add-row' ).on('click', function() {
            var row = $( '.empty-row.screen-reader-text' ).clone(true);
            row.removeClass( 'empty-row screen-reader-text' );
            row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
            return false;
        });

        $( '.remove-row' ).on('click', function() {
            $(this).parents('tr').remove();
            return false;
        });
    });
    </script>

    <table id="repeatable-fieldset-one" width="100%">

    <thead>
        <tr>
            <th width="15%">Reward Amount</th>
            <th width="25%">Reward Title</th>
            <th width="10%">Shipping</th>
            <th width="10%">Est. Date</th>  
            <th width="35%">Reward Description</th>
            <th width="5%"></th>
        </tr>
    </thead>

    <tbody>

<?php

    ( $reward_value );

    foreach ( $reward_value as $field ) {

?>

    <tr>
        <td><input type="text" class="widefat" name="reward[]" value="<?php if ( isset ( $field['reward'] ) ) echo esc_attr( $field['reward'] ); ?>" pattern="[1-9]\d*" /></td>

        <td><input type="text" class="widefat" name="reward_title[]" value="<?php if ( isset ( $field['reward_title'] ) ) echo esc_attr( $field['reward_title'] ); ?>" /></td>

        <td>
            <select class="widefat" name="reward_shipping[]">
            <?php foreach ( $options as $label => $value ) : ?>
            <option value="<?php echo $value; ?>"<?php selected( $field['reward_shipping'], $value ); ?>><?php echo $label; ?></option>
            <?php endforeach; ?>
            </select>
        </td>

        <script type="text/javascript">
            jQuery(document) .ready(function($) {
                    $( "#reward_est_date" ).datepicker();
            } );
        </script>

        <td><input type="text" class="widefat" id="reward_est_date" name="reward_est_date[]" value="<?php if ( isset ( $field['reward_est_date'] ) ) echo esc_attr( $field['reward_est_date'] ); ?>" /></td>        

        <td><textarea class="widefat" name="reward_description[]"><?php if ( isset ( $field['reward_description'] ) ) echo esc_attr( $field['reward_description'] ); ?></textarea></td>

        <td><input type="image" class="remove-row" src="<?php bloginfo('template_directory'); ?>/assets/images/remove-icon.png" alt="Submit"  width="35" height="35"></td>
    </tr>

<?php } ?>

    <!-- empty hidden one for jQuery -->
    <tr class="empty-row screen-reader-text">
        <td><input type="text" class="widefat" name="reward[]" /></td>

        <td><input type="text" class="widefat" name="reward_title[]" /></td>

        <td>
            <select class="widefat" name="reward_shipping[]">
            <?php foreach ( $options as $label => $value ) : ?>
            <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
            <?php endforeach; ?>
            </select>
        </td>

        <script type="text/javascript">
            jQuery(document) .ready(function($) {
                    $( "#reward_est_date" ).datepicker();
            } );
        </script>

        <td><input type="text" class="widefat" id="reward_est_date" name="reward_est_date[]" /></td>        

        <td><textarea class="widefat" name="reward_description[]" ></textarea></td>

        <td><input type="image" class="remove-row" src="<?php bloginfo('template_directory'); ?>/assets/images/remove-icon.png" alt="Submit"  width="35" height="35"></td>
    </tr>

    </tbody>

    </table>

    <p><a id="add-row" class="button" href="#">Add Reward</a></p>

<?php   

}

function save_project_reward( $post_id ) {

    // Check if our nonce is set.
    if ( ! isset( $_POST['project_reward_nonce'] ) ) {
        return;
    }

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $_POST['project_reward_nonce'], 'project_reward_nonce' ) ) {
        return;
    }

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    // Check the user's permissions.
    if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {

        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return;
        }

    }
    else {

        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return;
        }
    }

    $reward_data = array();
    $options = project_rewards_select_options();

    $rewards = $_POST['reward'];
    $reward_titles = $_POST['reward_title'];
    $reward_shippings = $_POST['reward_shipping'];
    $reward_est_dates = $_POST['reward_est_date'];    
    $reward_descriptions = $_POST['reward_description'];

    $count = count( $rewards );
    for ( $i = 0; $i < $count; $i++ ) {

        if ( $rewards[$i] != '' ) :
            $reward_data[$i]['reward'] = stripslashes( strip_tags( $rewards[$i] ) );

        if ( in_array( $reward_shippings[$i], $options ) )
            $reward_data[$i]['reward_shipping'] = stripslashes( strip_tags( $reward_shippings[$i] ) );
                else
            $reward_data[$i]['reward_shipping'] = '';
endif;

        if ( $reward_titles[$i] != '' ) :
            $reward_data[$i]['reward_title'] = stripslashes( strip_tags( $reward_titles[$i] ) );
endif;

        if ( $reward_descriptions[$i] != '' ) :
            $reward_data[$i]['reward_description'] = stripslashes( $reward_descriptions[$i] );
endif;

        if ( $reward_est_dates[$i] != '' ) :
            $reward_data[$i]['reward_est_date'] = stripslashes( $reward_est_dates[$i] );
endif;             

    }

    update_post_meta( $post_id, '_project_rewards', $reward_data );

}

add_action( 'save_post', 'save_project_reward' );

I think you need to provide dummy values in all the “empty hidden one for jQuery” fields. I’m guessing .datepicker() causes some value to be assigned, throwing off the correlation with other fields. A single space is adequate. Empty strings and no values throw things off.

To avoid similar issues should a user not provide data in a field, consider assigning a space as a default value in every field. Before saving values, use trim() to remove any initial spaces that remain in the data.