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 2 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
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;
}
2 changes: 1 addition & 1 deletion modules/contact-form/grunion-contact-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2671,7 +2671,7 @@ 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' ) );
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.date' ).datepicker( { dateFormat : 'yy-mm-dd' } );
Copy link
Member

Choose a reason for hiding this comment

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

Should we find a way to scope this better? These are pretty generic classes and it's technically possible (yet unlikely) that there will be another form with the same classes on the same page in a sidebar/widget whatever.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated the class to jp-contact-form-date.
The input class is pulled from the shortcode, so I added a check in render() to override the default for date type fields.

This could be resolved more elegantly in the future via #5876

} );