datepicker and timepicker fixes

includes/CMB2_Sanitize.php

@@ -206,7 +206,20 @@ public function text_money() {
 	 * @return string       Timestring
 	 */
 	public function text_date_timestamp() {
-		return is_array( $this->value ) ? array_map( 'strtotime', $this->value ) : strtotime( $this->value );
+		if ( is_array( $this->value ) ) {
+			$returnee = array();
+			foreach ( $this->value as $value ) {
+				$date_object = date_create_from_format( $this->field->args['date_format'], $value );
+				$returnee[]  = $date_object ? $date_object->setTime( 0, 0, 0 )->getTimeStamp() : '';
+
+			}
+		} else {
+			$date_object = date_create_from_format( $this->field->args['date_format'], $this->value );
+			$returnee    = $date_object ? $date_object->setTime( 0, 0, 0 )->getTimeStamp() : '';
+		}
+
+		return $returnee;
+
 	}
 
 	/**

includes/CMB2_Types.php

@@ -500,10 +500,13 @@ public function wysiwyg( $args = array() ) {
 	}
 
 	public function text_date( $args = array() ) {
+		$dateFormat = cmb2_utils()->php_to_js_dateformat( $this->field->args( 'date_format' ) );
+
 		$args = wp_parse_args( $args, array(
 			'class' => 'cmb2-text-small cmb2-datepicker',
 			'value' => $this->field->get_timestamp_format(),
 			'desc'  => $this->_desc(),
+			'data-datepicker' => '{ "dateFormat": "' . $dateFormat  . '" }'
 		) );
 
 		CMB2_JS::add_dependencies( array( 'jquery-ui-core', 'jquery-ui-datepicker' ) );
@@ -517,10 +520,13 @@ public function text_date_timestamp( $args = array() ) {
 	}
 
 	public function text_time( $args = array() ) {
+		$timeFormat = cmb2_utils()->php_to_js_dateformat( $this->field->args( 'time_format' ) );
+
 		$args = wp_parse_args( $args, array(
 			'class' => 'cmb2-timepicker text-time',
-			'value' => $this->field->get_timestamp_format( 'time_format' ),
+			'value' => $this->field->escaped_value(),
 			'desc' => $this->_desc(),
+			'data-timepicker' => '{ "timeFormat": "' . $timeFormat  . '" }'
 		) );
 
 		CMB2_JS::add_dependencies( array( 'jquery-ui-core', 'jquery-ui-datepicker', 'jquery-ui-datetimepicker' ) );

includes/CMB2_Utils.php

@@ -184,4 +184,57 @@ public function url( $path = '' ) {
 		return $this->url . $path;
 	}
 
+
+	/**
+	 * Takes a php date() format string and returns a string formatted to suit for the date/time pickers
+	 * It will work with only with the following subset ot date() options:
+	 *
+	 *  d, j, z, m, n, y, and Y.
+	 *
+	 * A slight effort is made to deal with escaped characters.
+	 *
+	 * Other options are ignored, because they would either bring compatibility problems between PHP and JS, or
+	 * bring even more translation troubles.
+	 *
+	 * @since 2.0.6
+	 *
+	 * @param string $format php date format
+	 *
+	 * @return string reformatted string
+	 */
+	public function php_to_js_dateformat( $format ) {
+
+		// order is relevant here, since the replacement will be done sequentially.
+		$supported_options = array(
+			'd' => 'dd',  // Day, leading 0
+			'j' => 'd',   // Day, no 0
+			'z' => 'o',   // Day of the year, no leading zeroes,
+			// 'D' => 'D',   // Day name short, not sure how it'll work with translations
+			// 'l' => 'DD',  // Day name full, idem before
+			'm' => 'mm',  // Month of the year, leading 0
+			'n' => 'm',   // Month of the year, no leading 0
+			// 'M' => 'M',   // Month, Short name
+			// 'F' => 'MM',  // Month, full name,
+			'y' => 'y',   // Year, two digit
+			'Y' => 'yy',  // Year, full
+			'H' => 'HH',  // Hour with leading 0 (24 hour)
+			'G' => 'H',   // Hour with no leading 0 (24 hour)
+			'h' => 'hh',  // Hour with leading 0 (12 hour)
+			'g' => 'h',   // Hour with no leading 0 (12 hour),
+			'i' => 'mm',  // Minute with leading 0,
+			's' => 'ss',  // Second with leading 0,
+			'a' => 'tt',  // am/pm
+			'A' => 'TT'   // AM/PM
+		);
+
+		foreach ( $supported_options as $php => $js ) {
+			// replaces every instance of a supported option, but skips escaped characters
+			$format = preg_replace( "~(?<!\\\\)$php~", $js, $format );
+		}
+
+		$format = preg_replace_callback( '~(?:\\\.)+~', 'wrap_escaped_chars', $format );
+
+		return $format;
+	}
+
 }

