Datumsauswahlfeld zur Plugin-Einstellungsseite in WordPress hinzufügen

Ich entwickle ein einfaches Plugin (meine erste WP-Plugin-Entwicklung) und versuche, ein hinzuzufügen datepicker Feld auf der Plugin-Einstellungsseite mit diesem Code:

add_settings_field('example_date_picker', 'Example Date Picker', 'pu_display_date_picker', 'ft_admin.php', '', array());
add_action('admin_enqueue_scripts', 'enqueue_date_picker');

function pu_display_date_picker($args)
{
    extract($args);
    echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
}

/**
 * Enqueue the date picker
 */
function enqueue_date_picker()
{
    wp_enqueue_script(
            'field-date-js', 'ft.js', array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), time(), true
    );

    wp_enqueue_style('jquery-ui-datepicker');
}

Der Code stammt daraus Post aber ich bekomme diesen Fehler:

Schwerwiegender Fehler: Aufruf der undefinierten Funktion add_settings_field() in /var/www/html/arubaair/wp-content/plugins/frequent-traveler/frequent-traveler.php in Zeile 41

Und ich weiß nicht warum. Das Plugin ist installiert und aktiv und wenn ich den Code entferne, funktioniert alles. Was mache ich falsch?

AKTUALISIEREN

Ich ändere den ursprünglichen Code in diesen:

add_action('admin_enqueue_scripts', 'enqueue_date_picker');

function enqueue_date_picker()
{
    wp_enqueue_script(
            'field-date-js', 'ft.js', array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), time(), true
    );

    wp_enqueue_style('jquery-ui-datepicker');
}

Die Datei ft.js ist eingeschaltet js Plugin-Verzeichnis. Dann habe ich auf der Seite, auf der ich das Formular erstelle, diese Zeile:

<input type="date" id="frequent_traveler_from_date" name="frequent_traveler_from_date" value="" class="datepicker" />

Und ft.js enthält diesen Code:

jQuery(document).ready(function() {
    jQuery('.datepicker').datepicker();
});

Und es funktioniert nicht. Ich überprüfe die Seitenquelle und die Skripte werden nicht geladen. Warum?

Da Ihr Code nicht kompilierbar ist, werde ich ein funktionierendes Beispiel veröffentlichen, das auf dem Grundgerüst Ihres Beispielcodes basiert. Erforderlich: PHP 5.3, siehe Lambda-Funktionen:

add_action( 'admin_menu', function()
{
    $hook = add_menu_page( 
        'Date Pick', 
        'Date Pick', 
        'manage_options', 
        'sub-page-date-picker', 
        function() { 
            echo '<h1>Date Pick</h1>'; 
            echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
        }
    );
    # echo $hook; die(); // get the correct hook slug

    add_action( 'admin_enqueue_scripts', function( $hook )
    {
        if( 'toplevel_page_sub-page-date-picker' !== $hook )
            return;

        wp_enqueue_script(
            'field-date-js', 
            plugins_url( '/ft.js', __FILE__ ), 
            array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), 
            time(), 
            true
        );
        wp_enqueue_style('jquery-ui-datepicker');
    });
});  

Und ft.js mit einer kleinen Anpassung:

jQuery(document).ready(function($) {
    $('.datepicker').datepicker();
});

Zum Laden des Balgskripts und -stils fügen Sie Balgcode zum Thema hinzu Funktionen.php Datei.

Skript für den Frontend-Einsatz

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 

Skript für den Backend-Einsatz

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 

Geben Sie einfach auch diesen Code ein Funktionen.php Datei oder unten diesen Code.

function register_datepiker_submenu() {
        add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
    }

    function datepiker_submenu_callback() { ?>
            <div class="wrap">
             <input type="text" class="datepicker" name="datepicker" value=""/>
            </div>
            <script>
            jQuery(function() {
                jQuery( ".datepicker" ).datepicker({
                    dateFormat : "dd-mm-yy"
                });
            });
            </script> 
    <?php }
        add_action('admin_menu', 'register_datepiker_submenu');
    ?>

Im Admin-Bereich steht Ihnen eine Datumsauswahl zur Verfügung Menü->Einstellungen->Datumsauswahl. Weitere Details anzeigen Fügen Sie einen jQuery DatePicker zum WordPress-Theme oder -Plugin hinzu.