Linked initial date and end date in edit form

4 files changed, 58 insertions, 7 deletions

diff --git a/start.php b/start.php
index 49312599f..bf22568cb 100644
--- a/start.php
+++ b/start.php
@@ -28,6 +28,8 @@ function event_calendar_init() {
 	// Register granular notification for this type
 	register_notification_object('object', 'event_calendar', elgg_echo('event_calendar:new_event'));
 		
+	elgg_extend_view('css/elements/forms', 'css/elements/forms/datepicker_multi');
+	
 	// Set up site menu
 	$site_calendar = elgg_get_plugin_setting('site_calendar', 'event_calendar');
 	if (!$site_calendar || $site_calendar != 'no') {
diff --git a/views/default/css/elements/forms/datepicker_multi.php b/views/default/css/elements/forms/datepicker_multi.php
new file mode 100644
index 000000000..4a18bdad1
--- /dev/null
+++ b/views/default/css/elements/forms/datepicker_multi.php
@@ -0,0 +1,39 @@
+<?php
+
+?>
+
+.ui-datepicker.ui-datepicker-multi {
+    width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+    float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+    margin-bottom: 0.4em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    width: 95%;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+    width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+    width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+    width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
+    border-left-width-ltr-source: physical;
+    border-left-width-rtl-source: physical;
+    border-left-width-value: 0;
+}
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+    border-left-width-ltr-source: physical;
+    border-left-width-rtl-source: physical;
+    border-left-width-value: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+    clear: left;
+}
diff --git a/views/default/event_calendar/datetime_edit.php b/views/default/event_calendar/datetime_edit.php
index 7abc3bb62..2e0830167 100644
--- a/views/default/event_calendar/datetime_edit.php
+++ b/views/default/event_calendar/datetime_edit.php
@@ -8,20 +8,17 @@ if ($event_calendar_times != 'no') {
 	if ($event_calendar_hide_end != 'yes') {
 		$body .= '<p><label>'.elgg_echo('event_calendar:from_label').'</label>';
 	}
-	$body .= elgg_view("event_calendar/input/date_local",array(
-		//'timestamp'=>TRUE, 
-		'autocomplete'=>'off',
+	$body .= elgg_view("input/date", array(
 		'class'=>'event-calendar-compressed-date',
 		'name' => 'start_date',
-		'value'=>$vars['start_date']));
+		'value'=>$vars['start_date'],
+	));
 	$body .= '<span id="event-calendar-start-time-wrapper">';
 	$body .= elgg_view("input/timepicker",array('name' => 'start_time','value'=>$vars['start_time']));
 	$body .= '</span>';
 	if ($event_calendar_hide_end != 'yes') {
 		$body .= '</p><p id="event-calendar-to-time-wrapper"><label>'.elgg_echo('event_calendar:to_label').'</label>';
-		$body .= elgg_view("event_calendar/input/date_local",array(
-			//'timestamp'=>TRUE,
-			'autocomplete'=>'off',
+		$body .= elgg_view("input/date", array(
 			'class'=>'event-calendar-compressed-date',
 			'name' => 'end_date',
 			'value'=>$vars['end_date'],
diff --git a/views/default/js/event_calendar/event_calendar.php b/views/default/js/event_calendar/event_calendar.php
index 360f39f6c..f9e3d63c2 100644
--- a/views/default/js/event_calendar/event_calendar.php
+++ b/views/default/js/event_calendar/event_calendar.php
@@ -21,6 +21,11 @@ elgg.event_calendar.init = function () {
 		$('#event-calendar-end-time-wrapper').attr('disabled','disabled');
 	}
 	all_day_field.change(elgg.event_calendar.handleAllDayField);
+	
+	$('.elgg-input-date[name="start_date"], .elgg-input-date[name="end_date"]').datepicker({
+		numberOfMonths: 3,
+		onSelect: elgg.event_calendar.handleDateRangeSelect,
+	});
 }
 
 elgg.event_calendar.handleScheduleType = function(e) {
@@ -61,6 +66,14 @@ elgg.event_calendar.handleAllDayField = function(e) {
 	}
 }
 
+elgg.event_calendar.handleDateRangeSelect = function(selectedDate) {
+	if (this.name == 'start_date') {
+		$('.elgg-input-date[name="end_date"]').datepicker("option", "minDate", selectedDate);
+	} else {
+		$('.elgg-input-date[name="start_date"]').datepicker("option", "maxDate", selectedDate);
+	}
+}
+
 elgg.event_calendar.handleEditFormSubmit = function(e) {
 	if ($.trim($('[name="title"]').val()) == '') {
 		alert(elgg.echo('event_calendar:edit_form:error:missing_title'));