aboutsummaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorCash Costello <cash.costello@gmail.com>2011-07-06 03:56:13 -0700
committerCash Costello <cash.costello@gmail.com>2011-07-06 03:56:13 -0700
commite7d0bf44e4f9958b211f0a010e7c70ea0cae7da7 (patch)
treee6383f5824a4e40668ca8900f2eb39292f9774c8 /views
parente4ad206bfd288463a37cfd4f86e6f343e3a35f77 (diff)
parente44192fba9e7b9155061e141278a9c16ed4923f5 (diff)
downloadelgg-e7d0bf44e4f9958b211f0a010e7c70ea0cae7da7.tar.gz
elgg-e7d0bf44e4f9958b211f0a010e7c70ea0cae7da7.tar.bz2
Merge pull request #56 from cash/improve-date-handling
Improve date handling
Diffstat (limited to 'views')
-rw-r--r--views/default/css/admin.php71
-rw-r--r--views/default/css/elements/forms.php256
-rw-r--r--views/default/input/date.php39
-rw-r--r--views/default/output/date.php12
4 files changed, 168 insertions, 210 deletions
diff --git a/views/default/css/admin.php b/views/default/css/admin.php
index 2d587fcbe..8993ec66d 100644
--- a/views/default/css/admin.php
+++ b/views/default/css/admin.php
@@ -476,7 +476,76 @@ input[type="submit"]:hover, .elgg-button-submit:hover, .elgg-button-action:hover
.elgg-button-action.elgg-state-disabled {
background-color: #aaa;
}
-
+/* **************************************
+ DATE PICKER
+*************************************** */
+.ui-datepicker {
+ margin-top: 3px;
+ padding: 3px 3px 0;
+ border: 1px solid #ccc;
+ background-color: white;
+}
+.ui-datepicker-header {
+ padding: 2px 0;
+ border: 1px solid #ccc;
+ background-color: #eee;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+.ui-datepicker-prev, .ui-datepicker-next {
+ position: absolute;
+ top: 9px;
+ cursor: pointer;
+}
+.ui-datepicker-prev {
+ left: 6px;
+}
+.ui-datepicker-next {
+ right: 6px;
+}
+.ui-datepicker-title {
+ line-height: 1.8em;
+ margin: 0 30px;
+ text-align: center;
+ font-weight: bold;
+}
+.ui-datepicker-calendar {
+ margin-bottom: 2px;
+}
+.ui-datepicker th {
+ border: none;
+ font-weight: bold;
+ padding: 5px 6px;
+ text-align: center;
+}
+.ui-datepicker td {
+ padding: 1px;
+}
+.ui-datepicker td span, .ui-datepicker td a {
+ display: block;
+ padding: 2px;
+ line-height: 1.2em;
+ text-align: right;
+ text-decoration: none;
+}
+.ui-datepicker-calendar .ui-state-default {
+ border: 1px solid #ccc;
+ color: #555;
+ background: #fafafa;
+}
+.ui-datepicker-calendar .ui-state-hover {
+ border: 1px solid #aaa;
+ color: #333;
+ background: #ccc;
+}
+.ui-datepicker-calendar .ui-state-active,
+.ui-datepicker-calendar .ui-state-active.ui-state-hover {
+ font-weight: bold;
+ border: 1px solid #999;
+ color: #333;
+ background: #ddd;
+}
/* ***************************************
PAGINATION
*************************************** */
diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php
index 5924b8134..1fced0196 100644
--- a/views/default/css/elements/forms.php
+++ b/views/default/css/elements/forms.php
@@ -249,215 +249,81 @@ input[type="radio"] {
margin-right:10px;
}
/* ***************************************
- Datepicker
+ DATE PICKER
**************************************** */
-
-#ui-datepicker-div, .ui-datepicker-inline, .ui-datepicker-calendar{
- font-family: Arial, Helvetica, sans-serif;
- font-size: 14px;
- padding: 0;
- margin: 0;
- background: #E4ECF5;
- width: 220px;
- color: black;
-}
-#ui-datepicker-div {
- display: none;
- border: 1px solid #777;
- z-index: 9999; /*must have*/
-}
-.ui-datepicker-inline {
- float: left;
- display: block;
- border: 0;
-}
-.ui-datepicker-rtl {
- direction: rtl;
-}
-.ui-datepicker-dialog {
- padding: 5px !important;
- border: 4px ridge #ddd !important;
-}
-button.ui-datepicker-trigger {
- width: 25px;
-}
-img.ui-datepicker-trigger {
- margin: 2px;
- vertical-align: middle;
-}
-.ui-datepicker-prompt {
- float: left;
- padding: 2px;
- background: #ddd;
- color: #000;
-}
-* html .ui-datepicker-prompt {
- width: 185px;
-}
-.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
- clear: both;
- float: left;
- width: 218px;
- color: #fff;
-}
-.ui-datepicker-control {
- background: #400;
- padding: 2px 0px;
-}
-.ui-datepicker-links {
- background: #000;
- padding: 2px 0px;
-}
-.ui-datepicker-control, .ui-datepicker-links {
- font-weight: bold;
- font-size: 80%;
-}
-.ui-datepicker-links label { /* disabled links */
- padding: 2px 5px;
- color: #888;
-}
-.ui-datepicker-clear, .ui-datepicker-prev {
- float: left;
-}
-.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
- float: right;
- text-align: right;
-}
-.ui-datepicker-current {
- float: left;
- width: 30%;
- text-align: center;
-}
-.ui-datepicker-close, .ui-datepicker-next {
- float: right;
- text-align: right;
- padding: 0px 0px 2px 0px;
-}
-.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl {
- float: left;
- text-align: left;
+.ui-datepicker {
+ margin-top: 3px;
+ background-color: white;
+ border: 1px solid #0054A7;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
+ box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
+
.ui-datepicker-header {
- padding: 1px 0 3px;
background: #4690D6;
- text-align: center;
- font-weight: bold;
- height: 1.3em;
- padding: 0 2px 3px 0;
-}
-.ui-datepicker-header select {
- background: #333;
- color: #fff;
- border: 0px;
- font-weight: bold;
-}
-.ui-datepicker {
- background: #ccc;
- text-align: center;
- font-size: 100%;
-}
-.ui-datepicker a {
- display: block;
- width: 30px;
-}
-.ui-datepicker-title-row {
- background: #777;
-}
-.ui-datepicker-days-row {
- background: #eee;
- color: #666;
-}
-.ui-datepicker-week-col {
- background: #777;
- color: #fff;
-}
-.ui-datepicker-days-cell {
- color: #000;
- border: 1px solid #ddd;
-}
-.ui-datepicker-days-cell a{
- display: block;
-}
-.ui-datepicker-week-end-cell {
- background: #ddd;
-}
-.ui-datepicker-title-row .ui-datepicker-week-end-cell {
- background: #777;
+ color: white;
+ padding: 2px 0;
+ border-bottom: 1px solid #0054A7;
}
-.ui-datepicker-days-cell-over {
- background: #fff;
- border: 1px solid #777;
+.ui-datepicker-header a {
+ color: white;
}
-.ui-datepicker-unselectable {
- color: #E4ECF5;
+.ui-datepicker-prev, .ui-datepicker-next {
+ position: absolute;
+ top: 5px;
+ cursor: pointer;
}
-.ui-datepicker-today {
- background: #4690D6 !important;
+.ui-datepicker-prev {
+ left: 6px;
}
-.ui-datepicker-current-day {
- background: #999 !important;
+.ui-datepicker-next {
+ right: 6px;
}
-.ui-datepicker-status {
- background: #ddd;
- width: 100%;
- font-size: 80%;
- text-align: center;
-}
-
-/* ________ Datepicker Links _______
-
-** Reset link properties and then override them with !important */
-#ui-datepicker-div a, .ui-datepicker-inline a {
- cursor: pointer;
- margin: 0;
- padding: 0;
- background: none;
- color: #000;
- align: center !important;
+.ui-datepicker-title {
+ line-height: 1.8em;
+ margin: 0 30px;
+ text-align: center;
+ font-weight: bold;
}
-.ui-datepicker-inline .ui-datepicker-links a {
- padding: 0 5px !important;
+.ui-datepicker-calendar {
+ margin: 4px;
}
-.ui-datepicker-control a, .ui-datepicker-links a {
- padding: 2px 5px !important;
- color: #eee !important;
+.ui-datepicker th {
+ color: #0054A7;
+ border: none;
+ font-weight: bold;
+ padding: 5px 6px;
+ text-align: center;
}
-.ui-datepicker-title-row a {
- color: #eee !important;
+.ui-datepicker td {
+ padding: 1px;
}
-.ui-datepicker-control a:hover {
- background: #fdd !important;
- color: #333 !important;
+.ui-datepicker td span, .ui-datepicker td a {
+ display: block;
+ padding: 2px;
+ line-height: 1.2em;
+ text-align: right;
+ text-decoration: none;
}
-.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
- background: #ddd !important;
- color: #333 !important;
+.ui-datepicker-calendar .ui-state-default {
+ border: 1px solid #ccc;
+ color: #4690D6;;
+ background: #fafafa;
}
-
-/* ___________ MULTIPLE MONTHS _________*/
-
-.ui-datepicker-multi .ui-datepicker {
- border: 1px solid #777;
+.ui-datepicker-calendar .ui-state-hover {
+ border: 1px solid #aaa;
+ color: #0054A7;
+ background: #eee;
}
-.ui-datepicker-one-month {
- float: left;
- width: 185px;
-}
-.ui-datepicker-new-row {
- clear: left;
-}
-
-/* ___________ IE6 IFRAME FIX ________ */
-
-.ui-datepicker-cover {
- display: none; /*sorry for IE5*/
- display/**/: block; /*sorry for IE5*/
- position: absolute; /*must have*/
- z-index: -1; /*must have*/
- filter: mask(); /*must have*/
- top: -4px; /*must have*/
- left: -4px; /*must have*/
- width: 200px; /*must have*/
- height: 200px; /*must have*/
+.ui-datepicker-calendar .ui-state-active,
+.ui-datepicker-calendar .ui-state-active.ui-state-hover {
+ font-weight: bold;
+ border: 1px solid #0054A7;
+ color: #0054A7;
+ background: #E4ECF5;
}
-
diff --git a/views/default/input/date.php b/views/default/input/date.php
index e21a5f8f5..ceeb2105c 100644
--- a/views/default/input/date.php
+++ b/views/default/input/date.php
@@ -3,11 +3,18 @@
* Elgg date input
* Displays a text field with a popup date picker.
*
- * @package Elgg
- * @subpackage Core
+ * The elgg.ui JavaScript library initializes the jQueryUI datepicker based
+ * on the CSS class .elgg-input-date. It uses the ISO 8601 standard for date
+ * representation: yyyy-mm-dd.
*
- * @uses $vars['value'] The current value, if any (as a unix timestamp)
- * @uses $vars['class'] Additional CSS class
+ * Unix timestamps are supported by setting the 'timestamp' parameter to true.
+ * The date is still displayed to the user in a text format but is submitted as
+ * a unix timestamp in seconds.
+ *
+ * @uses $vars['value'] The current value, if any (as a unix timestamp)
+ * @uses $vars['class'] Additional CSS class
+ * @uses $vars['timestamp'] Store as a Unix timestamp in seconds. Default = false
+ * Note: you cannot use an id with the timestamp option.
*/
//@todo popup_calendar deprecated in 1.8. Remove in 2.0
@@ -20,16 +27,30 @@ if (isset($vars['class'])) {
$defaults = array(
'value' => '',
'disabled' => false,
+ 'timestamp' => false,
);
$vars = array_merge($defaults, $vars);
+$timestamp = $vars['timestamp'];
+unset($vars['timestamp']);
+
+if ($timestamp) {
+ echo elgg_view('input/hidden', array(
+ 'name' => $vars['name'],
+ 'value' => $vars['value'],
+ ));
-if ($vars['value'] > 86400) {
- $vars['value'] = date('n/d/Y', $vars['value']);
+ $vars['class'] = "{$vars['class']} elgg-input-timestamp";
+ $vars['id'] = $vars['name'];
+ unset($vars['name']);
+ unset($vars['internalname']);
}
-$attributes = elgg_format_attributes($vars);
+// convert timestamps to text for display
+if (is_numeric($vars['value'])) {
+ $vars['value'] = gmdate('Y/m/d', $vars['value']);
+}
-?>
-<input type="text" <?php echo $attributes; ?> /> \ No newline at end of file
+$attributes = elgg_format_attributes($vars);
+echo "<input type=\"text\" $attributes />";
diff --git a/views/default/output/date.php b/views/default/output/date.php
index fda7668e7..7c98dddc9 100644
--- a/views/default/output/date.php
+++ b/views/default/output/date.php
@@ -6,10 +6,12 @@
* @package Elgg
* @subpackage Core
*
- * @uses $vars['value'] A UNIX epoch timestamp
- *
+ * @uses $vars['value'] Date as text or a Unix timestamp in seconds
*/
-if ($vars['value'] > 86400) {
- echo date("n/d/Y", $vars['value']);
-} \ No newline at end of file
+// convert timestamps to text for display
+if (is_numeric($vars['value'])) {
+ $vars['value'] = gmdate('Y/m/d', $vars['value']);
+}
+
+echo $vars['value'];