Component laden...

Laden

Meer onderdelen

Bekijk alles
Deel van

Time Picker Input

Oeps! Er ging iets mis bij het verzenden van het formulier.
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}}
Klonen in Webflow
Kopieer component
{"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 niet ondersteund. Gebruik
CC Chrome of SS Safari.

Over dit onderdeel

AI-gegenereerd

Beschrijving van onderdeel (gegenereerd door 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.

Belangrijkste kenmerken:

  • Customizable time selection with spinbox input type
  • Responsive design suitable for various devices
  • Includes success and error messages for form submissions
  • Easy integration with Memberstack for profile fields
  • Includes external libraries for enhanced functionality

Ontwerpelementen:

  • 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

Potentiële gebruikssituaties:

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

Bouwen

Begin met het bouwen van je dromen

Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.