diff options
Diffstat (limited to '')
| -rw-r--r-- | template-common/datepicker.js | 191 | ||||
| -rw-r--r-- | template/yoga/default-layout.css | 7 | ||||
| -rw-r--r-- | template/yoga/icon/datepicker.png | bin | 0 -> 1047 bytes | |||
| -rw-r--r-- | template/yoga/include/datepicker.inc.tpl | 19 | ||||
| -rw-r--r-- | template/yoga/search.tpl | 17 | ||||
| -rw-r--r-- | template/yoga/theme/Sylvia/icon/datepicker.png | bin | 0 -> 430 bytes |
6 files changed, 231 insertions, 3 deletions
diff --git a/template-common/datepicker.js b/template-common/datepicker.js new file mode 100644 index 000000000..743cf65cd --- /dev/null +++ b/template-common/datepicker.js @@ -0,0 +1,191 @@ +// initialize controls +// buttonImageName: Directory and name of calendar picture +// day, month, year: selectors of visible date controls +// linked_date: selector of hidden linked dates control +// checked_on_change: selector of control to change "checked" attribut +// 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_common_initialization_datepicker(buttonImageName, day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date) +{ + // return formated date with control values + function pwg_get_fmt_from_ctrls() + { + return $(year).val() + "-" + $(month).val() + "-" + $(day).val(); + } + + // return if linked_date is valid date + function is_valid_linked_value(linked_date_name) + { + array_date = $(linked_date_name).val().split('-'); + return ( + (array_date.length == 3) && + (array_date[0] != "") && + (array_date[1] != "") && (array_date[1] != "0") && + (array_date[2] != "") && (array_date[2] != "0") + ) + } + + // Action on change date value + function pwg_on_date_change() + { + pwg_check_date(); + if (checked_on_change != null) + { + $(checked_on_change).attr("checked", "true"); + } + } + + // In order to desable element of list + function pwg_disabled_selection() + { + array_date = $(linked_date).val().split('-'); + y = array_date[0]; + m = array_date[1]; + + // Init list + $(day + " option").attr("disabled", ""); + $(month + " option").attr("disabled", ""); + + var daysInMonth = 32 - new Date(y, m - 1, 32).getDate(); + $(day + " option:gt(" + (daysInMonth) +")").attr("disabled", "disabled"); + + if ((min_linked_date != null) && (is_valid_linked_value(min_linked_date) == true)) + { + date_cmp = min_linked_date; + op_cmp = "lt"; + } + else if ((max_linked_date != null) && (is_valid_linked_value(max_linked_date) == true)) + { + date_cmp = max_linked_date; + op_cmp = "gt"; + } + else + { + date_cmp = null; + op_cmp = null; + } + + if (op_cmp != null) + { + array_date = $(date_cmp).val().split('-'); + y_cmp = array_date[0]; + m_cmp = array_date[1]; + d_cmp = array_date[2]; + + if (y == y_cmp) + { + $(month + " option:" + op_cmp + "(" + (m_cmp) +")").attr("disabled", "disabled"); + if (op_cmp == "lt") + { + $(month + " option:eq(" + (0) +")").attr("disabled", ""); + } + + if (m == m_cmp) + { + $(day + " option:" + op_cmp + "(" + (d_cmp) +")").attr("disabled", "disabled"); + if (op_cmp == "lt") + { + $(day + " option:eq(" + (0) +")").attr("disabled", ""); + } + } + } + } + } + + // Prevent selection of invalid dates through the select controls + function pwg_check_date() + { + last_date = $(linked_date).val(); + + $(linked_date).val(pwg_get_fmt_from_ctrls()); + + if ((min_linked_date != null) && (is_valid_linked_value(min_linked_date))) + { + cancel = ($(min_linked_date).datepicker("getDate") > $(linked_date).datepicker("getDate")); + } + else if ((max_linked_date != null) && (is_valid_linked_value(max_linked_date))) + { + cancel = ($(max_linked_date).datepicker("getDate") < $(linked_date).datepicker("getDate")); + } + else + { + cancel = false; + } + + if (cancel) + { + array_date = last_date.split('-'); + $(year).val(array_date[0]); + $(month).val(array_date[1]); + $(day).val(array_date[2]); + // check again + pwg_check_date(); + } + } + + jQuery().ready(function(){ + // Init hidden value + $(linked_date).val(pwg_get_fmt_from_ctrls()); + + // 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) { + 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 + { + return {}; + } + }, + onSelect: + // Update three select controls to match a date picker selection + function updateLinked(date) { + if (date.length == 0) + { + $(year).val(""); + $(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_on_date_change(); + }, + showOn: "both", + buttonImage: buttonImageName, + buttonImageOnly: true, + buttonText: "" + }); + + // Check showed controls + jQuery(day + ", " + month + ", " + year).change( + function () + { + pwg_on_date_change(); + }); + + // Check showed controls + jQuery(day + ", " + month + ", " + year).focus( + function () + { + pwg_disabled_selection(); + }); + + // In order to init linked input + pwg_check_date(); + }); + +} diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css index 924e901c9..f7b102a96 100644 --- a/template/yoga/default-layout.css +++ b/template/yoga/default-layout.css @@ -275,4 +275,9 @@ TABLE.tagLetterContent { #theHeader {text-align: center;} #theNotificationPage dl, -#thePopuphelpPage dl { margin: 0 25px 25px; }
\ No newline at end of file +#thePopuphelpPage dl { margin: 0 25px 25px; } + +/* jQuery datepicker */ +img.ui-datepicker-trigger { + cursor : pointer; +} diff --git a/template/yoga/icon/datepicker.png b/template/yoga/icon/datepicker.png Binary files differnew file mode 100644 index 000000000..bbb299207 --- /dev/null +++ b/template/yoga/icon/datepicker.png diff --git a/template/yoga/include/datepicker.inc.tpl b/template/yoga/include/datepicker.inc.tpl new file mode 100644 index 000000000..871be0ea6 --- /dev/null +++ b/template/yoga/include/datepicker.inc.tpl @@ -0,0 +1,19 @@ +{* $Id$ *} +{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"} +{known_script id="jquery.ui" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.core.packed.js"} +{known_script id="jquery.ui.datepicker" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.datepicker.packed.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"} +{known_script id="datepicker.js" src=$ROOT_URL|@cat:"template-common/datepicker.js"} + +{html_head} +<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template-common/lib/ui/ui.datepicker.css"> +{/html_head} + +<script type="text/javascript"> +function pwg_initialization_datepicker(day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date) +{ldelim} + return pwg_common_initialization_datepicker( + "{$ROOT_URL}{$themeconf.icon_dir}/datepicker.png", + day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date); +} +</script> diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl index 4f6ba4455..8562cac3d 100644 --- a/template/yoga/search.tpl +++ b/template/yoga/search.tpl @@ -1,4 +1,17 @@ {* $Id$ *} + +{* Example of datepicker +{include file='include/datepicker.inc.tpl'} + +{literal} +<script type="text/javascript"> + pwg_initialization_datepicker("#start_day", "#start_month", "#start_year", "#start_linked_date", null, null, "#end_linked_date"); + pwg_initialization_datepicker("#end_day", "#end_month", "#end_year", "#end_linked_date", null, "#start_linked_date", null); + jQuery().ready(function(){ $(".date_today").hide(); }); +</script> +{/literal} +*} + <div id="content" class="content"> <div class="titrePage"> @@ -74,7 +87,7 @@ <input id="start_linked_date" name="start_linked_date" type="hidden" size="10" disabled="disabled"/> </li> <li> - <a href="#" onClick="document.search.start_day.value={$smarty.now|date_format:"%d"};document.search.start_month.value={$smarty.now|date_format:"%m"};document.search.start_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a> + <a class="date_today" href="#" onClick="document.search.start_day.value={$smarty.now|date_format:"%d"};document.search.start_month.value={$smarty.now|date_format:"%m"};document.search.start_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a> </li> </ul> <ul> @@ -93,7 +106,7 @@ <input id="end_linked_date" name="end_linked_date" type="hidden" size="10" disabled="disabled"/> </li> <li> - <a href="#" onClick="document.search.end_day.value={$smarty.now|date_format:"%d"};document.search.end_month.value={$smarty.now|date_format:"%m"};document.search.end_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a> + <a class="date_today" href="#" onClick="document.search.end_day.value={$smarty.now|date_format:"%d"};document.search.end_month.value={$smarty.now|date_format:"%m"};document.search.end_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a> </li> </ul> </fieldset> diff --git a/template/yoga/theme/Sylvia/icon/datepicker.png b/template/yoga/theme/Sylvia/icon/datepicker.png Binary files differnew file mode 100644 index 000000000..3d0e015f6 --- /dev/null +++ b/template/yoga/theme/Sylvia/icon/datepicker.png |
