Contact Form: Convert HTML5 date input to text input + jQuery Datepic…

…ker (#7890) * convert HTML5 date into to text field + jQuery datepicker * fixing jquery datepicker year format jQuery uses yy for 4 digit year - see http://api.jqueryui.com/datepicker/\#utility-formatDate * removing date input field styles * updating contact form editor view to not use HTML5 date input * Contact Form: Update date input class name to be more specific Check input type on output and update classname there (vs. in shortcode) * Added Core's native method of localizing jQuery datepicker.
Automattic · Sep 29, 2017 · 8784541 · 8784541
1 parent 635bc6f
commit 8784541
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 81 deletions.
diff --git a/modules/contact-form/css/grunion.css b/modules/contact-form/css/grunion.css
@@ -3,8 +3,7 @@
 }
 
 .contact-form input[type='text'],
-.contact-form input[type='email'],
-.contact-form input[type='date'] {
+.contact-form input[type='email'] {
 	width: 300px;
 	max-width: 98%;
 	margin-bottom: 13px;
@@ -63,7 +62,6 @@
 
 .textwidget .contact-form input[type='text'],
 .textwidget .contact-form input[type='email'],
-.textwidget .contact-form input[type='date'],
 .textwidget .contact-form textarea {
 	width: 250px;
 	max-width: 100%;

diff --git a/modules/contact-form/css/jquery-ui-datepicker.css b/modules/contact-form/css/jquery-ui-datepicker.css
@@ -1,160 +1,161 @@
 .ui-datepicker {
-    padding: 0;
-    margin: 0;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    background-color: #fff;
-    border: 1px solid #dfdfdf;
-    border-top: none;
-    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
-    min-width: 17em;
-    width: auto;
+	padding: 0;
+	margin: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	border-radius: 0;
+	background-color: #fff;
+	border: 1px solid #dfdfdf;
+	border-top: none;
+	-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
+	min-width: 17em;
+	width: auto;
 }
 
 .ui-datepicker * {
-    padding: 0;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
+	padding: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	border-radius: 0;
 }
 
 .ui-datepicker table {
-    font-size: 13px;
-    margin: 0;
-    border: none;
-    border-collapse: collapse;
+	width: auto;
+	margin: 0;
+	border: none;
+	border-collapse: collapse;
 }
 
 .ui-datepicker .ui-widget-header,
 .ui-datepicker .ui-datepicker-header {
-    background-image: none;
-    border: none;
-    font-weight: normal;
+	background-image: none;
+	border: none;
+	font-weight: normal;
 }
 
 .ui-datepicker .ui-datepicker-header .ui-state-hover {
-    background: transparent;
-    border-color: transparent;
-    cursor: pointer;
+	background: transparent;
+	border-color: transparent;
+	cursor: pointer;
 }
 
 .ui-datepicker .ui-datepicker-title {
-    margin: 0;
-    padding: 10px 0;
-    font-size: 14px;
-    line-height: 14px;
-    text-align: center;
+	margin: 0;
+	padding: 10px 0;
+	font-size: 14px;
+	line-height: 14px;
+	text-align: center;
 }
 
 .ui-datepicker .ui-datepicker-prev,
 .ui-datepicker .ui-datepicker-next {
-    position: relative;
-    top: 0;
-    height: 34px;
-    width: 34px;
+	position: relative;
+	top: 0;
+	height: 34px;
+	width: 34px;
 }
 
 .ui-datepicker .ui-state-hover.ui-datepicker-prev,
 .ui-datepicker .ui-state-hover.ui-datepicker-next {
-    border: none;
+	border: none;
 }
 
 .ui-datepicker .ui-datepicker-prev,
 .ui-datepicker .ui-datepicker-prev-hover {
-    left: 0;
+	left: 0;
 }
 
 .ui-datepicker .ui-datepicker-next,
 .ui-datepicker .ui-datepicker-next-hover {
-    right: 0;
+	right: 0;
 }
 
 .ui-datepicker .ui-datepicker-next span,
 .ui-datepicker .ui-datepicker-prev span {
-    display: none;
+	display: none;
 }
 
 .ui-datepicker .ui-datepicker-prev {
-    float: left;
+	float: left;
 }
 
 .ui-datepicker .ui-datepicker-next {
-    float: right;
+	float: right;
 }
 
 .ui-datepicker .ui-datepicker-prev:before,
 .ui-datepicker .ui-datepicker-next:before {
-    font: normal 20px/34px 'dashicons';
-    padding-left: 7px;
-    speak: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    width: 34px;
-    height: 34px;
+	font: normal 20px/34px 'dashicons';
+	padding-left: 7px;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	width: 34px;
+	height: 34px;
 }
 
 .ui-datepicker .ui-datepicker-prev:before {
-    content: '\f341';
+	content: '\f341';
 }
 
 .ui-datepicker .ui-datepicker-next:before {
-    content: '\f345';
+	content: '\f345';
 }
 
 .ui-datepicker .ui-datepicker-prev-hover:before,
 .ui-datepicker .ui-datepicker-next-hover:before {
-    opacity: 0.7;
+	opacity: 0.7;
 }
 
 .ui-datepicker select.ui-datepicker-month,
 .ui-datepicker select.ui-datepicker-year {
-    width: 33%;
+	width: 33%;
 }
 
 .ui-datepicker thead {
-    font-weight: 600;
+	font-weight: 600;
 }
 
 .ui-datepicker th {
-    padding: 10px;
+	padding: 10px;
+	border-width: 1px;
 }
 
 .ui-datepicker td {
-    padding: 0;
-    border: 1px solid #f4f4f4;
+	padding: 0;
+	border: 1px solid #f4f4f4;
 }
 
 .ui-datepicker td.ui-datepicker-other-month {
-    border: transparent;
+	border: transparent;
 }
 
 .ui-datepicker td.ui-datepicker-week-end {
-    background-color: #f4f4f4;
-    border: 1px solid #f4f4f4;
+	background-color: #f4f4f4;
+	border: 1px solid #f4f4f4;
 }
 
 .ui-datepicker td.ui-datepicker-today {
-    background-color: #f0f0c0;
+	background-color: #f0f0c0;
 }
 
 .ui-datepicker td.ui-datepicker-current-day {
-    background: #bbdd88;
+	background: #bbdd88;
 }
 
 .ui-datepicker td .ui-state-default {
-    background: transparent;
-    border: none;
-    text-align: center;
-    text-decoration: none;
-    width: auto;
-    display: block;
-    padding: 5px 10px;
-    font-weight: normal;
-    color: #444;
+	background: transparent;
+	border: none;
+	text-align: center;
+	text-decoration: none;
+	width: auto;
+	display: block;
+	padding: 5px 10px;
+	font-weight: normal;
+	color: #444;
 }
 
 .ui-datepicker td.ui-state-disabled .ui-state-default {
-    opacity: 0.5;
+	opacity: 0.5;
 }
diff --git a/modules/contact-form/grunion-contact-form.php b/modules/contact-form/grunion-contact-form.php
@@ -2550,7 +2550,7 @@ function render() {
 		$field_label       = $this->get_attribute( 'label' );
 		$field_required    = $this->get_attribute( 'required' );
 		$placeholder       = $this->get_attribute( 'placeholder' );
-		$class             = $this->get_attribute( 'class' );
+		$class             = 'date' === $field_type ? 'jp-contact-form-date' : $this->get_attribute( 'class' );
 		$field_placeholder = ( ! empty( $placeholder ) ) ? "placeholder='" . esc_attr( $placeholder ) . "'" : '';
 		$field_class       = "class='" . trim( esc_attr( $field_type ) . ' ' . esc_attr( $class ) ) . "' ";
 
@@ -2671,11 +2671,14 @@ function render() {
 			case 'date' :
 				$r .= "\n<div>\n";
 				$r .= "\t\t<label for='" . esc_attr( $field_id ) . "' class='grunion-field-label " . esc_attr( $field_type ) . ( $this->is_error() ? ' form-error' : '' ) . "'>" . esc_html( $field_label ) . ( $field_required ? '<span>' . $required_field_text . '</span>' : '' ) . "</label>\n";
-				$r .= "\t\t<input type='date' name='" . esc_attr( $field_id ) . "' id='" . esc_attr( $field_id ) . "' value='" . esc_attr( $field_value ) . "' " . $field_class . ( $field_required ? "required aria-required='true'" : '' ) . "/>\n";
+				$r .= "\t\t<input type='text' name='" . esc_attr( $field_id ) . "' id='" . esc_attr( $field_id ) . "' value='" . esc_attr( $field_value ) . "' " . $field_class . ( $field_required ? "required aria-required='true'" : '' ) . "/>\n";
 				$r .= "\t</div>\n";
 
 				wp_enqueue_script( 'grunion-frontend', plugins_url( 'js/grunion-frontend.js', __FILE__ ), array( 'jquery', 'jquery-ui-datepicker' ) );
 				wp_enqueue_style( 'jp-jquery-ui-datepicker', plugins_url( 'css/jquery-ui-datepicker.css', __FILE__ ), array( 'dashicons' ), '1.0' );
+
+				// Using Core's built-in datepicker localization routine
+				wp_localize_jquery_ui_datepicker();
 			break;
 			default : // text field
 				// note that any unknown types will produce a text input, so we can use arbitrary type names to handle

diff --git a/modules/contact-form/grunion-editor-view.php b/modules/contact-form/grunion-editor-view.php
@@ -171,7 +171,7 @@ public static function editor_view_js_templates() {
 <script type="text/html" id="tmpl-grunion-field-date">
 	<div>
 		<label for='{{ data.id }}' class='grunion-field-label {{ data.type }}'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
-		<input type='date' name='{{ data.id }}' id='{{ data.id }}' value='{{ data.value }}' class="{{ data.class }}" />
+		<input type='text' name='{{ data.id }}' id='{{ data.id }}' value='{{ data.value }}' class="{{ data.class }}" />
 	</div>
 </script>
 

diff --git a/modules/contact-form/js/grunion-frontend.js b/modules/contact-form/js/grunion-frontend.js
@@ -1,6 +1,3 @@
 jQuery( function ( $ ) {
-	var datefield = $( '.contact-form input[type="date"]' );
-	if ( 'function' === typeof $.fn.datepicker && 'text' === datefield[0].type ) {
-		datefield.datepicker( { dateFormat : 'yyyy-mm-dd' } );
-	}
+	$( '.contact-form input.jp-contact-form-date' ).datepicker();
 } );