aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/lib/ui.js37
-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
5 files changed, 201 insertions, 214 deletions
diff --git a/js/lib/ui.js b/js/lib/ui.js
index fd20acbd1..4426917ed 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -20,7 +20,7 @@ elgg.ui.init = function () {
$('.elgg-requires-confirmation').live('click', elgg.ui.requiresConfirmation);
if ($('.elgg-input-date').length) {
- $('.elgg-input-date').datepicker();
+ elgg.ui.initDatePicker();
}
}
@@ -53,7 +53,7 @@ elgg.ui.toggles = function(event) {
* targetSelector: The selector used to find the popup
* target: The popup jQuery element as found by the selector
* source: The jquery element whose click event initiated a popup.
- *
+ *
* The return value of the function is used as the options object to .position().
* Handles can also return false to abort the default behvior and override it with their own.
*
@@ -87,7 +87,7 @@ elgg.ui.popsUp = function(event) {
if (!options) {
return;
}
-
+
// hide if already open
if ($target.is(':visible')) {
$target.fadeOut();
@@ -120,7 +120,7 @@ elgg.ui.popupClose = function(event) {
if (!$target.is(':visible')) {
return;
}
-
+
// didn't click inside the target
if ($eventTarget.closest(target).length > 0) {
inTarget = true;
@@ -246,5 +246,34 @@ elgg.ui.LoginHandler = function(hook, type, params, options) {
return null;
};
+/**
+ * Initialize the date picker
+ *
+ * Uses the class .elgg-input-date as the selector.
+ *
+ * If the class .elgg-input-timestamp is set on the input element, the onSelect
+ * method converts the date text to a unix timestamp in seconds. That value is
+ * stored in a hidden element indicated by the id on the input field.
+ *
+ * @return void
+ */
+elgg.ui.initDatePicker = function() {
+ $('.elgg-input-date').datepicker({
+ // ISO-8601
+ dateFormat: 'yy-mm-dd',
+ onSelect: function(dateText) {
+ if ($(this).is('.elgg-input-timestamp')) {
+ // convert to unix timestamp
+ var date = $.datepicker.parseDate('yy-mm-dd', dateText);
+ var timestamp = $.datepicker.formatDate('@', date);
+ timestamp = timestamp / 1000;
+
+ var id = $(this).attr('id');
+ $('input[name="' + id + '"]').val(timestamp);
+ }
+ }
+ });
+}
+
elgg.register_hook_handler('init', 'system', elgg.ui.init);
elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.LoginHandler); \ No newline at end of file
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'];