Using Custom Datepicker NMR plugin with CF7 which nearly duplicate the CF7 date.php module and add a new $tag where we can use jquery-ui-datepicker.
Everything works as except but when the field is required, the validation do not validate the datepicker field on form submit.
Looks like this line have no effect :
**$atts['aria-invalid'] = $validation_error ? 'true' : 'false';**
Any help would be appreciated !
Thanks in advance
[PHP]
add_action('wpcf7_init', 'nmr_add_jqueryui_datepicker');
function nmr_add_jqueryui_datepicker()
{
wpcf7_add_form_tag(
array('datepicker', 'datepicker*'),
'nmr_datepicker_form_tag_handler',
array('name-attr' => true)
);
}
function nmr_datepicker_form_tag_handler($tag)
{
if (empty($tag->name)) {
return '';
}
$validation_error = wpcf7_get_validation_error($tag->name);
$class = wpcf7_form_controls_class($tag->type);
$class .= ' wpcf7-validates-as-date';
if ($validation_error) {
$class .= ' wpcf7-not-valid';
}
$atts = array();
$atts['class'] = $tag->get_class_option($class) . ' nmr-datepicker';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'signed_int', true);
$atts['min'] = $tag->get_date_option('min');
$atts['max'] = $tag->get_date_option('max');
$atts['step'] = $tag->get_option('step', 'int', true);
$atts['data-format'] = $tag->get_option('format', '', true);
if ($tag->has_option('readonly')) {
$atts['readonly'] = 'readonly';
}
if ($tag->is_required()) {
$atts['aria-required'] = 'true';
}
$atts['aria-invalid'] = $validation_error ? 'true' : 'false';
$value = (string) reset($tag->values);
if (
$tag->has_option('placeholder')
or $tag->has_option('watermark')
) {
$atts['placeholder'] = $value;
$value = '';
}
$value = $tag->get_default_option($value);
$value = wpcf7_get_hangover($tag->name, $value);
$atts['value'] = $value;
$atts['type'] = 'text';
$atts['name'] = $tag->name;
$atts = wpcf7_format_atts($atts);
$html = sprintf(
'<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s</span>',
sanitize_html_class($tag->name),
$atts,
$validation_error
);
return $html;
}
function nmr_datepicker_enqueue_script() {
$path = plugin_dir_url( __FILE__ );
wp_enqueue_style('jquery-ui-css', $path .'css/jquery-ui.css');
wp_enqueue_script( 'nmr_datepicker', $path . 'js/nmr-datepicker.js' , array('jquery', 'jquery-ui-datepicker'));
}
add_action('wp_enqueue_scripts', 'nmr_datepicker_enqueue_script');
[JS]
(function ($) {
$(document).ready(function () {
$(".nmr-datepicker").each(function (i, item) {
var settings = {};
if (item.dataset.format) {
settings.dateFormat = item.dataset.format;
}
if (item.id) {
$(`#${item.id}`).datepicker(settings);
}
});
});
})(jQuery);