includes/helper-functions.php

@@ -305,3 +305,51 @@ function cmb2_metabox_form( $meta_box, $object_id = 0, $args = array() ) {
 		return cmb2_get_metabox_form( $meta_box, $object_id, $args );
 	}
 }
+
+/**
+ * Helper function for CMB_Utils->php_to_js_dateformat, because php 5.2 was retarded.
+ *
+ * @param $wrap
+ *
+ * @return string
+ */
+function wrap_escaped_chars( $wrapped ) {
+	return "'" . str_replace( '\\', '', $wrapped[0] ) . "'";
+}
+
+
+if( !function_exists("date_create_from_format") ) {
+
+	/**
+	 * Reimplementation of DateTime::createFromFormat for PHP < 5.3. :(
+	 * Borrowed from http://stackoverflow.com/questions/5399075/php-datetimecreatefromformat-in-5-2
+	 *
+	 * @param $date_format
+	 * @param $date_value
+	 *
+	 * @return DateTime
+	 */
+	function date_create_from_format( $date_format, $date_value )
+	{
+
+		$schedule_format = str_replace( array( 'M', 'Y', 'm', 'd', 'H', 'i', 'a' ), array('%b', '%Y', '%m', '%d', '%H', '%M', '%p'), $date_format);
+		// %Y, %m and %d correspond to date()'s Y m and d.
+		// %I corresponds to H, %M to i and %p to a
+		$ugly = strptime($date_value, $schedule_format);
+		$ymd = sprintf(
+		// This is a format string that takes six total decimal
+		// arguments, then left-pads them with zeros to either
+		// 4 or 2 characters, as needed
+			'%04d-%02d-%02d %02d:%02d:%02d',
+			$ugly['tm_year'] + 1900,  // This will be "111", so we need to add 1900.
+			$ugly['tm_mon'] + 1,      // This will be the month minus one, so we add one.
+			$ugly['tm_mday'],
+			$ugly['tm_hour'],
+			$ugly['tm_min'],
+			$ugly['tm_sec']
+		);
+		$new_schedule = new DateTime($ymd);
+
+		return $new_schedule;
+	}
+}

js/cmb2.js

