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.