Revision: 1410
http://mrbs.svn.sourceforge.net/mrbs/?rev=1410&view=rev
Author: cimorrison
Date: 2010-08-13 16:37:47 +0000 (Fri, 13 Aug 2010)
Log Message:
-----------
Initial implementation of datepicker date fields
Modified Paths:
--------------
mrbs/branches/datepicker/web/Themes/default/header.inc
mrbs/branches/datepicker/web/functions.inc
mrbs/branches/datepicker/web/mrbs.css.php
Modified: mrbs/branches/datepicker/web/Themes/default/header.inc
===================================================================
--- mrbs/branches/datepicker/web/Themes/default/header.inc 2010-08-13
09:58:50 UTC (rev 1409)
+++ mrbs/branches/datepicker/web/Themes/default/header.inc 2010-08-13
16:37:47 UTC (rev 1410)
@@ -8,7 +8,8 @@
global $mrbs_company, $mrbs_company_logo, $mrbs_company_url,
$mrbs_company_more_info,
$search_str, $locale_warning, $provisional_enabled;
global $tbl_entry, $tbl_room, $tbl_area;
- global $PHP_SELF;
+ global $PHP_SELF, $view_week_number, $weekstarts;
+ global $langs, $disable_automatic_language_changing,
$default_language_tokens;
$page = basename($PHP_SELF, ".php" );
@@ -42,103 +43,89 @@
require_once "style.inc";
?>
<title><?php echo get_vocab("mrbs") ?></title>
+
+ <link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/sunny/jquery-ui.css";
rel="stylesheet" type="text/css" />
+ <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";></script>
+ <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js";></script>
+ <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/i18n/jquery-ui-i18n.min.js";></script>
+
<script type="text/javascript">
//<![CDATA[
-
-/* Script inspired by "True Date Selector"
- Created by: Lee Hinder, [email protected]
-
- Tested with Windows IE 6.0
- Tested with Linux Opera 7.21, Mozilla 1.3, Konqueror 3.1.0
-
-*/
-
-function daysInFebruary (year)
-{
- // February has 28 days unless the year is divisible by four,
- // and if it is the turn of the century then the century year
- // must also be divisible by 400 when it has 29 days
- return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ?
29 : 28 );
-}
-
-//function for returning how many days there are in a month including leap
years
-function DaysInMonth(WhichMonth, WhichYear)
-{
- var DaysInMonth = 31;
- if (WhichMonth == "4" || WhichMonth == "6" || WhichMonth == "9" ||
WhichMonth == "11")
+<?php
+// Set the default values for datepicker, including the default regional
setting
+?>
+$(function() {
+ <?php
+ // We set the regional setting, by
+ // - setting the MRBS default language
+ // - then setting the locales in increasing order of browser preference
+ // - then setting the MRBS default language setting again if automatic
language
+ // changing is disabled
+ // This algorithm is designed to ensure that datepicker is set to the most
preferred
+ // browser setting for which a datepicker localisation exists. If the MRBS
default
+ // language setting doesn't exist, then at least we get one the user prefers
according
+ // to the browser settings.
+ echo
"$.datepicker.setDefaults($.datepicker.regional['$default_language_tokens']);\n";
+ $datepicker_langs = $langs;
+ asort($datepicker_langs, SORT_NUMERIC);
+ foreach ($datepicker_langs as $lang => $qual)
{
- DaysInMonth = 30;
- }
- if (WhichMonth == "2")
- {
- DaysInMonth = daysInFebruary( WhichYear );
- }
- return DaysInMonth;
-}
-
-//function to change the available days in a months
-function ChangeOptionDays(formObj, prefix)
-{
- var DaysObject = eval("formObj." + prefix + "day");
- var MonthObject = eval("formObj." + prefix + "month");
- var YearObject = eval("formObj." + prefix + "year");
-
- if (typeof DaysObject.selectedIndex == 'number' && DaysObject.options)
- { // The DOM2 standard way
- // alert("The DOM2 standard way");
- var DaySelIdx = DaysObject.selectedIndex;
- var Month = parseInt(MonthObject.options[MonthObject.selectedIndex].value);
- var Year = parseInt(YearObject.options[YearObject.selectedIndex].value);
- }
- else if (DaysObject.selectedIndex && DaysObject[DaysObject.selectedIndex])
- { // The legacy MRBS way
- // alert("The legacy MRBS way");
- var DaySelIdx = DaysObject.selectedIndex;
- var Month = parseInt(MonthObject[MonthObject.selectedIndex].value);
- var Year = parseInt(YearObject[YearObject.selectedIndex].value);
- }
- else if (DaysObject.value)
- { // Opera 6 stores the selectedIndex in property 'value'.
- // alert("The Opera 6 way");
- var DaySelIdx = parseInt(DaysObject.value);
- var Month = parseInt(MonthObject.options[MonthObject.value].value);
- var Year = parseInt(YearObject.options[YearObject.value].value);
- }
-
- // alert("Day="+(DaySelIdx+1)+" Month="+Month+" Year="+Year);
-
- var DaysForThisSelection = DaysInMonth(Month, Year);
- var CurrentDaysInSelection = DaysObject.length;
- if (CurrentDaysInSelection > DaysForThisSelection)
- {
- for (i=0; i<(CurrentDaysInSelection-DaysForThisSelection); i++)
+ // Get the locale in the format that datepicker likes: language lower case
+ // and country upper case
+ $components = explode('-', $lang);
+ $components[0] = strtolower($components[0]);
+ if (count($components) > 1)
{
- DaysObject.options[DaysObject.options.length - 1] = null
+ $components[1] = strtoupper($components[1]);
}
+ $lang = implode('-', $components);
+ echo "$.datepicker.setDefaults($.datepicker.regional['$lang']);\n";
}
- if (DaysForThisSelection > CurrentDaysInSelection)
+ if ($disable_automatic_language_changing)
{
- for (i=0; i<DaysForThisSelection; i++)
- {
- DaysObject.options[i] = new Option(eval(i + 1));
- }
+ echo
"$.datepicker.setDefaults($.datepicker.regional['$default_language_tokens']);\n";
}
- if (DaysObject.selectedIndex < 0)
- {
- DaysObject.selectedIndex = 0;
- }
- if (DaySelIdx >= DaysForThisSelection)
- {
- DaysObject.selectedIndex = DaysForThisSelection-1;
- }
- else
- {
- DaysObject.selectedIndex = DaySelIdx;
- }
+ ?>
+ $.datepicker.setDefaults({
+ showOtherMonths: true,
+ selectOtherMonths: true,
+ changeMonth: true,
+ changeYear: true,
+ duration: 'fast',
+ showWeek: <?php echo ($view_week_number) ? 'true' : 'false' ?>,
+ firstDay: <?php echo $weekstarts ?>,
+ altFormat: 'yy-mm-dd',
+ onClose: function(dateText, inst) {datepicker_close(dateText, inst);}
+ });
+});
+
+
+<?php
+// Writes out the day, month and year values to the three hidden inputs
+// created by the PHP function genDateSelector(). It gets the date values
+// from the _alt input, which is the alternate field populated by datepicker
+// and is populated by datepicker with a date in yy-mm-dd format.
+//
+// (datepicker can only have one alternate field, which is why we need to write
+// to the three fields ourselves).
+//
+// Blur the datepicker input field on close, so that the datepicker will
reappear
+// if you select it. (Not quite sure why you need this. It only seems
+// to be necessary when you are using Firefox and the datepicker is draggable).
+?>
+function datepicker_close(dateText, inst)
+{
+ var alt_id = inst.id + '_alt';
+ var date = document.getElementById(alt_id).value.split('-');
+ document.getElementById(alt_id + '_year').value = date[0];
+ document.getElementById(alt_id + '_month').value = date[1];
+ document.getElementById(alt_id + '_day').value = date[2];
+ document.getElementById(inst.id).blur();
}
+
<?php
if ($page == 'edit_area_room')
{
@@ -253,7 +240,7 @@
{
logonForm.NewUserName.focus();
}
-
+
<?php
// EDIT_AREA_ROOM.PHP
if ($page == 'edit_area_room')
@@ -362,7 +349,7 @@
<form action="day.php" method="get" id="Form1">
<div>
<?php
- genDateSelector("", $day, $month, $year); // Note: The 1st arg
must match the last arg in the call to ChangeOptionDays below.
+ genDateSelector("", $day, $month, $year);
if (!empty($area))
{
echo "<input type=\"hidden\" name=\"area\" value=\"$area\">\n";
@@ -373,12 +360,6 @@
}
?>
- <script type="text/javascript">
- //<![CDATA[
- // fix number of days for the $month/$year that you start with
- ChangeOptionDays(document.getElementById('Form1'), ''); // Note:
The 2nd arg must match the first in the call to genDateSelector above.
- //]]>
- </script>
<input type="submit" value="<?php echo get_vocab("goto") ?>">
</div>
</form>
Modified: mrbs/branches/datepicker/web/functions.inc
===================================================================
--- mrbs/branches/datepicker/web/functions.inc 2010-08-13 09:58:50 UTC (rev
1409)
+++ mrbs/branches/datepicker/web/functions.inc 2010-08-13 16:37:47 UTC (rev
1410)
@@ -289,59 +289,116 @@
}
-
+// Generates a date selector for use on a form. If JavaScript is enabled
+// then it will generate a calendar picker using jQuery UI datepicker. If
not,
+// it will generate three separate select boxes, one each for day, month and
year.
+//
+// Whether or not JavaScript is enabled the date is passed back in three
separate
+// variables: ${prefix}day, ${prefix}month and ${prefix}year
+//
+// The function passes back three separate variables, rather than a single
date
+// variable, partly for compatibility with previous implementations of
genDateSelector()
+// and partly because it's easier to do this for the non-JavaScript version.
function genDateSelector($prefix, $day, $month, $year)
{
- if($day == 0)
+ // Make sure we've got a date
+ if (empty($day) or empty($month) or empty($year))
{
- $day = date("d");
- }
- if($month == 0)
- {
+ $day = date("d");
$month = date("m");
+ $year = date("Y");
}
- if ($year == 0)
- {
- $year = date("Y");
- }
+
+ // Cast the dates to ints to remove any leading zeroes (otherwise
+ // JavaScript will treat them as octal numbers)
+ $day = (int) $day;
+ $month = (int) $month;
+ $year = (int) $year;
- echo "
- <select name=\"${prefix}day\">";
-
+ // Get a month for use with JavaScript (where the months run from 0 to 11)
+ $month_js = $month - 1;
+
+ // First and last dates to show in year select
+ $min = min($year, date("Y")) - 5;
+ $max = max($year, date("Y")) + 5;
+
+ // Generate a unique suffix so that we'll be able to distinguish between
+ // multiple date selectors on the same page
+ $suffix = "_" . uniqid();
+ $datepicker_baseid = "datepicker" . $suffix;
+
+ // We'll put the date selector in a span. First of all we'll generate
+ // day, month and year selectors. These will be used if JavaScript is
+ // disabled. If JavaScript is enabled it will overwrite these with a
+ // datepicker calendar.
+ echo "<span id=\"dateselector$suffix\">\n";
+ // the day selector
+ echo "<select name=\"${prefix}day\">\n";
for ($i = 1; $i <= 31; $i++)
{
- echo "
- <option" . ($i == $day ? " selected=\"selected\"" : "") .
">$i</option>";
+ echo "<option" . ($i == $day ? " selected=\"selected\"" : "") .
">$i</option>\n";
}
-
- echo "
- </select>
-
- <select name=\"${prefix}month\"
onchange=\"ChangeOptionDays(this.form,'$prefix')\">";
-
+ echo "</select>\n";
+ // the month selector
+ echo "<select name=\"${prefix}month\">\n";
for ($i = 1; $i <= 12; $i++)
{
- $m = utf8_strftime("%b", mktime(0, 0, 0, $i, 1, $year));
-
- print "
- <option value=\"$i\"" . ($i == $month ? "
selected=\"selected\"" : "") . ">$m</option>";
+ $m = utf8_strftime("%b", mktime(0, 0, 0, $i, 1, $year));
+ echo "<option value=\"$i\"" . ($i == $month ? " selected=\"selected\"" :
"") . ">$m</option>\n";
}
-
- echo "
- </select>
- <select name=\"${prefix}year\"
onchange=\"ChangeOptionDays(this.form,'$prefix')\">";
-
- $min = min($year, date("Y")) - 5;
- $max = max($year, date("Y")) + 5;
-
+ echo "</select>\n";
+ // the year selector
+ echo "<select name=\"${prefix}year\">\n";
for ($i = $min; $i <= $max; $i++)
{
- print "
- <option value=\"$i\"" . ($i == $year ? "
selected=\"selected\"" : "") . ">$i</option>";
+ echo "<option value=\"$i\"" . ($i == $year ? " selected=\"selected\"" :
"") . ">$i</option>\n";
}
+ echo "</select>\n";
+ echo "</span>\n";
+
+ // Now use JavaScript to overwrite the contents of this span with a
datepicker calendar
+ ?>
+ <script type="text/javascript">
- echo "
- </select>";
+ $(function() {
+ $("#<?php echo $datepicker_baseid ?>").datepicker({yearRange:
<?php echo "'$min:$max'" ?>,
+ altField:
'#<?php echo $datepicker_baseid ?>_alt',
+ });
+ <?php
+ // Populate the input fields with the initial values
+ ?>
+ var initial_date = new Date(<?php echo "$year, $month_js, $day" ?>);
+ var dateFormat = $("#<?php echo $datepicker_baseid ?>").datepicker(
"option", "dateFormat" );
+ document.getElementById(<?php echo "'${datepicker_baseid}'" ?>).value
= $.datepicker.formatDate(dateFormat, initial_date);
+ document.getElementById(<?php echo "'${datepicker_baseid}_alt_day'"
?>).value = <?php echo $day ?>;
+ document.getElementById(<?php echo "'${datepicker_baseid}_alt_month'"
?>).value = <?php echo $month ?>;
+ document.getElementById(<?php echo "'${datepicker_baseid}_alt_year'"
?>).value = <?php echo $year ?>;
+ $(".ui-datepicker").draggable();
+ });
+
+
+ var dateselector = document.getElementById(<?php echo
"'dateselector$suffix'" ?>);
+ var datepicker_html = '<input class="date" type="text" id="<?php echo
$datepicker_baseid ?>">\n';
+ <?php
+ // The next input is disabled because we don't need to pass the value
through to
+ // the form and we don't want the value cluttering up the URL (it's a GET).
+ // It's just used as a holder for the date in a known format so that it can
+ // then be used by datepicker_close() to populate the following three inputs.
+ ?>
+ datepicker_html += '<input type="hidden" id="<?php echo
$datepicker_baseid ?>_alt"'
+ datepicker_html += ' name="<?php echo $prefix ?>_alt"';
+ datepicker_html += ' value="<?php echo "${year}-${month}-${day}" ?>"';
+ datepicker_html += ' disabled="disabled">\n';
+ <?php
+ // These three inputs we do want
+ ?>
+ datepicker_html += '<input type="hidden" id="<?php echo
$datepicker_baseid ?>_alt_day" name="<?php echo $prefix ?>day">\n';
+ datepicker_html += '<input type="hidden" id="<?php echo
$datepicker_baseid ?>_alt_month" name="<?php echo $prefix ?>month">\n';
+ datepicker_html += '<input type="hidden" id="<?php echo
$datepicker_baseid ?>_alt_year" name="<?php echo $prefix ?>year">\n';
+ dateselector.innerHTML = datepicker_html;
+
+ </script>
+ <?php
}
// Error handler - this is used to display serious errors such as database
Modified: mrbs/branches/datepicker/web/mrbs.css.php
===================================================================
--- mrbs/branches/datepicker/web/mrbs.css.php 2010-08-13 09:58:50 UTC (rev
1409)
+++ mrbs/branches/datepicker/web/mrbs.css.php 2010-08-13 16:37:47 UTC (rev
1410)
@@ -551,6 +551,7 @@
#logon input {width: <?php echo $logon_input_width ?>em}
#db_logon input {width: <?php echo $db_logon_input_width ?>em}
.form_general .group input {clear: none; width: auto}
+.form_general input.date {width: 6em}
/* font family and size needs to be the same for input and textarea as their
widths are defined in ems */
.form_general textarea {
@@ -663,6 +664,7 @@
#banner a:link {color: <?php echo $anchor_link_color_banner ?>;
text-decoration: none; font-weight: normal}
#banner a:visited {color: <?php echo $anchor_visited_color_banner ?>;
text-decoration: none; font-weight: normal}
#banner a:hover {color: <?php echo $anchor_hover_color_banner ?>;
text-decoration:underline; font-weight: normal}
+#banner input.date {width: 6em}
table#colour_key {clear: both; border-spacing: 0; border-collapse: collapse}
#colour_key td {width: 7.0em; padding: 2px; font-weight: bold;
This was sent by the SourceForge.net collaborative development platform, the
world's largest Open Source development site.
------------------------------------------------------------------------------
This SF.net email is sponsored by
Make an app they can't live without
Enter the BlackBerry Developer Challenge
http://p.sf.net/sfu/RIM-dev2dev
_______________________________________________
Mrbs-commits mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/mrbs-commits
