Tags:
create new tag
view all tags
---+!! Date Picker Plugin <!-- Contributions to this plugin package are appreciated. Please update this page at http://twiki.org/cgi-bin/view/Plugins/DatePickerPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/DatePickerPluginDev. If you are a TWiki contributor please update the extension in the SVN repository. --> <sticky> <div class="twikiTocFloat"> %TOC{title="Page contents" depth="2"}% </div> <div style="float:right; margin:0 0 20px 20px; padding: 0 10px 0 10px;"> <img src="%PUBURLPATH%/%WEB%/%TOPIC%/screenshot.png" alt="Date picker screenshot" width="237" height="202" /> </div> </sticky> %SHORTDESCRIPTION% ---++ Introduction The !DatePickerPlugin handles an input field with a pop-up calendar to select a date for use in TWiki forms and TWiki applications. The plugin is based on the [[http://www.dynarch.com/projects/calendar/old/][Mishoo JSCalendar]], a DHTML pop-up calendar. The date format can be customized. %X% __ATTENTION:__ This plugin replaces the JSCalendarContrib. The !DatePickerPlugin and older versions of the !JSCalendarContrib do not coexist. Before using the !DatePickerPlugin, uninstall the !JSCalendarContrib, or upgrade the contrib to version 2012-12-12 or later. ---++ Use Date Picker in !TWikiForms This package adds a =date= type to %SYSTEMWEB%.TWikiForms: | *Type* | *Description* | *Size* | *Value* | | =date= | %IF{ "'%BASETOPIC%'!='%TOPIC%'" then="<img src='%PUBURLPATH%/%WEB%/DatePickerPlugin/screenshot-small.png' alt='screenshot-small' width='150' height='127' align='right' style='margin-left:15px;' /> "}%Text input field and a button next to it to pick a date from a pop-up calendar. The date can also be typed into the text box. %IF{ "'%BASETOPIC%'='TWikiForms'" then="[[DatePickerPlugin][See details]]." }% | Text box width in number of characters | Initial (default) date | Example form definition: | *Name:* | *Type:* | *Size* | *Values:* | *Tooltip message:* | | Start date | date | 12 | %SERVERTIME{$year-$mo-$day}% | Select start date | ---++ Use Date Picker in HTML Forms You can also use the date picker directly in your HTML forms, without having to write any code. Just include this in the topic text: <pre> <form action="..."> %<nop>DATEPICKER{ name="Start_date" value="%SERVERTIME{$year-$mo-$day}%" }% <form> </pre> This will show an HTML input field named "Start_date" and a button to popup a calendar to select a date. %INCLUDE{ "VarDATEPICKER" section="parameters" }% Test: (this only works if the !DatePickerPlugin is installed and enabled) <form> %DATEPICKER{ name="Start_date" value="%SERVERTIME{$year-$mo-$day}%" }% </form> ---++ Detailed Documentation %TWISTY{ mode="div" showlink="Show details %ICONURL{toggleopen}% " hidelink="Hide details %ICONURL{toggleclose}% " }% Read [[%ATTACHURL%/doc/html/reference.html][the Mishoo documentation]] or [[%ATTACHURL%/index.html][visit the demo page]] for detailed information on using the calendar widget. This plugin includes the following function to make using the calendar easier from other TWiki plugins: ---+++ renderForEdit =TWiki::Plugins::DatePickerPlugin::renderForEdit( $name, $value, $format [, \%options] ) -> $html= This is the simplest way to use calendars from a plugin. * =$name= is the name of the CGI parameter for the calendar (it should be unique), * =$value= is the current value of the parameter (may be undef) * =$format= is the format to use (optional; the default is set in =configure=). The HTML returned will display a date field and a drop-down calendar. * =\%options= is an optional hash containing base options for the textfield. __Notes:__ * The CSS and Javascript are added if needed, e.g. the =addToHEAD()= function does not need to be called. * No output is shown if =$name= is empty or undef, but the CSS and Javascript are loaded if needed. This can be used to preload the CSS and Javascript with a parameterless =%<nop>DATEPICKER{}%= variable. Example: <verbatim> use TWiki::Plugins::DatePickerPlugin; ... my $fromDate = TWiki::Plugins::DatePickerPlugin::renderForEdit( 'from', '2012-12-31'); my $toDate = TWiki::Plugins::DatePickerPlugin::renderForEdit( 'to', undef, '%Y'); </verbatim> ---+++ addToHEAD =TWiki::Plugins::DatePickerPlugin::addToHEAD( $setup )= This function will automatically add the headers for the calendar to the page being rendered. It's intended for use when you want more control over the formatting of your calendars than =renderForEdit= affords. =$setup= is the name of the calendar setup module; it can either be omitted, in which case the method described in the Mishoo documentation can be used to create calendars, or it can be ='twiki'=, in which case a Javascript helper function called 'showCalendar' is added that simplifies using calendars to set a value in a text field. For example, say we wanted to display the date with the calendar icon _before_ the text field, using the format =%Y %b %e= <verbatim> use TWiki::Plugins::DatePickerPlugin; ... sub commonTagsHandler { .... # Add styles and javascript for the date picker & enable 'showCalendar' TWiki::Plugins::DatePickerPlugin::addToHEAD( 'twiki' ); my $cal = CGI::image_button( -name => 'img_datefield', -onclick => "return showCalendar('id_datefield','%Y %b %e')", -src=> TWiki::Func::getPubUrlPath() . '/' . TWiki::Func::getTwikiWebname() . '/DatePickerPlugin/img.gif', -alt => 'Calendar', -align => 'middle' ) . CGI::textfield( { name => 'date', id => "id_datefield" }); .... } </verbatim> The first parameter to =showCalendar= is the id of the textfield, and the second parameter is the date format. Default format is ='%Y-%m-%d'=. The =addToHEAD= function can be called from =commonTagsHandler= for adding the header to all pages, or from =beforeEditHandler= just for edit pages etc. %ENDTWISTY% ---++ Installation Instructions You do not need to install anything on the browser to use this plugin. These instructions are for the administrator who installs the plugin on the TWiki server. %TWISTY{ mode="div" showlink="Show details %ICONURL{toggleopen}% " hidelink="Hide details %ICONURL{toggleclose}% " }% * For an __automated installation__, run the [[%SCRIPTURL{configure}%][configure]] script and follow "Find More Extensions" in the in the __Extensions__ section. * See the [[http://twiki.org/cgi-bin/view/Plugins/BuildContribInstallationSupplement][installation supplement]] on TWiki.org for more information. * Or, follow these __manual installation__ steps: * Download the ZIP file from the extension home on twiki.org (see below). * Unzip ==%TOPIC%.zip== in your twiki installation directory. * Set the ownership of the extracted directories and files to the webserver user. * Install the dependencies (if any). * Plugin __configuration and testing__: * Run the [[%SCRIPTURL{configure}%][configure]] script and enable the plugin in the __Plugins__ section. * Configure additional plugin settings in the __Extensions__ section if needed. * Test if the installation was successful using the examples provided. * An administrator can customize the appearance of the calendar by modifying ={Plugins}{DatePickerPlugin}= settings in the "Extensions" section of configure: | *Setting* | *Default* | | =$TWiki::cfg{Plugins}{DatePickerPlugin}{Format}= | ='%Y-%m-%d'= | | =$TWiki::cfg{Plugins}{DatePickerPlugin}{Lang}= | ='en'= | | =$TWiki::cfg{Plugins}{DatePickerPlugin}{Style}= | ='twiki'= | %ENDTWISTY% ---++ Plugin Info * Set SHORTDESCRIPTION = Pop-up calendar with date picker, for use in TWiki forms, HTML forms and TWiki plugins %TABLE{ tablewidth="100%" columnwidths="170," }% | Author: | TWiki:Main.PeterThoeny, [[http://twiki.org/][TWiki.org]] | | Copyright: | © See [[%ATTACHURL%/doc/html/reference.html][the Mishoo documentation]] for Mishoo JSCalendar; %BR% © 2012 [[http://www.wave.com/][Wave Systems Corp.]] for TWiki !DatePickerPlugin rewrite; %BR% © 2004-2018 TWiki:Main.PeterThoeny for TWiki !DatePickerPlugin; %BR% © 2004-2018 TWiki:TWiki.TWikiContributor for TWiki !DatePickerPlugin | | Sponsor: | [[http://www.wave.com/][Wave Systems Corp.]] | | License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) | | Dependencies: | JQueryPlugin (pre-installed) | | Version: | 2018-07-05 | | Change History: | <!-- versions below in reverse order --> | | 2018-07-05: | TWikibug:Item7841: Copyright update to 2018 | | 2016-01-08: | TWikibug:Item7708: Copyright update to 2016 | | 2015-01-10: | TWikibug:Item7604: Switch to GPL v3 | | 2014-12-11: | TWikibug:Item7577: TWiki form field type with configure attributes -- TWiki:Main.PeterThoeny | | 2013-09-04: | TWikibug:Item7333: Support more input field attributes, such as accesskey, pattern and required -- TWiki:Main.PeterThoeny | | 2013-01-09: | TWikibug:Item7091: Use TWISTY in detailed documentation section, installation instructions -- TWiki:Main.PeterThoeny | | 2012-12-20: | TWikibug:Item7077: Initial version, partly based on work of TWiki:Plugins.JSCalendarContrib -- TWiki:Main.PeterThoeny | | Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% | | Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev | | Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal | __Related Topics:__ VarDATEPICKER, %SYSTEMWEB%.TWikiPreferences, %SYSTEMWEB%.TWikiForms, %SYSTEMWEB%.TWikiPlugins
E
dit
|
A
ttach
|
Watch
|
P
rint version
|
H
istory
: r3
<
r2
<
r1
|
B
acklinks
|
V
iew topic
|
Ra
w
edit
|
M
ore topic actions
Topic revision: r3 - 2018-07-06
-
TWikiContributor
Log In
or
Register
TWiki Web
Users
Groups
Index
Search
Changes
Notifications
RSS Feed
Statistics
Preferences
User Reference
ATasteOfTWiki
TextFormattingRules
TWikiVariables
FormattedSearch
QuerySearch
TWikiDocGraphics
TWikiSkinBrowser
InstalledPlugins
Admin Maintenance
Reference Manual
AdminToolsCategory
InterWikis
ManagingWebs
TWikiSiteTools
TWikiPreferences
WebPreferences
Categories
Admin Documentation
Admin Tools
Developer Doc
User Documentation
User Tools
Prenotazioni esami
Laurea Triennale ...
Laurea Triennale
Algebra
Algoritmi
Introduzione agli algoritmi
Algoritmi 1
Algoritmi 2
Algoritmi per la
visualizzazione
Architetture
Prog. sist. digitali
Architetture 2
Basi di Dati
Basi di Dati 1 Inf.
Basi di Dati 1 T.I.
Basi di Dati (I modulo, A-L)
Basi di Dati (I modulo, M-Z)
Basi di Dati 2
Calcolo
Calcolo differenziale
Calcolo integrale
Calcolo delle Probabilitą
Metodi mat. per l'inf. (ex. Logica)
canale AD
canale PZ
Programmazione
Fond. di Programmazione
Metodologie di Programmazione
Prog. di sistemi multicore
Programmazione 2
AD
EO
PZ
Esercitazioni Prog. 2
Lab. Prog. AD
Lab. Prog. EO
Lab. Prog. 2
Prog. a Oggetti
Reti
Arch. di internet
Lab. di prog. di rete
Programmazione Web
Reti di elaboratori
Sistemi operativi
Sistemi Operativi (12 CFU)
Anni precedenti
Sistemi operativi 1
Sistemi operativi 2
Lab. SO 1
Lab. SO 2
Altri corsi
Automi, Calcolabilitą
e Complessitą
Apprendimento Automatico
Economia Aziendale
Elaborazione Immagini
Fisica 2
Grafica 3D
Informatica Giuridica
Laboratorio di Sistemi Interattivi
Linguaggi di Programmazione 3° anno Matematica
Linguaggi e Compilatori
Sistemi Informativi
Tecniche di Sicurezza dei Sistemi
ACSAI ...
ACSAI
Computer Architectures 1
Programming
Laurea Magistrale ...
Laurea Magistrale
Percorsi di studio
Corsi
Algoritmi Avanzati
Algoritmica
Algoritmi e Strutture Dati
Algoritmi per le reti
Architetture degli elaboratori 3
Architetture avanzate e parallele
Autonomous Networking
Big Data Computing
Business Intelligence
Calcolo Intensivo
Complessitą
Computer Systems and Programming
Concurrent Systems
Crittografia
Elaborazione del Linguaggio Naturale
Estrazione inf. dal web
Fisica 3
Gamification Lab
Information Systems
Ingegneria degli Algoritmi
Interazione Multi Modale
Metodi Formali per il Software
Methods in Computer Science Education: Analysis
Methods in Computer Science Education: Design
Prestazioni dei Sistemi di Rete
Prog. avanzata
Internet of Things
Sistemi Centrali
Reti Wireless
Sistemi Biometrici
Sistemi Distribuiti
Sistemi Informativi Geografici
Sistemi operativi 3
Tecniche di Sicurezza basate sui Linguaggi
Teoria della
Dimostrazione
Verifica del software
Visione artificiale
Attivitą complementari
Biologia Computazionale
Design and development of embedded systems for the Internet of Things
Lego Lab
Logic Programming
Pietre miliari della scienza
Prog. di processori multicore
Sistemi per l'interazione locale e remota
Laboratorio di Cyber-Security
Verifica e Validazione di Software Embedded
Altri Webs ...
Altri Webs
Dottorandi
Commissioni
Comm. Didattica
Comm. Didattica_r
Comm. Dottorato
Comm. Erasmus
Comm. Finanziamenti
Comm. Scientifica
Comm Scientifica_r
Corsi esterni
Sistemi Operativi (Matematica)
Perl e Bioperl
ECDL
Fondamenti 1
(NETTUNO)
Tecniche della Programmazione 1° modulo
(NETTUNO)
Seminars in Artificial Intelligence and Robotics: Natural Language Processing
Informatica generale
Primo canale
Secondo canale
II canale A.A. 10-11
Informatica
Informatica per Statistica
Laboratorio di Strumentazione Elettronica e Informatica
Progetti
Nemo
Quis
Remus
TWiki ...
TWiki
Tutto su TWiki
Users
Main
Sandbox
Home
Site map
AA web
AAP web
ACSAI web
AA2021 web
Programming web
AA2021 web
AN web
ASD web
Algebra web
AL web
AA1112 web
AA1213 web
AA1920 web
AA2021 web
MZ web
AA1112 web
AA1213 web
AA1112 web
AA1314 web
AA1415 web
AA1516 web
AA1617 web
AA1819 web
Old web
Algo_par_dis web
Algoreti web
More...
TWiki Web
User registration
Users
Groups
Index
Search
Changes
Notifications
RSS Feed
Statistics
Preferences
View
Raw View
Print version
Find backlinks
History
More topic actions
Edit
Raw edit
Attach file or image
Edit topic preference settings
Set new parent
More topic actions
User Reference
ATasteOfTWiki
TextFormattingRules
TWikiVariables
FormattedSearch
QuerySearch
TWikiDocGraphics
TWikiSkinBrowser
InstalledPlugins
Admin Maintenance
Reference Manual
InterWikis
ManagingUsers
ManagingWebs
TWikiSiteTools
TWikiPreferences
WebPreferences
Categories
Admin Documentation
Admin Tools
Developer Doc
User Documentation
User Tools
Account
Log In
Register User
Questo sito usa cookies, usandolo ne accettate la presenza. (
CookiePolicy
)
Torna al
Dipartimento di Informatica
E
dit
A
ttach
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki?
Send feedback
Note:
Please contribute updates to this topic on TWiki.org at
TWiki:TWiki.DatePickerPlugin
.