WordPress und JQuery-UI-datepicker

7. September 2011 - HTML, JavaScript, wordpress

Die Integration von datepicker in eine WordPress Seite mit einem Datumsfeld ist sehr einfach.

English Summary:  “ The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.“ jquerui.com

Folgende Elemente vom datepicker müssen von jquery.com ins Plugin geladen werden.

  • jquery.ui.datepicker.js
  • jquery-ui-1.8.16.custom.css
  • alle Bilder
  • die Anpassung an das deutsche Datumsformat von http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-de.js

Dazu benötigt man noch den jquery-ui-core, der ist aber in WordPress bereits vorhanden.

Die JavaScript Datei zum Init vom datepicker sieht dann etwa so aus:

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

jQuery(function($){
 $.datepicker.regional['de'] = {
 closeText: 'schließen',
 prevText: 'zurück',
 nextText: 'Vor',
 currentText: 'heute',
 monthNames: ['Januar','Februar','März','April','Mai','Juni',
 'Juli','August','September','Oktober','November','Dezember'],
 monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
 'Jul','Aug','Sep','Okt','Nov','Dez'],
 dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
 dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
 dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
 weekHeader: 'Wo',
 dateFormat: 'dd.mm.yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''};
 $.datepicker.setDefaults($.datepicker.regional['de']);
 });   .....................................

In diesem Fall wird der datepicker an alle input Felder mit der Klasse „nf_datum“ gebunden.