Merge pull request #646 from pafcu/master

Initial stab at better general datetime picker

include/datetime.php

@@ -134,7 +134,7 @@ function dob($dob) {
 	$f = get_config('system','birthday_input_format');
 	if(! $f)
 		$f = 'ymd';
-	$o = datesel($f,'',1920,$y,true,$year,$month,$day);
+	$o = datesel($f,'dob',1920,$y,true,$year,$month,$day);
 	return $o;
 }
 
@@ -169,95 +169,107 @@ function datesel_format($f) {
 	return $o;
 }
 
+/**
+ * returns a date selector
+ * @param $format
+ *  format string, e.g. 'ymd' or 'mdy'. Not currently supported
+ * @param $id
+ *  id and name of datetimepicker (defaults to "datepicker")
+ * @param $ymin
+ *  first year shown in selector dropdown
+ * @param $ymax
+ *  last year shown in selector dropdown
+ * @param $allow_blank
+ *  allow an empty response on any field. Not currently supported
+ * @param $y
+ *  already selected year
+ * @param $m
+ *  already selected month
+ * @param $d
+ *  already selected day
+ */
+function datesel($format, $id, $ymin, $ymax, $allow_blank, $y, $m, $d) {
+	if($ymin > $ymax) list($ymin,$ymax) = array($ymax,$ymin);
 
-// returns a date selector.
+	if($id == '') $id = 'datepicker';
-// $f           = format string, e.g. 'ymd' or 'mdy'
-// $pre         = prefix (if needed) for HTML name and class fields
-// $ymin        = first year shown in selector dropdown
-// $ymax        = last year shown in selector dropdown
-// $allow_blank = allow an empty response on any field
-// $y           = already selected year
-// $m           = already selected month
-// $d           = already selected day
-
-
-function datesel($f,$pre,$ymin,$ymax,$allow_blank,$y,$m,$d) {
 
 	$o = '';
 
-	if(strlen($f)) {
+	$dateformat = 'YYYY-MM-DD';
-		for($z = 0; $z < strlen($f); $z ++) {
+	$mindate = $ymin ? "new Date($ymin,1,1)" : '';
-			if($f[$z] === 'y') {
+	$maxdate = $ymin ? "new Date($ymax,11,31)" : ''; // Yes, JS months really go from 0 to 11.
 	
-				$o .= "<select name=\"{$pre}year\" class=\"{$pre}year\" size=\"1\">";
+	$m = $m -1; // Because JavaScript month weirdness
-				if($allow_blank) {
-					$sel = (($y == '0000') ? " selected=\"selected\" " : "");
-					$o .= "<option value=\"0000\" $sel ></option>";
-				}
 
-				if($ymax > $ymin) {
+	$defaultDate = ($y != 0 && $m != 0 && $d != 0) ? ", defaultDate: new Date($y,$m,$d)" : '';
-					for($x = $ymax; $x >= $ymin; $x --) {
-						$sel = (($x == $y) ? " selected=\"selected\" " : "");
-						$o .= "<option value=\"$x\" $sel>$x</option>";
-					}
-				}
-				else {
-					for($x = $ymax; $x <= $ymin; $x ++) {
-						$sel = (($x == $y) ? " selected=\"selected\" " : "");
-						$o .= "<option value=\"$x\" $sel>$x</option>";
-					}
-				}
-			}
-			elseif($f[$z] == 'm') {
 
-				$o .= "</select> <select name=\"{$pre}month\" class=\"{$pre}month\" size=\"1\">";
+	$o .= "<div class='date' id='$id'><input type='text' placeholder='$dateformat' name='$id'/></div>";
-				for($x = (($allow_blank) ? 0 : 1); $x <= 12; $x ++) {
+	$o .= "<script type='text/javascript'>\$(function () {\$('#$id').datetimepicker({pickTime: false, minDate: $mindate, maxDate: $maxdate, format: '$dateformat', useCurrent: false $defaultDate}); });</script>";
-					$sel = (($x == $m) ? " selected=\"selected\" " : "");
-					$y = (($x) ? $x : '');
-					$o .= "<option value=\"$x\" $sel>$y</option>";
-				}
-			}
-			elseif($f[$z] == 'd') {
-
-				$o .= "</select> <select name=\"{$pre}day\" class=\"{$pre}day\" size=\"1\">";
-				for($x = (($allow_blank) ? 0 : 1); $x <= 31; $x ++) {
-					$sel = (($x == $d) ? " selected=\"selected\" " : "");
-					$y = (($x) ? $x : '');
-					$o .= "<option value=\"$x\" $sel>$y</option>";
-				}
-			}
-		}
-	}
-
-	$o .= "</select>";
 	return $o;
 }
 
+/**
+ * returns a date selector
+ * @param $format
+ *  format string, e.g. 'ymd' or 'mdy'. Not currently supported
+ * @param $id
+ *  id and name of datetimepicker (defaults to "timepicker")
+ * @param $h
+ *  already selected hour
+ * @param $m
+ *  already selected minute
+ */
+function timesel($format,$id,$h,$m) {
+	if($id == '') $id = 'timepicker';
 
-function timesel($pre,$h,$m) {
+	$timeformat = 'HH:mm';
 
 	$o = '';
-	$o .= "<select name=\"{$pre}hour\" class=\"{$pre}hour\" size=\"1\">";
+	$o .= "<div class='date' id='$id'><input type='text' placeholder='$timeformat' name='$id'/></div>";
-	for($x = 0; $x < 24; $x ++) {
+	$o .= "<script type='text/javascript'>\$(function () {\$('#$id').datetimepicker({pickDate: false, format: '$timeformat', useCurrent: false, defaultDate: new Date(0,0,0,$h,$m)}); });</script>";
-		$sel = (($x == $h) ? " selected=\"selected\" " : "");
-		$o .= "<option value=\"$x\" $sel>$x</option>";
-	}
-	$o .= "</select> : <select name=\"{$pre}minute\" class=\"{$pre}minute\" size=\"1\">";
-	for($x = 0; $x < 60; $x ++) {
-		$sel = (($x == $m) ? " selected=\"selected\" " : "");
-		$o .= "<option value=\"$x\" $sel>$x</option>";
-	}
-
-	$o .= "</select>";
 	return $o;
 }
 
+/**
+ * returns a datetime selector
+ * @param $format
+ *  format string, e.g. 'ymd' or 'mdy'. Not currently supported
+ * @param $id
+ *  id and name of datetimepicker (defaults to "datetimepicker")
+ * @param $ymin
+ *  first year shown in selector dropdown
+ * @param $ymax
+ *  last year shown in selector dropdown
+ * @param $allow_blank
+ *  allow an empty response on any field. Not currently supported
+ * @param $y
+ *  already selected year
+ * @param $m
+ *  already selected month
+ * @param $d
+ *  already selected day
+ * @param $h
+ *  already selected hour
+ * @param $min
+ *  already selected minute
+ */
+function datetimesel($format, $id, $ymin, $ymax, $allow_blank, $y, $m, $d, $h, $min) {
+	if($ymin > $ymax) list($ymin,$ymax) = array($ymax,$ymin);
 
+	if($id == '') $id = 'datetimepicker';
 
+	$o = '';
 
+	$dateformat = 'YYYY-MM-DD HH:mm';
+	$mindate = $ymin ? "new Date($ymin,1,1)" : '';
+	$maxdate = $ymin ? "new Date($ymax,11,31)" : '';
 	
+	$defaultDate = ($y != 0 && $m != 0 && $d != 0) ? ", defaultDate: new Date($y, $m, $d, $h, $min)" : '';
 
-
+	$o .= "<div class='date' id='$id'><input type='text' placeholder='$dateformat' name='$id'/></div>";
+	$o .= "<script type='text/javascript'>\$(function () {\$('#$id').datetimepicker({sideBySide: true, minDate: $mindate, maxDate: $maxdate, format: '$dateformat', useCurrent: false $defaultDate}); });</script>";
+	return $o;
+}
 
 // implements "3 seconds ago" etc.
 // based on $posted_date, (UTC).

mod/events.php

@@ -18,18 +18,6 @@ function events_post(&$a) {
 	$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']);
-	$starthour = intval($_POST['starthour']);
-	$startminute = intval($_POST['startminute']);
-
-	$finishyear = intval($_POST['finishyear']);
-	$finishmonth = intval($_POST['finishmonth']);
-	$finishday = intval($_POST['finishday']);
-	$finishhour = intval($_POST['finishhour']);
-	$finishminute = intval($_POST['finishminute']);
-
 	$adjust   = intval($_POST['adjust']);
 	$nofinish = intval($_POST['nofinish']);
 
@@ -560,18 +548,15 @@ function events_content(&$a) {
 			'$placeholdercategory' => t('Categories (comma-separated list)'),
 			'$category' => $category,
 			'$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_dsel' => datetimesel($f,'start_text',$syear+5,$syear,false,$syear,$smonth,$sday,$shour,$sminute),
-			'$s_tsel' => timesel('start',$shour,$sminute),
 			'$n_text' => t('Finish date/time is not known or not relevant'),
 			'$n_checked' => $n_checked,
 			'$f_text' => t('Event Finishes:'),
-			'$f_dsel' => datesel($f,'finish',$fyear+5,$fyear,false,$fyear,$fmonth,$fday),
+			'$f_dsel' => datetimesel($f,'finish_text',$fyear+5,$fyear,false,$fyear,$fmonth,$fday,$fhour,$fminute),
-			'$f_tsel' => timesel('finish',$fhour,$fminute),
 			'$a_text' => t('Adjust for viewer timezone'),
 			'$a_checked' => $a_checked,
 			'$d_text' => t('Description:'), 

mod/profiles.php

@@ -233,41 +233,13 @@ function profiles_post(&$a) {
 			return;
 		}
 
-		if($_POST['dob']) {
+		$dob = $_POST['dob'] ? escape_tags(trim($_POST['dob'])) : '0000-00-00'; // FIXME: Needs to be validated?
-			$year = substr($_POST['dob'],0,4);
-			$month = substr($_POST['dob'],5,2);
-			$day = substr($_POST['dob'],8,2);
-		}
-	
-		$year = intval($_POST['year']);
-		if($year < 1900 || $year > 2100 || $year < 0)
-			$year = 0;
-		$month = intval($_POST['month']);
-			if(($month > 12) || ($month < 0))
-				$month = 0;
-		$mtab = array(0,31,29,31,30,31,30,31,31,30,31,30,31);
-		$day = intval($_POST['day']);
-			if(($day > $mtab[$month]) || ($day < 0))
-				$day = 0;
-
-//		if($year && (! ($month && $day))) {
-//			$month = 1; $day = 1;
-//		}
-
-
-		$dob = '0000-00-00';
-		$dob = sprintf('%04d-%02d-%02d',$year,$month,$day);
-
 			
 		$name = escape_tags(trim($_POST['name']));
 
 		if($orig[0]['name'] != $name)
 			$namechanged = true;
 
-
-
-
-
 		$pdesc        = escape_tags(trim($_POST['pdesc']));
 		$gender       = escape_tags(trim($_POST['gender']));
 		$address      = escape_tags(trim($_POST['address']));

view/tpl/event_form.tpl

@@ -3,8 +3,7 @@
 <h3>{{$title}}</h3>
 
 <p>
-{{if ! $bootstrap}}
+{{$desc}}
-{{$format_desc}} {{/if}}{{$desc}}
 </p>
 
 <form action="{{$post}}" method="post" >
@@ -17,11 +16,7 @@
 <input type="text" id="event-summary" name="summary" value="{{$t_orig}}" />
 
 <div id="event-start-text">{{$s_text}}</div>
-{{if $bootstrap}}
+{{$s_dsel}}
-<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 />
 
@@ -31,11 +26,7 @@
 
 <div id="event-finish-wrapper">
 <div id="event-finish-text">{{$f_text}}</div>
-{{if $bootstrap}}
+{{$f_dsel}}
-<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>
 
 <div id="event-datetime-break"></div>
@@ -73,81 +64,4 @@
 <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-date-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-date-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>
 </div>