Merge pull request #56 from cash/improve-date-handling

Improve date handling

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'];