Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contact Form: Convert HTML5 date input to text input + jQuery Datepicker #7890

Merged
merged 6 commits into from
Sep 29, 2017
Merged

Contact Form: Convert HTML5 date input to text input + jQuery Datepicker #7890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
342343a
convert HTML5 date into to text field + jQuery datepicker
rclations Sep 28, 2017
8d4b65a
fixing jquery datepicker year format
rclations Sep 28, 2017
8953c51
removing date input field styles
rclations Sep 28, 2017
862aff4
updating contact form editor view to not use HTML5 date input
rclations Sep 28, 2017
fb4dfc9
Contact Form: Update date input class name to be more specific
rclations Sep 28, 2017
d33533d
Added Core's native method of localizing jQuery datepicker.
zinigor Sep 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions modules/contact-form/css/grunion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand Down
143 changes: 72 additions & 71 deletions modules/contact-form/css/jquery-ui-datepicker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
7 changes: 5 additions & 2 deletions modules/contact-form/grunion-contact-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) ) . "' ";

Expand Down Expand Up @@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zinigor This causes the date to look like this when chosen:

screen shot 2017-09-29 at 10 25 25 am

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you tell me what date format you have set in your WordPress settings? This is what it uses if you don't set anything else.

Copy link
Member

@dereksmart dereksmart Sep 29, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zinigor it's a custom date format for some reason. I don't remember setting it

wp> get_option( 'date_format' );
string(15) "j \d\e F \d\e Y"

break;
default : // text field
// note that any unknown types will produce a text input, so we can use arbitrary type names to handle
Expand Down
2 changes: 1 addition & 1 deletion modules/contact-form/grunion-editor-view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
5 changes: 1 addition & 4 deletions modules/contact-form/js/grunion-frontend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
} );