Time Picker

Try this:
1. Create regular input text with id: time picker
[text mytime id:timepicker]

2. Change input type above with onclick event.

<script>
jQuery(function ($) {
   $("#timepicker").click(function(){
        $(this).prop('type', 'time');

  });
  });
</script>

HTML5 already support time input type, I think CF7 will added this later.

Where do you place the script?

Hi Avelio,

How to show the time (prefilled) the current time. Also your script need to click twice. For your info, I am building a web using contact form 7.

Regards

Hi amhoffmaster

I place the script on the functions.php under theme folder. It works

Hello Uspjidin,
it won’t work properly in devices have you checked before?

Hi @shresthabros ,

Yes it works except you need to double click. This is how I add to functions.php

add_action( ‘wp_footer’, function() { ?>

<script>
jQuery(function ($) {

$(“#timepicker”).click(function(){
$(this).prop(‘type’, ‘time’);

});
});

</script>

<?php } );

Hi @usopjidin,

this works like a charm, thank you!
You can prevent the doubleclick if you simplify the jquery even more:

add_action( ‘wp_footer’, function() { ?>
<script>
jQuery(function ($) {
$(‘#timepicker’).prop(‘type’, ‘time’);
});
</script>
<?php } );

How could it work? i tried this code but there is no response?

[text mytime id:timepicker] (inside the form)

Used in function.php
add_action( ‘wp_footer’, function() { ?>
<script>
jQuery(function ($) {
$(‘#timepicker’).prop(‘type’, ‘time’);
});
</script>
<?php } );