diff options
| -rw-r--r-- | js/lib/ui.js | 37 | ||||
| -rw-r--r-- | views/default/css/admin.php | 71 | ||||
| -rw-r--r-- | views/default/css/elements/forms.php | 256 | ||||
| -rw-r--r-- | views/default/input/date.php | 39 | ||||
| -rw-r--r-- | views/default/output/date.php | 12 |
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']; |