DatePickerPlugin < TWiki

Tags: 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>
&lt;form action="..."&gt;
%<nop>DATEPICKER{ name="Start_date" value="%SERVERTIME{$year-$mo-$day}%" }%
&lt;form&gt;
</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}% "
}%

%$POD%

%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}% "
}%

%$INSTALL_INSTRUCTIONS%

   * 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: | &copy; See [[%ATTACHURL%/doc/html/reference.html][the Mishoo documentation]] for Mishoo JSCalendar; %BR% &copy; 2012 [[http://www.wave.com/][Wave Systems Corp.]] for TWiki !DatePickerPlugin rewrite; %BR% &copy; 2004-2018 TWiki:Main.PeterThoeny for TWiki !DatePickerPlugin; %BR% &copy; 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 -->&nbsp; |
|  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
Raw edit | More topic actions
Topic revision: r0 - 2018-07-06 - TWikiContributor
Account
- Log In
- Register User
Edit
Attach
Copyright © 1999-2025 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.