put a date and time picker on events

2 files changed, 116 insertions, 6 deletions

diff --git a/mod/events.php b/mod/events.php
index 02a9d1ed9..f3bf97141 100755
--- a/mod/events.php
+++ b/mod/events.php
@@ -14,6 +14,10 @@ function events_post(&$a) {
 	$event_id = ((x($_POST,'event_id')) ? intval($_POST['event_id']) : 0);
 	$xchan = ((x($_POST,'xchan')) ? dbesc($_POST['xchan']) : '');
 	$uid      = local_user();
+
+	$start_text = escape_tags($_REQUEST['start_text']);
+	$finish_text = escape_tags($_REQUEST['finish_text']);
+
 	$startyear = intval($_POST['startyear']);
 	$startmonth = intval($_POST['startmonth']);
 	$startday = intval($_POST['startday']);
@@ -37,12 +41,23 @@ function events_post(&$a) {
 	// The default setting for the `private` field in event_store() is false, so mirror that	
 	$private_event = false;
 
+	if($start_text) {
+		$start = $start_text;
+	}
+	else {
+		$start = sprintf('%d-%d-%d %d:%d:0',$startyear,$startmonth,$startday,$starthour,$startminute);
+	}
 
-	$start    = sprintf('%d-%d-%d %d:%d:0',$startyear,$startmonth,$startday,$starthour,$startminute);
-	if($nofinish)
+	if($nofinish) {
 		$finish = '0000-00-00 00:00:00';
-	else
-		$finish    = sprintf('%d-%d-%d %d:%d:0',$finishyear,$finishmonth,$finishday,$finishhour,$finishminute);
+	}
+
+	if($finish_text) {
+		$finish = $finish_text;
+	}
+	else {
+		$finish = sprintf('%d-%d-%d %d:%d:0',$finishyear,$finishmonth,$finishday,$finishhour,$finishminute);
+	}
 
 	if($adjust) {
 		$start = datetime_convert(date_default_timezone_get(),'UTC',$start);
@@ -451,8 +466,10 @@ function events_content(&$a) {
 		$smonth = datetime_convert('UTC', $tz, $sdt, 'm');
 		$sday = datetime_convert('UTC', $tz, $sdt, 'd');
 
+
 		$shour = ((x($orig_event)) ? datetime_convert('UTC', $tz, $sdt, 'H') : 0);
 		$sminute = ((x($orig_event)) ? datetime_convert('UTC', $tz, $sdt, 'i') : 0);
+		$stext = datetime_convert('UTC',$tz,$sdt);
 
 		$fyear = datetime_convert('UTC', $tz, $fdt, 'Y');
 		$fmonth = datetime_convert('UTC', $tz, $fdt, 'm');
@@ -460,6 +477,7 @@ function events_content(&$a) {
 
 		$fhour = ((x($orig_event)) ? datetime_convert('UTC', $tz, $fdt, 'H') : 0);
 		$fminute = ((x($orig_event)) ? datetime_convert('UTC', $tz, $fdt, 'i') : 0);
+		$ftext = datetime_convert('UTC',$tz,$fdt);
 
 		$f = get_config('system','event_input_format');
 		if(! $f)
@@ -487,9 +505,15 @@ function events_content(&$a) {
 			'$mid' => $mid,
 	
 			'$title' => t('Event details'),
-			'$desc' => sprintf( t('Format is %s %s. Starting date and Title are required.'),$dateformat,$timeformat),
+			'$format_desc' => sprintf( t('Format is %s %s.'),$dateformat,$timeformat),
+			'$desc' => t('Starting date and Title are required.'),
 			
 			'$s_text' => t('Event Starts:') . ' <span class="required" title="' . t('Required') . '">*</span>',
+			'$bootstrap' => 1,
+			'$stext' => $stext,
+			'$ftext' => $ftext,
+			'$ModalCANCEL' => t('Cancel'),
+			'$ModalOK' => t('OK'),
 			'$s_dsel' => datesel($f,'start',$syear+5,$syear,false,$syear,$smonth,$sday),
 			'$s_tsel' => timesel('start',$shour,$sminute),
 			'$n_text' => t('Finish date/time is not known or not relevant'),
diff --git a/view/tpl/event_form.tpl b/view/tpl/event_form.tpl
index bfdf4d0b6..611bf6006 100755
--- a/view/tpl/event_form.tpl
+++ b/view/tpl/event_form.tpl
@@ -1,7 +1,8 @@
 <h3>{{$title}}</h3>
 
 <p>
-{{$desc}}
+{{if ! $bootstrap}}
+{{$format_desc}} {{/if}}{{$desc}}
 </p>
 
 <form action="{{$post}}" method="post" >
@@ -11,7 +12,11 @@
 <input type="hidden" name="mid" value="{{$mid}}" />
 
 <div id="event-start-text">{{$s_text}}</div>
+{{if $bootstrap}}
+<i class="icon-calendar btn btn-default" onclick="eventGetStart(); return false;" /></i> <input type="text" name="start_text" id="start-text" value="{{$stext}}" />
+{{else}}
 {{$s_dsel}} {{$s_tsel}}
+{{/if}}
 
 <div class="clear"></div><br />
 
@@ -21,7 +26,11 @@
 
 
 <div id="event-finish-text">{{$f_text}}</div>
+{{if $bootstrap}}
+<i class="icon-calendar btn btn-default" onclick="eventGetFinish(); return false;" /></i> <input type="text" name="finish_text" id="finish-text" value="{{$ftext}}" />
+{{else}}
 {{$f_dsel}} {{$f_tsel}}
+{{/if}}
 
 <div id="event-datetime-break"></div>
 
@@ -51,4 +60,81 @@
 <input id="event-submit" type="submit" name="submit" value="{{$submit}}" />
 </form>
 
+<!-- Modal for item expiry-->
+<div class="modal" id="startModal" tabindex="-1" role="dialog" aria-labelledby="expiryModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title" id="startModalLabel">{{$s_text}}</h4>
+      </div>
+     <!--  <div class="modal-body"> -->
+            <div class="modal-body form-group" style="width:90%">
+                <div class="input-group input-group-sm date" id="datetimepickerstart">
+                    <span class="input-group-addon"><!-- <span class="glyphicon glyphicon-calendar"></span> -->
+                    <span class="icon-calendar"></span>
+                    </span>
+                    <input id="start-date" value='{{$stext}}' type='text' class="form-control" data-format="YYYY-MM-DD HH:mm" size="20"/>
+                </div>
+            </div>
+      <!-- </div> -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{$ModalCANCEL}}</button>
+        <button id="start-modal-OKButton" type="button" class="btn btn-primary">{{$ModalOK}}</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<script type="text/javascript">
+  $(function() {
+    $('#datetimepickerstart').datetimepicker({
+      language: 'us',
+      icons: {
+					time: "icon-time",
+					date: "icon-calendar",
+					up: "icon-arrow-up",
+					down: "icon-arrow-down"
+				}
+    });
+  });
+</script>
+
+<!-- Modal for item expiry-->
+<div class="modal" id="finishModal" tabindex="-1" role="dialog" aria-labelledby="expiryModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title" id="finishModalLabel">{{$s_text}}</h4>
+      </div>
+     <!--  <div class="modal-body"> -->
+            <div class="modal-body form-group" style="width:90%">
+                <div class="input-group input-group-sm date" id="datetimepickerfinish">
+                    <span class="input-group-addon"><!-- <span class="glyphicon glyphicon-calendar"></span> -->
+                    <span class="icon-calendar"></span>
+                    </span>
+                    <input id="finish-date" value='{{$ftext}}' type='text' class="form-control" data-format="YYYY-MM-DD HH:mm" size="20"/>
+                </div>
+            </div>
+      <!-- </div> -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{$ModalCANCEL}}</button>
+        <button id="finish-modal-OKButton" type="button" class="btn btn-primary">{{$ModalOK}}</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<script type="text/javascript">
+  $(function() {
+    $('#datetimepickerfinish').datetimepicker({
+      language: 'us',
+      icons: {
+					time: "icon-time",
+					date: "icon-calendar",
+					up: "icon-arrow-up",
+					down: "icon-arrow-down"
+				}
+    });
+  });
+</script>