Komponente laden...

Laden

Weitere Komponenten

Alle anzeigen
Teil von

Time Picker Eingabe

Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
Time Picker Eingabe
{"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}}
Klonen in Webflow
Komponente kopieren
{"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}}
Browser nicht unterstützt. Verwenden Sie
CC Chrome oder SS Safari.

Über diese Komponente

AI-generiert

Komponentenbeschreibung (von AI generiert)

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.

Wesentliche Merkmale:

  • Customizable time selection with spinbox input type
  • Responsive Design für verschiedene Geräte geeignet
  • Includes success and error messages for form submissions
  • Easy integration with Memberstack for profile fields
  • Includes external libraries for enhanced functionality

Gestaltungselemente:

  • 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

Potenzielle Anwendungsfälle:

  • 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.

Mit dem Bau beginnen

Bauen Sie Ihre Träume

Memberstack ist 100% kostenlos, bis Sie bereit sind, zu starten - worauf warten Sie also noch? Erstellen Sie Ihre erste App und beginnen Sie noch heute mit der Entwicklung.