So fügen Sie die Datumsauswahl in Dynamic hinzu Benutzerdefinierte Felder hinzufügen / entfernen (Repeater-Felder)

Ich habe Dynamische Hinzufügen / Entfernen von benutzerdefinierten Feldern (Repeater-Felder) in meinen benutzerdefinierten Post-Typen erstellt. Es funktioniert perfekt. Ich möchte ein neues JQuery-Datumsauswahlfeld hinzufügen. Ich habe versucht, Code zu erstellen, und habe auch im Internet gesucht, aber kein Glück gefunden.

Bitte hilf mir.

Folgendes ist mein 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(); ?>  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; }); });  
Reward Amount Reward Title Shipping Reward Description
<input type="text" class="widefat" name="reward[]" value="" pattern="[1-9]\d*" /> <input type="text" class="widefat" name="reward_title[]" value="" /> $value ) : ?> <option value=""> <input type="image" class="remove-row" src="/assets/images/remove-icon.png" alt="Submit" width="35" height="35">
$value ) : ?> <option value=""> <input type="image" class="remove-row" src="/assets/images/remove-icon.png" alt="Submit" width="35" height="35">

Add Reward

<?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_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; } update_post_meta( $post_id, '_project_rewards', $reward_data ); } add_action( 'save_post', 'save_project_reward' );

Solutions Collecting From Web of "So fügen Sie die Datumsauswahl in Dynamic hinzu Benutzerdefinierte Felder hinzufügen / entfernen (Repeater-Felder)"

@LWS-Mo, Danke für deine Hilfe. Ich habe die Codes entsprechend hinzugefügt, aber der Datepicker funktioniert merkwürdig. Das im ersten Feld ausgewählte Datum wird im Sekundärfeld angezeigt. functioniert nicht richtig.

Plz sag mir, wo ich falsch liege. Folgendes ist der Code.

 function project_rewards_select_options() { $options = array ( 'Option 1' => 'Option 1', 'Option 2' => 'Option 2', 'Option 3' => 'Option 3', ); return $options; } function crazicle_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(); ?>   < ?php ( $reward_value ); foreach ( $reward_value as $field ) { ?>  < ?php } ?> 
Reward Amount Reward Title Shipping date Reward Description

Add Reward

< ?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_dates = $_POST['reward_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_descriptions[$i] != '' ) : $reward_data[$i]['reward_date'] = stripslashes( $reward_dates[$i] ); endif; } update_post_meta( $post_id, '_project_rewards', $reward_data ); } add_action( 'save_post', 'save_project_reward' );

WordPress hat den jQuery Datepicker bereits enthalten. Sie können also das Standard-WP-Skript in die Warteschlange stellen. Soweit ich weiß, enthält WP jedoch nicht das notwendige Styling für den Datepicker!
Versuchen Sie also, das WP-Skript und z. B. Stile aus einer externen Quelle in die Warteschlange einzureihen:

 function my_datepicker_enqueue() { wp_enqueue_script( 'jquery-ui-datepicker' ); // enqueue datepicker from WP wp_enqueue_style( 'jquery-ui-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css', true); } add_action( 'admin_enqueue_scripts', 'my_datepicker_enqueue' ); 

Erstellen Sie ein neues HTML-Eingabefeld mit mindestens einer class und einem Namen. HTML des Eingabefeldes: (Sie haben bereits einige Eingabefelder definiert, springen Sie also zum Skript)

  

Dann füge ein Skript hinzu, um den Datepicker für unser neues Element zu initiieren. Skript: (stellen Sie sicher, dass Sie das richtige Eingabeelement anvisieren, wir betrachten hier die definierte class, weil wir mehrere Instanzen verwenden möchten.)

 jQuery(document).ready(function($){ $('.my-custom-datepicker-field').datepicker({ dateFormat: 'dd-mm-yy', //maybe you want something like this showButtonPanel: true }); }); 

Aktualisieren:
Ich hatte einige Probleme beim ersten Lesen des Codes und außerdem einige Fehler in Ihrem Code. Zuerst konnte ich das gleiche merkwürdige Verhalten sehen. Ich habe jetzt ein Testplugin auf einer Dev-Seite eingerichtet, und dort funktioniert es jetzt.

1: Sie haben Ihre Speicherfunktion eingerichtet, so dass Sie nicht einfach ein Datum eingeben und speichern können. Sie müssen entweder einen Betrag, einen Titel oder eine Beschreibung hinzufügen, um speichern zu können. Ich denke, das ist von dir beabsichtigt?

2: In der Speicherfunktion hast du folgenden Code:

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

Nur wenn das Beschreibungsfeld nicht leer ist, wird das Datum gespeichert. Scheint ein Tipperrors, weil die anderen Felder gut aussehen. Ändern:

 if ( $reward_data[$i] != '' ) : $reward_data[$i]['reward_date'] = stripslashes( $reward_dates[$i] ); endif; 

3: In Ihrem callbackcode haben Sie diese Felder als Datumsauswahlfelder:

  

und

  

Beide benannten _custom_datepicker[] . Aber in deiner Speicherfunktion versuchst reward_date stattdessen Felder namens reward_date zu speichern.

Auch sollte die id einzigartig sein. Aber Sie fügen allen Datumsfeldern dieselbe id hinzu. Sie könnten einfach die id aus diesen Feldern entfernen, sie wird sowieso nicht benötigt.

4. Wenn Sie Felder dynamisch hinzufügen, wie Sie möchten, müssen Sie die Datepicker-JS-function ändern. Und anstatt den JS-Code inline zu laden (und mehrmals, wie Sie es getan haben), empfehle ich, eine JS-Datei in die Warteschlange zu stellen. Versuchen Sie also, Ihren JS-Code durch etwas wie folgt zu ersetzen:

 jQuery(document).ready(function($){ // your default code $( '#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; }); //changed to be used on dynamic field which gets added and removed from DOM //if the element with the class .my-custom-datepicker-field gets focus, add datepicker $(document).on('focus', '.my-custom-datepicker-field', function(){ $(this).datepicker({ dateFormat: 'dd-mm-yy', //maybe you want something like this showButtonPanel: true }); }); }); 

Nachdem ich diese Dinge repariert und die JS-Datei mit dem Code eingereiht habe, wie WordPress es will, funktioniert es jetzt.