Questions answered by this recipe
- how can I add a date picker to my input fields ?
Put the following files into your cookbook/ directory:
Put the following files into your pub/ directory, standard will be in an own subdirectory named "datepicker":
- datepicker.js.txtΔ (rename this to datepicker.js)
- For pre-PHP 5.5 you can still use the older version datepicker_prePHP5-5.phpΔ
wikifarm-dir +- cookbook/ ! + datepicker.php +- pub/ +- datepicker/ + datepicker.js + datpickerselect.gif + datepicker-default.css (and your own css-files)
Add the following statement to local/config.php:
You have to translate some pmwiki-strings via the Pmwiki(XX).XLPageLocal page, e.g. for the German version add the following lines to PmWikiDe.XLPageLocal:
# für datepicker 'select' => 'Datum auswählen' 'today' => 'heute' 'tomorrow' => 'morgen' 'this month' => 'akt. Monat' 'Today is' => 'heute ist' 'close' => 'schliessen' 'press to select date' => 'Auswahl des Datums aus Kalender' 'Su' => 'So' 'Mo' => 'Mo' 'Tu' => 'Di' 'We' => 'Mi' 'Th' => 'Do' 'Fr' => 'Fr' 'Sa' => 'Sa' 'Sunday' => 'Sonntag' 'Monday' => 'Montag' 'Tuesday' => 'Dienstag' 'Wednesday' => 'Mittwoch' 'Thursday' => 'Donnerstag' 'Friday' => 'Freitag' 'January' => 'Januar' 'February' => 'Februar' 'March' => 'März' 'April' => 'Apil' 'May' => 'Mai' 'June' => 'Juni' 'July' => 'Juli' 'August' => 'August' 'September' => 'September' 'October' => 'Oktober' 'November' => 'November' 'December' => 'Dezember'
For the French version add the following lines to PmWikiFr.XLPageLocal:
# pour datepicker 'select' => 'Choisir' 'today' => 'aujourd hui' 'tomorrow' => 'demain' 'press to select date' => 'appuyez ici pour choisir la date' 'Su' => 'Dim' 'Mo' => 'Lun' 'Tu' => 'Mar' 'We' => 'Mer' 'Th' => 'Jeu' 'Fr' => 'Ven' 'Sa' => 'Sam' 'Sunday' => 'Dimanche' 'Monday' => 'Lundi' 'Tuesday' => 'Mardi' 'Wednesday' => 'Mercredi' 'Thursday' => 'Jeudi' 'Friday' => 'Vendredi' 'January' => 'Janvier' 'February' => 'Février' 'March' => 'Mars' 'April' => 'Avril' 'May' => 'Mai' 'June' => 'Juin' 'July' => 'Juillet' 'August' => 'Août' 'September' => 'Septembre' 'October' => 'Octobre' 'November' => 'Novembre' 'December' => 'Decembre' 'Today is' => 'Aujourd hui c est' 'this month' => 'mois en cours' 'close' => 'fermer'
Feel free to add your translations here.
If you want to use a image-button instead of a text-button add an image file to your farm's pub-directory (specified in
$FarmPubDirUrl) and define the absolute path in the variable $DatepickerImg (in your config.php, see below).
- sample image :
You can put this also in a subdirectory of the farm's pub-dir.
You can set the following global variables in your config-file to overwrite the defaults:
You can modify the existing datepicker-default.css or add your own datepicker-myown.css files to modify the layout and appearance of the datepicker-window. If you want to use your own ccs-file, please change the name in the global var $DatepickerCSS (in your config.php, see above).
The inputbuttons can be customiyed using the class="inputbutton" in any other stylesheet (e.g. for fox).
The datepicker-markup is only useful within forms and in conjunction with an date-input-field.
(:input text fieldname ...:)(:datepicker field=fieldname ...:)
- field=formfieldname - required, name of the corresonding input-text-field
- button=today|tomorrow - optional, add an Button after the datepickerbutton to preset the dat-input-field with today's or tommorow's date
- usetextbutton=1 - optional, force using a text-button even if a button-image is defined within the global variable DatepickerImg.
- format=DATEFORMAT - optional, overwrites the date format of one box, values for legal formats see variable $DatepickerFormat above.
(the input-markup to define the required date-fields is not shown in the samples !)
Some basic error handling is coded:
- if you use a wrong or not existing inputfieldname or if the field= parameter is missing:
- if you use a wrong Dateformat (within the global variable $DatepickerFormat or in the markup-parameter format=):
Don't use a input-field-name twice on a wiki-page, even in different forms, it can't be handled by this recipe.
I know this recipe might be obsolete in the near future when every webbrowser is capable of using the HTML5-features which includes more sophisticated form-inputs - like an buildin datepicker. I think the latest Opera-browser already implements datepickers in input-fields ... have to check this.
to be done
- pmwiki-language-tanslatons: some more translations, please add the sections of the PmWikiXX.XLpageLocal for your language
- first implementation
- further enhancements and error corrections, thanks to Hans B!
class="inputbutton"to the <input>-tags (suggestion from Hans B)
- adapted markup for PHP5.5+ and French translation (Farvardin
- Knut Alboldt
- Hans B, thank you for testing
See discussion at Datepicker-Talk
User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.