aboutsummaryrefslogtreecommitdiffstats
path: root/admin
diff options
context:
space:
mode:
authorrub <rub@piwigo.org>2008-10-01 20:39:06 +0000
committerrub <rub@piwigo.org>2008-10-01 20:39:06 +0000
commite9d7622d55ca8456e36ea8a178e8b0286250fd1d (patch)
treebfba53e0c20492bc5fb485ceadaaff134029419e /admin
parent7eb7d3752748e3ca6db611e29a5d8c1aaac1195b (diff)
Purpose of datepicker with jQuery.
I will open a french topic on forum to debate of implementation and possibles changes. git-svn-id: http://piwigo.org/svn/trunk@2632 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--admin/template/goto/element_set_global.tpl9
-rw-r--r--admin/template/goto/element_set_unit.tpl7
-rw-r--r--admin/template/goto/history.tpl12
-rw-r--r--admin/template/goto/include/datepicker.inc.tpl124
-rw-r--r--admin/template/goto/picture_modify.tpl10
5 files changed, 162 insertions, 0 deletions
diff --git a/admin/template/goto/element_set_global.tpl b/admin/template/goto/element_set_global.tpl
index 3bdf5688c..649948854 100644
--- a/admin/template/goto/element_set_global.tpl
+++ b/admin/template/goto/element_set_global.tpl
@@ -1,5 +1,13 @@
{* $Id$ *}
+{include file='include/datepicker.inc.tpl'}
+
+{literal}
+<script type="text/javascript">
+ pwg_initialization_datepicker("select[name=date_creation_day]", "select[name=date_creation_month]", "input[name=date_creation_year]", "input[name=date_creation_linked_date]");
+</script>
+{/literal}
+
<h2>{'Batch management'|@translate}</h2>
<h3>{$CATEGORIES_NAV}</h3>
@@ -136,6 +144,7 @@
size="4"
maxlength="4"
value="{$DATE_CREATION_YEAR}" />
+ <input name="date_creation_linked_date" type="hidden" size="10" disabled="disabled"/>
</td>
</tr>
diff --git a/admin/template/goto/element_set_unit.tpl b/admin/template/goto/element_set_unit.tpl
index 4361efff2..6f2fc5569 100644
--- a/admin/template/goto/element_set_unit.tpl
+++ b/admin/template/goto/element_set_unit.tpl
@@ -1,4 +1,7 @@
{* $Id$ *}
+
+{include file='include/datepicker.inc.tpl'}
+
{known_script id="jquery.growfield" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.growfield.packed.js"}
<script type="text/javascript">
@@ -75,6 +78,10 @@
size="4"
maxlength="4"
value="{$element.DATE_CREATION_YEAR}" />
+ <input name="date_creation_linked_date-{$element.ID}" type="hidden" size="10" disabled="disabled"/>
+ <script type="text/javascript">
+ pwg_initialization_datepicker("select[name=date_creation_day-{$element.ID}]", "select[name=date_creation_month-{$element.ID}]", "input[name=date_creation_year-{$element.ID}]", "input[name=date_creation_linked_date-{$element.ID}]");
+ </script>
</td>
</tr>
diff --git a/admin/template/goto/history.tpl b/admin/template/goto/history.tpl
index f3c3575b6..ffbf0994d 100644
--- a/admin/template/goto/history.tpl
+++ b/admin/template/goto/history.tpl
@@ -1,4 +1,14 @@
{* $Id$ *}
+
+{include file='include/datepicker.inc.tpl'}
+
+{literal}
+<script type="text/javascript">
+ pwg_initialization_datepicker("select[name=start_day]", "select[name=start_month]", "input[name=start_year]", "input[name=start_linked_date]", null, "input[name=end_linked_date]");
+ pwg_initialization_datepicker("select[name=end_day]", "select[name=end_month]", "input[name=end_year]", "input[name=end_linked_date]", "input[name=start_linked_date]", null);
+</script>
+{/literal}
+
<div class="titrePage">
<h2>{'History'|@translate} {$TABSHEET_TITLE}</h2>
</div>
@@ -19,6 +29,7 @@
{html_options options=$month_list selected=$START_MONTH_SELECTED}
</select>
<input name="start_year" value="{$START_YEAR}" type="text" size="4" maxlength="4" >
+ <input name="start_linked_date" type="hidden" size="10" disabled="disabled"/>
</li>
</ul>
<ul>
@@ -34,6 +45,7 @@
{html_options options=$month_list selected=$END_MONTH_SELECTED}
</select>
<input name="end_year" value="{$END_YEAR}" type="text" size="4" maxlength="4" >
+ <input name="end_linked_date" type="hidden" size="10" disabled="disabled"/>
</li>
</ul>
diff --git a/admin/template/goto/include/datepicker.inc.tpl b/admin/template/goto/include/datepicker.inc.tpl
new file mode 100644
index 000000000..8eb7016bd
--- /dev/null
+++ b/admin/template/goto/include/datepicker.inc.tpl
@@ -0,0 +1,124 @@
+{* $Id$ *}
+{known_script id="jquery.ui.datepicker" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.datepicker.js"}
+{known_script id="jquery.ui.datepicker-$lang_info.code" src=$ROOT_URL|@cat:"template-common/lib/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
+
+<link rel="stylesheet" type="text/css" href="{$ROOT_URL}admin/template/{$themeconf.template}/theme/{$themeconf.theme}/datepicker.css">
+
+{literal}
+<script type="text/javascript">
+// return formated date with control values
+// day, month, year: selectors of visible date controls
+function pwg_get_fmt_datepicker(day, month, year)
+{
+ return $(year).val() + "-" + $(month).val() + "-" + $(day).val();
+}
+
+// initialize controls
+// day, month, year: selectors of visible date controls
+// linked_date: selector of hidden linked dates control
+// min_linked_date: selector of hidden linked date control witch give min value
+// max_linked_date: selector of hidden linked date control witch give max value
+function pwg_initialization_datepicker(day, month, year, linked_date, min_linked_date, max_linked_date)
+{
+ // Prevent selection of invalid dates through the select controls
+ function pwg_check_date()
+ {
+ array_date = $(linked_date).val().split('-');
+ y = array_date[0];
+ m = array_date[1];
+ d = array_date[2];
+
+ var daysInMonth = 32 - new Date($(year).val(), $(month).val() - 1, 32).getDate();
+
+ $(day + " option").attr("disabled", "");
+ $(day + " option:gt(" + (daysInMonth) +")").attr("disabled", "disabled");
+
+ if ($(day).val() > daysInMonth) {
+ $(day).val(daysInMonth);
+ }
+
+ $(linked_date).val(pwg_get_fmt_datepicker(day, month, year));
+
+ cancel = false;
+ if ((min_linked_date != null) && ($(min_linked_date).datepicker("getDate") != null))
+ {
+ cancel = ($(min_linked_date).datepicker("getDate") > $(linked_date).datepicker("getDate"));
+ }
+ else if ((max_linked_date != null) && ($(max_linked_date).datepicker("getDate") != null))
+ {
+ cancel = ($(max_linked_date).datepicker("getDate") < $(linked_date).datepicker("getDate"));
+ }
+
+ if (cancel)
+ {
+ $(year).val(y);
+ $(month).val(m);
+ $(day).val(d);
+ // check again
+ pwg_check_date();
+ }
+ }
+
+ jQuery().ready(function(){
+ // Init hidden value
+ $(linked_date).val(pwg_get_fmt_datepicker(day, month, year));
+
+ // Init Datepicker
+ jQuery(linked_date).datepicker({
+ dateFormat:'yy-m-d',
+ beforeShow:
+ // Prepare to show a date picker linked to three select controls
+ function readLinked(input) {
+ //$(linked_date).val(pwg_get_fmt_datepicker(day, month, year));
+ if (min_linked_date != null)
+ {
+ return {minDate: $(min_linked_date).datepicker("getDate")};
+ }
+ else if (max_linked_date != null)
+ {
+ return {maxDate: $(max_linked_date).datepicker("getDate")};
+ }
+ else
+ {
+ console.log("none");
+ return {};
+ }
+ },
+ onSelect:
+ // Update three select controls to match a date picker selection
+ function updateLinked(date) {
+ if (date.length == 0)
+ {
+ $(year).val("0");
+ $(month).val("0");
+ $(day).val("0");
+ }
+ else
+ {
+ array_date = date.split('-');
+ $(year).val(array_date[0]);
+ $(month).val(array_date[1]);
+ $(day).val(array_date[2]);
+ }
+ pwg_check_date();
+ },
+ showOn: "both",
+{/literal}
+ buttonImage: "{$ROOT_URL}admin/template/{$themeconf.template}/theme/{$themeconf.theme}/images/calendar.gif",
+{literal}
+ buttonImageOnly: true
+ });
+
+ // Check showed controls
+ jQuery(day + ", " + month + ", " + year).change(
+ function ()
+ {
+ pwg_check_date();
+ });
+ });
+
+}
+</script>
+{/literal}
+
+
diff --git a/admin/template/goto/picture_modify.tpl b/admin/template/goto/picture_modify.tpl
index a92018732..8f2aacc03 100644
--- a/admin/template/goto/picture_modify.tpl
+++ b/admin/template/goto/picture_modify.tpl
@@ -1,4 +1,13 @@
{* $Id$ *}
+
+{include file='include/datepicker.inc.tpl'}
+
+{literal}
+<script type="text/javascript">
+ pwg_initialization_datepicker("select[name=date_creation_day]", "select[name=date_creation_month]", "input[name=date_creation_year]", "input[name=date_creation_linked_date]");
+</script>
+{/literal}
+
{known_script id="jquery.growfield" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.growfield.packed.js"}
<script type="text/javascript">
@@ -111,6 +120,7 @@
size="4"
maxlength="4"
value="{$DATE_CREATION_YEAR_VALUE}" />
+ <input name="date_creation_linked_date" type="hidden" size="10" disabled="disabled"/>
</td>
</tr>