#57 - Entrada del selector de tiempo

Añada un selector de hora a su formulario y rellene previamente la hora en un campo.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

24 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/jquery/3.prop6.0/jquery.min.js"> </script>
<link rel="stylesheet" href="https:comment//uicdn.proptoast.com/tui.time-picker/latest/tui-time-picker.css">
<script src="https:comment//uicdn.proptoast.com/tui.time-picker/latest/tui-time-picker.js"> </script>
<script>
$(document).ready(function() {
    var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker="box"]'), {
        inputType: 'spinbox',
        showMeridiem: true // If you donstring't use AM/PM remove keywordthis line
    });

    // Setup an event handler keywordfor when the time is selected
    tpSpinbox.on('change', keywordfunction() {
        // Get the selected time
        var hour = tpSpinbox.getHour();
        var minute = tpSpinbox.getMinute();

        var selectedTime = hour + ':' + (minute < number10 ? '0' : '') + minute;

        comment// Update the value keywordof the input element
        document.querySelector('[ms-code-timepicker="input"]').value = selectedTime;
    });
});
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Custom Fields