Switch to a better datetime picker widget

1 files changed, 28 insertions, 17 deletions

diff --git a/include/datetime.php b/include/datetime.php
index 270be5e3d..59dad2045 100644
--- a/include/datetime.php
+++ b/include/datetime.php
@@ -163,12 +163,12 @@ function dob($dob) {
  * @param $id
  *  id and name of datetimepicker (defaults to "datetimepicker")
  */
-function datesel($format, $min, $max, $default,$id = 'datepicker') {
-	return datetimesel($format,$min,$max,$default,$id,true,false);
+function datesel($format, $min, $max, $default, $id = 'datepicker') {
+	return datetimesel($format,$min,$max,$default,$id,true,false, '','');
 }
 
 /**
- * returns a date selector
+ * returns a time selector
  * @param $format
  *  format string, e.g. 'ymd' or 'mdy'. Not currently supported
  * @param $h
@@ -178,8 +178,8 @@ function datesel($format, $min, $max, $default,$id = 'datepicker') {
  * @param $id
  *  id and name of datetimepicker (defaults to "timepicker")
  */
-function timesel($format,$h,$m,$id='timepicker') {
-	return datetimesel($format,mktime(),mktime(),mktime($h,$m),$id,false,true);
+function timesel($format, $h, $m, $id='timepicker') {
+	return datetimesel($format,new DateTime(),new DateTime(),new DateTime("$h:$m"),$id,false,true);
 }
 
 /**
@@ -204,31 +204,42 @@ function timesel($format,$h,$m,$id='timepicker') {
  *  set maximum date from picker with id $maxfrom (none by default)
  */
 function datetimesel($format, $min, $max, $default, $id = 'datetimepicker', $pickdate = true, $picktime = true, $minfrom = '', $maxfrom = '') {
+	// Once browser support is better this could probably be replaced with native HTML5 date picker
 	$o = '';
 
 	$dateformat = '';
-	if($pickdate) $dateformat .= 'YYYY-MM-DD';
+
+	if($pickdate) $dateformat .= 'Y-m-d';
 	if($pickdate && $picktime) $dateformat .= ' ';
-	if($picktime) $dateformat .= 'HH:mm';
+	if($picktime) $dateformat .= 'H:i';
 
-	$mindate = $min ? "new Date($min*1000)" : '';
-	$maxdate = $max ? "new Date($max*1000)" : '';
+	$minjs = $min ? ",minDate: new Date({$min->getTimestamp()}*1000), yearStart: " . $min->format('Y') : '';
+	$maxjs = $max ? ",maxDate: new Date({$max->getTimestamp()}*1000), yearEnd: " . $max->format('Y') : '';
 	
-	$defaultDate = $default ? ", defaultDate: new Date($default*1000)" : '';
+	$input_text = $default ? 'value="' . date($dateformat, $default->getTimestamp()) . '"' : '';
+	$defaultdatejs = $default ? ",defaultDate: new Date({$default->getTimestamp()}*1000)" : '';
 
 	$pickers = '';
-	if(!$pickdate) $pickers .= 'pickDate: false,';
-	if(!$picktime) $pickers .= 'pickTime: false,';
+	if(!$pickdate) $pickers .= ',datepicker: false';
+	if(!$picktime) $pickers .= ',timepicker: false';
 
 	$extra_js = '';
 	if($minfrom != '') 
-		$extra_js .= "\$('#$minfrom').on('dp.change',function (e) { \$('#$id').data('DateTimePicker').setMinDate(e.date); });";
+		$extra_js .= "\$('#$minfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#$id').data('xdsoft_datetimepicker').setOptions({minDate: currentDateTime})}})";
 
 	if($maxfrom != '') 
-		$extra_js .= "\$('#$maxfrom').on('dp.change',function (e) { \$('#$id').data('DateTimePicker').setMaxDate(e.date); });";
-
-	$o .= "<div class='date' id='$id'><input type='text' placeholder='$dateformat' name='$id'/></div>";
-	$o .= "<script type='text/javascript'>\$(function () {\$('#$id').datetimepicker({sideBySide: true, $pickers minDate: $mindate, maxDate: $maxdate, format: '$dateformat', useCurrent: false $defaultDate}); $extra_js});</script>";
+		$extra_js .= "\$('#$maxfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#$id').data('xdsoft_datetimepicker').setOptions({maxDate: currentDateTime})}})";
+
+	$readable_format = $dateformat;
+	$readable_format = str_replace('Y','yyyy',$readable_format);
+	$readable_format = str_replace('m','mm',$readable_format);
+	$readable_format = str_replace('d','dd',$readable_format);
+	$readable_format = str_replace('H','HH',$readable_format);
+	$readable_format = str_replace('i','MM',$readable_format);
+
+	$o .= "<div class='date'><input type='text' placeholder='$readable_format' name='$id' id='$id' $input_text />";
+	$o .= '</div>';
+	$o .= "<script type='text/javascript'>\$(function () {var picker = \$('#$id').datetimepicker({step:5,format:'$dateformat' $minjs $maxjs $pickers $defaultdatejs}); $extra_js})</script>";
 	return $o;
 }