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' );
Code-Sprache: PHP (php)

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>';
Code-Sprache: PHP (php)

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
Code-Sprache: JavaScript (javascript)
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.

Kommentarformular bitte nicht für Supportanfragen verwenden

4 Kommentare

  1. 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

    1. 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).

  2. 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.

    1. 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“)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.