Cargando Componente...

Cargando

Más componentes

Ver todos
Parte de

Time Picker Input

¡Uy! Algo ha ido mal al enviar el formulario.
Time Picker Input
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd51","type":"FormWrapper","tag":"div","classes":["0fbcf45c-7677-f534-1aad-8c45fff39db0"],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd52","819433e6-a60c-2f2e-6f46-d5da7283cd5a","819433e6-a60c-2f2e-6f46-d5da7283cd5d"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd52","type":"FormForm","tag":"form","classes":[],"children":["80b3d91b-ee6e-96e8-a967-fe30e6a399b9","ff272aea-de04-2dc8-bd29-b87279bb8fb8","05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","66330653-0378-2d18-6835-41700498b432"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"80b3d91b-ee6e-96e8-a967-fe30e6a399b9","type":"HtmlEmbed","tag":"div","classes":["e9353c16-21c6-b397-3378-38aaf19a79a5"],"children":[],"v":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ff272aea-de04-2dc8-bd29-b87279bb8fb8","type":"Block","tag":"div","classes":["cef3b020-df80-8531-757d-f2b5b778849f"],"children":[],"data":{"tag":"div","text":false,"xattr":[{"name":"ms-code-timepicker","value":"box"}],"displayName":"","attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","type":"FormTextInput","tag":"input","classes":["d629aa4a-9fb2-e20c-7e19-66fc84b2e381"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"field","data-name":"Field","placeholder":"Hide me!","type":"text","id":"field","disabled":false,"required":true},"form":{"type":"input","name":"Field","passwordPage":false},"xattr":[{"name":"ms-code-timepicker","value":"input"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","type":"FormButton","tag":"input","classes":["a742226d-4a34-dc33-5eb7-eac1d459c57c"],"children":[],"data":{"attr":{"type":"submit","value":"Log your time","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"66330653-0378-2d18-6835-41700498b432","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5a","type":"FormSuccessMessage","tag":"div","classes":["d6917f67-a231-c336-30a9-ea857ba2a3af"],"children":["8760f991-79d9-c056-288e-3da38799f578"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8760f991-79d9-c056-288e-3da38799f578","type":"Block","tag":"div","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304c"],"children":["8760f991-79d9-c056-288e-3da38799f579","8760f991-79d9-c056-288e-3da38799f57d","8760f991-79d9-c056-288e-3da38799f581"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8760f991-79d9-c056-288e-3da38799f579","type":"Heading","tag":"h1","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304d"],"children":["8760f991-79d9-c056-288e-3da38799f57c"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"8760f991-79d9-c056-288e-3da38799f57c","text":true,"v":"Building a web app?"},{"_id":"8760f991-79d9-c056-288e-3da38799f57d","type":"Paragraph","tag":"p","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304e"],"children":["8760f991-79d9-c056-288e-3da38799f57e","8760f991-79d9-c056-288e-3da38799f57f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f57e","text":true,"v":"Awesome! You can use this time as a custom Memberstack profile field."},{"_id":"8760f991-79d9-c056-288e-3da38799f57f","type":"Strong","tag":"strong","classes":[],"children":["8760f991-79d9-c056-288e-3da38799f580"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f580","text":true,"v":""},{"_id":"8760f991-79d9-c056-288e-3da38799f581","type":"Link","tag":"a","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304f"],"children":["8760f991-79d9-c056-288e-3da38799f582"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"memberstack.com","target":"_blank"}}},{"_id":"8760f991-79d9-c056-288e-3da38799f582","text":true,"v":"Go to memberstack.com"},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5d","type":"FormErrorMessage","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5e"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5e","type":"Block","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5f","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304e","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 0.90); font-size: 16px; line-height: 1.7; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d629aa4a-9fb2-e20c-7e19-66fc84b2e381","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-top: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 88.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 88.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 88.67%, 1.00); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"a742226d-4a34-dc33-5eb7-eac1d459c57c","fake":false,"type":"class","name":"form-submit","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 11px; padding-bottom: 12px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); font-weight: 700;","variants":{"small":{"styleLess":"width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(231, 82.57%, 57.25%, 1.00); text-align: center;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"cef3b020-df80-8531-757d-f2b5b778849f","fake":false,"type":"class","name":"timepicker","namespace":"","comb":"","styleLess":"","variants":{"small":{"styleLess":"margin-bottom: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304d","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 30px; font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304f","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 5.10%, 1.00); font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304c","fake":false,"type":"class","name":"disclaimer-inner","namespace":"","comb":"","styleLess":"display: flex; width: 100%; margin-right: auto; margin-left: auto; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); text-align: left;","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d6917f67-a231-c336-30a9-ea857ba2a3af","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: hsla(0, 0.00%, 86.67%, 0.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0fbcf45c-7677-f534-1aad-8c45fff39db0","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"max-width: 500px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9353c16-21c6-b397-3378-38aaf19a79a5","fake":false,"type":"class","name":"Custom CSS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clonar en Webflow
Componente de copia
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd51","type":"FormWrapper","tag":"div","classes":["0fbcf45c-7677-f534-1aad-8c45fff39db0"],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd52","819433e6-a60c-2f2e-6f46-d5da7283cd5a","819433e6-a60c-2f2e-6f46-d5da7283cd5d"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd52","type":"FormForm","tag":"form","classes":[],"children":["80b3d91b-ee6e-96e8-a967-fe30e6a399b9","ff272aea-de04-2dc8-bd29-b87279bb8fb8","05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","66330653-0378-2d18-6835-41700498b432"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"80b3d91b-ee6e-96e8-a967-fe30e6a399b9","type":"HtmlEmbed","tag":"div","classes":["e9353c16-21c6-b397-3378-38aaf19a79a5"],"children":[],"v":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ff272aea-de04-2dc8-bd29-b87279bb8fb8","type":"Block","tag":"div","classes":["cef3b020-df80-8531-757d-f2b5b778849f"],"children":[],"data":{"tag":"div","text":false,"xattr":[{"name":"ms-code-timepicker","value":"box"}],"displayName":"","attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","type":"FormTextInput","tag":"input","classes":["d629aa4a-9fb2-e20c-7e19-66fc84b2e381"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"field","data-name":"Field","placeholder":"Hide me!","type":"text","id":"field","disabled":false,"required":true},"form":{"type":"input","name":"Field","passwordPage":false},"xattr":[{"name":"ms-code-timepicker","value":"input"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","type":"FormButton","tag":"input","classes":["a742226d-4a34-dc33-5eb7-eac1d459c57c"],"children":[],"data":{"attr":{"type":"submit","value":"Log your time","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"66330653-0378-2d18-6835-41700498b432","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5a","type":"FormSuccessMessage","tag":"div","classes":["d6917f67-a231-c336-30a9-ea857ba2a3af"],"children":["8760f991-79d9-c056-288e-3da38799f578"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8760f991-79d9-c056-288e-3da38799f578","type":"Block","tag":"div","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304c"],"children":["8760f991-79d9-c056-288e-3da38799f579","8760f991-79d9-c056-288e-3da38799f57d","8760f991-79d9-c056-288e-3da38799f581"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8760f991-79d9-c056-288e-3da38799f579","type":"Heading","tag":"h1","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304d"],"children":["8760f991-79d9-c056-288e-3da38799f57c"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"8760f991-79d9-c056-288e-3da38799f57c","text":true,"v":"Building a web app?"},{"_id":"8760f991-79d9-c056-288e-3da38799f57d","type":"Paragraph","tag":"p","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304e"],"children":["8760f991-79d9-c056-288e-3da38799f57e","8760f991-79d9-c056-288e-3da38799f57f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f57e","text":true,"v":"Awesome! You can use this time as a custom Memberstack profile field."},{"_id":"8760f991-79d9-c056-288e-3da38799f57f","type":"Strong","tag":"strong","classes":[],"children":["8760f991-79d9-c056-288e-3da38799f580"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f580","text":true,"v":""},{"_id":"8760f991-79d9-c056-288e-3da38799f581","type":"Link","tag":"a","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304f"],"children":["8760f991-79d9-c056-288e-3da38799f582"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"memberstack.com","target":"_blank"}}},{"_id":"8760f991-79d9-c056-288e-3da38799f582","text":true,"v":"Go to memberstack.com"},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5d","type":"FormErrorMessage","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5e"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5e","type":"Block","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5f","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304e","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 0.90); font-size: 16px; line-height: 1.7; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d629aa4a-9fb2-e20c-7e19-66fc84b2e381","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-top: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 88.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 88.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 88.67%, 1.00); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"a742226d-4a34-dc33-5eb7-eac1d459c57c","fake":false,"type":"class","name":"form-submit","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 11px; padding-bottom: 12px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); font-weight: 700;","variants":{"small":{"styleLess":"width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(231, 82.57%, 57.25%, 1.00); text-align: center;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"cef3b020-df80-8531-757d-f2b5b778849f","fake":false,"type":"class","name":"timepicker","namespace":"","comb":"","styleLess":"","variants":{"small":{"styleLess":"margin-bottom: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304d","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 30px; font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304f","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 5.10%, 1.00); font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304c","fake":false,"type":"class","name":"disclaimer-inner","namespace":"","comb":"","styleLess":"display: flex; width: 100%; margin-right: auto; margin-left: auto; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); text-align: left;","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d6917f67-a231-c336-30a9-ea857ba2a3af","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: hsla(0, 0.00%, 86.67%, 0.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0fbcf45c-7677-f534-1aad-8c45fff39db0","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"max-width: 500px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9353c16-21c6-b397-3378-38aaf19a79a5","fake":false,"type":"class","name":"Custom CSS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Navegador no compatible. Utilice
CC Chrome o SS Safari.

Acerca de este componente

Generado por IA

Descripción del componente (generada por AI)

The Time Picker Input is a user-friendly component designed for web forms, allowing users to easily select and input time values. It integrates seamlessly with forms and enhances user experience with a visually appealing interface.

Características principales:

  • Customizable time selection with spinbox input type
  • Diseño adaptable a varios dispositivos
  • Includes success and error messages for form submissions
  • Easy integration with Memberstack for profile fields
  • Includes external libraries for enhanced functionality

Elementos de diseño:

  • Clean and modern design with rounded corners
  • Color scheme featuring shades of blue and white
  • CSS styles for input fields and buttons to ensure consistency
  • Responsive layout that adapts to different screen sizes

Posibles casos de uso:

  • Web applications requiring time tracking features
  • Event scheduling platforms
  • Online booking systems
  • Custom forms for user profiles in membership sites
  • Time management tools for businesses

Conclusion: The Time Picker Input is a versatile and visually appealing component that can significantly enhance user interaction in web forms, making it an excellent choice for developers looking to implement time selection features.

Empezar a construir

Empieza a construir tus sueños

Memberstack es 100% gratis hasta que estés listo para lanzarla - así que, ¿a qué estás esperando? Crea tu primera aplicación y empieza a construir hoy mismo.