@@ -679,22 +679,33 @@ window.CMB2 = (function(window, document, $, undefined){
 		cmb.initColorPickers( $colorPickers );
 	};
 
-	cmb.initTimePickers = function( $selector ) {
-		if ( ! $selector.length ) {
-			return;
-		}
+    cmb.initTimePickers = function( $selector ) {
+        if ( ! $selector.length ) {
+            return;
+        }
 
-		$selector.timepicker( 'destroy' );
-		$selector.timepicker( cmb.defaults.time_picker );
-	};
+        $selector.each(function() {
+            var options = cmb.defaults.time_picker;
+            $(this).timepicker( 'destroy' );
+            var additionalOptions = $(this).data("timepicker");
+            $.extend( options, additionalOptions );
+            $(this).timepicker( options );
+        });
+
+    };
 
 	cmb.initDatePickers = function( $selector ) {
 		if ( ! $selector.length ) {
 			return;
 		}
 
-		$selector.datepicker( 'destroy' );
-		$selector.datepicker( cmb.defaults.date_picker );
+        $selector.each(function() {
+            var options = cmb.defaults.date_picker;
+            $(this).datepicker( 'destroy' );
+            var additionalOptions = $(this).data("datepicker");
+            $.extend( options, additionalOptions );
+            $(this).datepicker( options );
+        });
 	};
 
 	cmb.initColorPickers = function( $selector ) {

tests/test-cmb-types.php

@@ -360,7 +360,7 @@ public function test_text_date_field_after_value_update() {
 		$value = $field->format_timestamp( strtotime( 'today' ) );
 
 		$this->assertHTMLstringsAreEqual(
-			sprintf( '<input type="text" class="cmb2-text-small cmb2-datepicker" name="field_test_field" id="field_test_field" value="%s"/><span class="cmb2-metabox-description">This is a description</span>', $value ),
+			sprintf( "<input type=\"text\" class=\"cmb2-text-small cmb2-datepicker\" name=\"field_test_field\" id=\"field_test_field\" value=\"%s\" data-datepicker='{ \"dateFormat\": \"mm&#39;/&#39;dd&#39;/&#39;yy\" }'/><span class=\"cmb2-metabox-description\">This is a description</span>", $value ),
 			$this->capture_render( array( $type, 'render' ) )
 		);
 
@@ -369,19 +369,18 @@ public function test_text_date_field_after_value_update() {
 
 	public function test_text_time_field_after_value_update() {
 
-		update_post_meta( $this->post_id, $this->text_type_field['id'], 'today' );
+		update_post_meta( $this->post_id, $this->text_type_field['id'], '12:00 AM' );
 
 		$field = $this->get_field_object( 'text_time' );
 		$type = $this->get_field_type_object( $field );
 
 		// Check that time format is set to the default (since we didn't set it)
 		$this->assertEquals( 'h:i A', $field->args( 'time_format' ) );
 
-		$value = $field->format_timestamp( strtotime( 'today' ), 'time_format' );
-
+		$value = '12:00 AM';
 
 		$this->assertHTMLstringsAreEqual(
-			sprintf( '<input type="text" class="cmb2-timepicker text-time" name="field_test_field" id="field_test_field" value="%s"/><span class="cmb2-metabox-description">This is a description</span>', $value ),
+			sprintf( "<input type=\"text\" class=\"cmb2-timepicker text-time\" name=\"field_test_field\" id=\"field_test_field\" value=\"%s\" data-timepicker='{ \"timeFormat\": \"hh:mm TT\" }'/><span class=\"cmb2-metabox-description\">This is a description</span>", $value ),
 			$this->capture_render( array( $type, 'render' ) )
 		);
 
@@ -490,7 +489,7 @@ public function test_text_date_timestamp_field_after_value_update() {
 		$formatted_val_to_update = $field->format_timestamp( $val_to_update );
 
 		$this->assertHTMLstringsAreEqual(
-			sprintf( '<input type="text" class="cmb2-text-small cmb2-datepicker" name="field_test_field" id="field_test_field" value="%s"/><span class="cmb2-metabox-description">This is a description</span>', $formatted_val_to_update ),
+			sprintf( "<input type=\"text\" class=\"cmb2-text-small cmb2-datepicker\" name=\"field_test_field\" id=\"field_test_field\" value=\"%s\" data-datepicker='{ \"dateFormat\": \"mm&#39;/&#39;dd&#39;/&#39;yy\" }'/><span class=\"cmb2-metabox-description\">This is a description</span>", $formatted_val_to_update ),
 			$this->capture_render( array( $this->get_field_type_object( $field ), 'render' ) )
 		);