Contact Form: Convert HTML5 date input to text input + jQuery Datepicker #7890
Conversation
jQuery uses yy for 4 digit year - see http://api.jqueryui.com/datepicker/\#utility-formatDate
dereksmart
added
[Feature] Contact Form
[Status] Needs Review
| if ( 'function' === typeof $.fn.datepicker && 'text' === datefield[0].type ) { | ||
| datefield.datepicker( { dateFormat : 'yyyy-mm-dd' } ); | ||
| } | ||
| $( '.contact-form input.date' ).datepicker( { dateFormat : 'yy-mm-dd' } ); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
Check input type on output and update classname there (vs. in shortcode)
|
Thanks for fixing it! Sticking with datepicker for now seems like the best idea. I have added one commit that will use the current site's locale to properly translate and choose the correct date format. |
| $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(); |
There was a problem hiding this comment.
@zinigor This causes the date to look like this when chosen:
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@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"
This changes correctly as I set the option, so it looks like it's working properly
dereksmart
added
[Status] Ready to Merge
dereksmart
removed
the
[Status] Ready to Merge
…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.
|
merged to 5.4 c3a1807 |
There's some issues popping up in review (#7885, #7887, #7888, #7889) that appear to step from spotty cross-browser support for the HTML5 date input field.
Some information about this can be found here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Handling_browser_support
jQuery datepicker is already being used for fallback support in legacy browsers (added in #7819). This PR converts the default display from HTML5 date input to use a text input + jQuery datepicker always.
Changes proposed in this Pull Request:
dateclass.date(instead of only as a fallback for browsers that don't support the date input type).yyto denote a 4-digit year)Testing instructions:
Notes: