Steph Wells

Use any of your Contact Form 7 Forms in your sidebars. You can even style it from the widget options. This will also work with any other shortcodes that only work in posts. Just insert the shortcode (ie [contact-form 1 “Contact form 1”]) in the ‘Contact Form 7 tag’ text field. Leave styling options blank in order to style from your theme’s css.
note: rounded corners do not work in Internet Explorer… Surprise! Get a different browser! 
another note: Use 6 digit hex colors for better results

Contact Form 7 Widget

Use your Contact Form 7 forms and other shortcodes in your sidebars.

Ruhul Amin

This plugin enables Contact Form 7 text field into a Date picker, Time picker or Date Time Picker by using CSS class. After installing the plugin you just need to add the necessary CSS class to the Contact Form 7 CSS Classes editor. If you use Multiple classes remember to separate each class with space.
Here is the classes to use in each field:
<ul>
<li>Only for Date Picker: walcf7-datepicker</li>
<li>Only for Time Picker: walcf7-timepicker</li>
<li>For both Date and Time Picker: walcf7-datetimepicker</li>
</ul>
Remember: The class should be added to [text field. Example: [text* book-date class:walcf7-datepicker placeholder “Date Picker”]
Check the demo site: <a href="https://wpapplab.com/contact-form-7-date-time-picker/" rel="nofollow ugc">Date Time Picker Demo</a>
<a href="https://wpapplab.com/plugins/date-time-picker-for-contact-form-7-pro/" rel="nofollow ugc">Download Pro Version</a>:
<ul>
<li>Lifetime Free Update</li>
<li>51 Language translation (<a href="https://wpapplab.com/plugins/date-time-picker-for-contact-form-7-pro/#language" rel="nofollow ugc">View supported Language</a>)</li>
<li>WPML – WordPress Multilingual Plugin Compatible</li>
<li>Light / Dark Theme</li>
<li>Disable past date selection</li>
<li>Disable today if necessary</li>
<li>Specify weekend and disable if necessary</li>
<li>Disable specific date selection</li>
<li>Specify holiday and Disable if necessary</li>
<li>Maximum allowed date selection</li>
<li>Minimum allowed date selection</li>
<li>24hr / 12hr time format</li>
<li>Hide/Show AM/PM</li>
<li>Change time step or interval</li>
<li>Provide Max and Min selectable time</li>
<li>Speed up website. Load script only at selected page</li>
</ul>
<a href="https://wpapplab.com/plugins/date-time-picker-for-contact-form-7-pro/" rel="nofollow ugc">Download Pro Version from Here</a>:
How to Video (Free):
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/782kHUkg4XM?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<a href="https://wpapplab.com/plugins/date-time-picker-for-contact-form-7-pro/" rel="nofollow ugc">Pro Version Features:</a>:
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/jQbbF7Usc44?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
Credits:
<ul>
<li><a href="https://jquery.com/" rel="nofollow ugc">jQuery</a></li>
<li><a href="https://xdsoft.net/jqplugins/datetimepicker/" rel="nofollow ugc">xdsoft.net</a></li>
</ul>

Date Time Picker for Contact Form 7

Very bad. Please check then update and fix the problem

Its not working when I wanted to select time and date from form

Great plugin for Date & Times

This plugin enables Contact Form 7 text field into a Date picker, Time picker or Date Time picker by using CSS class.

Contact Form 7 Widget vs Date Time Picker for Contact Form 7