Solution:1
First, in your functions.php of your theme or child theme, you have to enqueue jQuery UI.
If you wanted to, you could even limit it to the page that your form is on.
If you really want to get fancy, you can set the text field to be readonly which forces people to use the datepicker-ui. However, that requires additional coding.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
// Check if is page where contact form is, or leave out to enqueue everywhere
//if (is_page(123)) {
// WordPress already has this...
wp_enqueue_script( 'jquery-ui-datepicker' );
// Serve locally if you want by downloading.
wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
// You can pick whatever theme you want here
wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/theme.min.css' );
//}
}
Then in your contact form do this:
[text* your-field class:use-datepicker]
[submit]
<script>
jQuery(function($){
$(".use-datepicker").datepicker({
dateFormat: "yy-mm-dd"
// Set Whatever Options you want here
// See https://api.jqueryui.com/datepicker/
});
});
</script>