Anchor link to top of page

webentwicklerin.at

calendar 2428560 1920

WordPress: jQuery Datepicker in Plugin-Einstellungen integrieren

,
,

WordPress verfügt über eine umfangreiche Bibliothek an jQuery-Plugins die bei Bedarf nur namentlich eingebunden werden müssen, unter anderem auch den Datepicker. Einen detailierten Überblick verschafft das Entwicklerhandbuch von WordPress.

Erforderliche Skripte und CSS für den Datepicker

Wichtig ist hierbei, die Abhängigkeiten der Datepicker-Initialisierung von jquery-ui-core und jquery-ui-datepicker' anzugeben, oder sie vorher zu enqueuen (wp_enqueue_script( 'jquery-ui-core' ); wp_enqueue_script( 'jquery-ui-datepicker' );).

function my_plugin_admin_scripts() {
    $screen = get_current_screen();
    /* only on our settings page */
    if ( $screen->id == 'settings_page_ppp-test-plugin' ) {
        /* get jquery ui css from a cdn (or host it by yourself) */
        wp_enqueue_style( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css');
        wp_enqueue_script( 'my-plugin-init-datepicker', plugin_dir_url( dirname(__FILE__ )) . 'js/admin-scripts.js', array('jquery-ui-core', 'jquery-ui-datepicker'), '', true );
    }
}
>add_action( 'admin_enqueue_scripts', 'my_plugin_admin_scripts' );

plugin_dir_url( dirname(__FILE__ )) geht davon aus, dass sich die Javascript-Datei unter my-plugin/js befindet, und die Admin-Datei unter my-plugin/ein-verzeichnis-drunter.

Innerhalb der Settings-Page ein Textfeld mit der Klasse datepicker anlegen.

$options = get_option('ppp_test_settings');
echo '<p><label for="ppp_test_settings[startdate]">' . esc_html__( 'Date Val', 'ppp-test-plugin' ) . '</label><br />' . 
'<input type="text" placeholder="' . esc_attr__('Startdate:', 'ppp-test-plugin' ) . '" class="datepicker" id="startdate" name="ppp_test_settings[startdate]" value="'.( !empty($options['startdate']) ? esc_attr($options['startdate']) : '' ).'" /></p>';

Inhalt von admin-script.js

jQuery(document).ready(function($) {
    $('.datepicker').datepicker({
        autoclose: true,
        dateFormat: 'dd.mm.yy' /* das kann natürlich auch über Einstellungen gewählt / von Einstellungen übernommen und mit <code>wp_localize_script
datepicker
jQuery UI datepicker im Standardformat

In der Praxis sieht es bei mir etwas anders aus (objektorientiert). Die benötigten Javascript-Dateien direkt in der Funktion aufzurufen, welche die Einstellungsseite generiert bindet Skripte auch nur da ein, wo sie erforderlich sind. Festzustellen, welcher Screen grade aktiv ist, entfällt damit.

4 Antworten zu „WordPress: jQuery Datepicker in Plugin-Einstellungen integrieren“

  1. Andreas

    Hallo und danke für den interessanten Beitrag. Leider bin ich, was jquery und WP-PROGRAMMIERUNG angeht, kein Spezi. Hilfreich wäre ein deutsches Tutorial, wie ich den Datepicker einbinden und anpassen kann. Die Beschreibung auf der Jquery-Homepage sind ganz schön kompliziert. Ich habe z.b. Probleme mit der Layoutanpassung. Beim Datenbanken reagiert das zweite Feld nicht auf die Eingabe des ersten Feldes.

  2. webentwicklerin

    Hallo Andreas, spät aber doch (in den Tagen vor und nach WordPress-Updates gibt es immer viel zu tun)…
    Ich würde mich selbst auch nicht unbedingt als Javascript-Guru sehen. Allerdings wurde Javascript in WordPress immer wichtiger. Anfang erging es mir mit der jQuery-Site ähnlich. Das ist eben ein Handbuch für Entwickler die wissen, was sie nachschlagen und warum. Als Einsteiger weiß man noch nicht immer so genau, wonach man suchen muss.

    Um dynamische Änderungen an den Daten zu sehen, müssen z.B. abhängige Felder ebenfalls mit jQuery befüllt werden. – Es bringt allerdings wenig, Beispiele anzuführen. Ich weiß nicht, wo der Datepicker benötigt wird, in einem Theme oder Plugin, oder überhaupt innerhalb von WordPress? jQuery für Einsteiger und auf Deutsch habe ich zum Beispiel auf javascript-kurs.de gefunden. – Bitte beachten, dass WordPress seine eigene jQuery-Bibliothek hat, in der $ erst aktiviert werden muss. Ansonsten muss $(„#element“) so geschrieben werden: jQuery(„#element“)

  3. Andreas

    Danke für die Antwort. Ich bin inzwischen ein kleines Stück weiter. Habe mir auf der Startseite mit PHP selbst ein Formular mit An- und Abreise gebastelt, welches die Werte an eine Seite mit einem cf7-Formular übergibt. Das Design habe ich mit vielen Versuchen, die richtige css zu finden, hinbekommen. Was ich jetzt noch hinbekommenmuss, ist das Datumsformat. Aktuell ist es „9. März 2022“. Ich brauche aber „09.03.2022“. Mein Theme ist „Enfold“. Das Problem sind unterschiedliche Bindungen. Das Thema selbst hat ein datepicker. Bei allen, die ich bisher fand, war das Format“Y/m/d“.Wie kriegeich raus, woher er sich das Datumsformat holt?
    Andreas

  4. webentwicklerin

    Wir sind jetzt bei PHP nehme ich an? Von Ferne sehe ich die Anforderung zu unklar um genau zu wissen, wie die Lösung in diesem Fall letztendlich aussehen muss, und mit Enfold fehlt mir die Erfahrung. Das Datumsformat in Enfold kann allerdings über einen Filter angepasst werden. https://kriesi.at/support/topic/month-and-day-in-reverse-order-on-date-picker/ (die Frage ist, wie weit das dann im PHP Output Berücksichtigung findet). Zu finden ist die Funktion unter enfold/framework/class-form-generator.php.

    Wenn ein Datum in einem festen Format ausgegeben werden soll, dann z.B. so: date_format($date,“d.m.Y“); –
    Wird einfach nur der Wert ausgegeben wie er vom Datepicker gespeichert wurde, würde das vielleicht funktionieren:

    $date=date_create($gespeichertesdatum);
    echo date_format($date,“d.m.Y“);

    Eigentlich ist es üblich, Datumsformate mit gettext auszugeben. Nur so kann dann z.B. der Engländer 03/24/2022 sehen, während wir 24.03.2022 angezeigt bekommen. – Datumsformate sind ein recht umfangreiches Thema, zumal, wenn man dann noch das Erfordernis einbezieht, auch in Datumsformaten vorkommende Begriffe je nach Land zu übersetzen (Tages- und Monatsnamen, wofür die WP-Funktion date_i18n() sorgt).

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

vielleicht auch interessant: