Loading Component...

Loading

Loading Component

More Components

Part of

Date Range Input

Webflow Input Component

Thank you! I'll update
this project ASAP.

Oops! Something went wrong while submitting the form.

How to enable Google authentication

How to enable Facebook authentication

How to enable Spotify authentication

How to enable Dribbble authentication

How to enable Github authentication

How to enable LinkedIn authentication

How to enable passwordless logins

How to configure password validation

How to show/hide password

How to work with profile images

How to add a forgot password flow

How to work with checkboxes

How to configure pricing tables

About the Stripe Customer Portal

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd41","type":"FormWrapper","tag":"div","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d0"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd42","b33d1962-96ff-a2b9-081d-9fc1a01fdd4e","b33d1962-96ff-a2b9-081d-9fc1a01fdd5a"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd42","type":"FormForm","tag":"form","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d5"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd43","b33d1962-96ff-a2b9-081d-9fc1a01fdd4d","9521b842-2c58-eaaf-3554-795d48219fe5"],"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":"b33d1962-96ff-a2b9-081d-9fc1a01fdd43","type":"FormTextInput","tag":"input","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d2"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Dates","data-name":"Dates","placeholder":"Date Range","type":"text","id":"Dates","disabled":false,"required":true},"xattr":[{"name":"ms-code-input","value":"date-range"}],"form":{"name":"Dates","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd4d","type":"FormButton","tag":"input","classes":["0a82eb22-ea77-222f-23fb-e4542bd379ce"],"children":[],"data":{"attr":{"type":"submit","value":"Find Tickets","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"9521b842-2c58-eaaf-3554-795d48219fe5","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/jquery/latest/jquery.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/momentjs/latest/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />\n<style>\n .daterangepicker td.active {\n background-color: #006cfa !important ;\n }\n</style>\n<script type=\"text/javascript\">\n$(function() {\n\n $('input[ms-code-input=\"date-range\"]').daterangepicker({\n \"opens\": \"center\",\n \"locale\": {\n \"format\": \"MM/DD/YYYY\",\n \"separator\": \" - \",\n \"applyLabel\": \"Apply\",\n \"cancelLabel\": \"Cancel\",\n \"fromLabel\": \"From\",\n \"toLabel\": \"To\",\n \"customRangeLabel\": \"Custom\",\n \"weekLabel\": \"W\",\n \"daysOfWeek\": [\n \"Su\",\n \"Mo\",\n \"Tu\",\n \"We\",\n \"Th\",\n \"Fr\",\n \"Sa\"\n ],\n \"monthNames\": [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n ],\n },\n });\n\n $('input[name=\"datefilter\"]').on('apply.daterangepicker', function(ev, picker) {\n $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));\n });\n\n $('input[name=\"datefilter\"]').on('cancel.daterangepicker', function(ev, picker) {\n $(this).val('');\n });\n\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/jquery/latest/jquery.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/momentjs/latest/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />\n<style>\n .daterangepicker td.active {\n background-color: #006cfa !important ;\n }\n</style>\n<script type=\"text/javascript\">\n$(function() {\n\n $('input[ms-code-input=\"date-range\"]').daterangepicker({\n \"opens\": \"center\",\n \"locale\": {\n \"format\": \"MM/DD/YYYY\",\n \"separator\": \" - \",\n \"applyLabel\": \"Apply\",\n \"cancelLabel\": \"Cancel\",\n \"fromLabel\": \"From\",\n \"toLabel\": \"To\",\n \"customRangeLabel\": \"Custom\",\n \"weekLabel\": \"W\",\n \"daysOfWeek\": [\n \"Su\",\n \"Mo\",\n \"Tu\",\n \"We\",\n \"Th\",\n \"Fr\",\n \"Sa\"\n ],\n \"monthNames\": [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n ],\n },\n });\n\n $('input[name=\"datefilter\"]').on('apply.daterangepicker', function(ev, picker) {\n $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));\n });\n\n $('input[name=\"datefilter\"]').on('cancel.daterangepicker', function(ev, picker) {\n $(this).val('');\n });\n\n});\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd4e","type":"FormSuccessMessage","tag":"div","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d7"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd4f"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd4f","type":"Block","tag":"div","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d9"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd50","b33d1962-96ff-a2b9-081d-9fc1a01fdd54","b33d1962-96ff-a2b9-081d-9fc1a01fdd58"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd50","type":"Heading","tag":"h1","classes":["0a82eb22-ea77-222f-23fb-e4542bd379cf"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd51","b33d1962-96ff-a2b9-081d-9fc1a01fdd53"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd51","type":"Strong","tag":"strong","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd52"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd52","text":true,"v":"Save these inputs"},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd53","text":true,"v":" to member profiles."},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd54","type":"Paragraph","tag":"p","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d3"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd55","b33d1962-96ff-a2b9-081d-9fc1a01fdd56"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd55","text":true,"v":"With Memberstack, you can allow your members to save this data to their profile and reuse it at any time as a saved filter, or anything else."},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd56","type":"Strong","tag":"strong","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd57"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd57","text":true,"v":""},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd58","type":"Link","tag":"a","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d6"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd59"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"https://app.memberstack.com/signup"}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd59","text":true,"v":"Try Memberstack"},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd5a","type":"FormErrorMessage","tag":"div","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd5b"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd5b","type":"Block","tag":"div","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd5c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd5c","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d2","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-bottom: 0px; padding-left: 40px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(0, 0.00%, 100.00%, 1.00); background-image: @img_64b529e04167af0fd708bdb3; background-position: 10px 50%; background-size: 20px; background-repeat: no-repeat;","variants":{"main_focus":{"styleLess":"border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-color: hsla(0, 0.00%, 0.00%, 1.00);"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 0.00%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d9","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: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00);","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d6","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; 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":"0a82eb22-ea77-222f-23fb-e4542bd379ce","fake":false,"type":"class","name":"btn","namespace":"","comb":"","styleLess":"margin-top: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(214.08, 100.00%, 49.02%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d0","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"width: 100%; max-width: 350px; margin-bottom: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.1); border-right-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-left-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 5px 17px 0 rgba(0, 0, 0, 0.1);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d5","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-column-gap: 10px; grid-row-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d3","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":"0a82eb22-ea77-222f-23fb-e4542bd379d7","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: transparent; text-align: left;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379cf","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 400;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/64b52828a6cd5b44c2385e9e/64b529e04167af0fd708bdb3_plane-23.png","siteId":"64b52828a6cd5b44c2385e9e","width":512,"isHD":false,"height":512,"fileName":"64b529e04167af0fd708bdb3_plane-23.png","createdOn":"2023-07-17T11:45:36.537Z","origFileName":"plane-23.png","fileHash":"a4954bf7d88b13a50277538a7e690a00","variants":[{"origFileName":"plane-23-p-500.png","fileName":"64b529e04167af0fd708bdb3_plane-23-p-500.png","size":11773,"format":"png","width":500,"quality":100,"error":"FILESIZE_EXCEEDS_CAP","_id":"64b529e19df1d604617c9916"}],"mimeType":"image/png","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/64b52828a6cd5b44c2385e9e/64b529e04167af0fd708bdb3_plane-23.png","thumbUrl":"https://cdn.prod.website-files.com/64b52828a6cd5b44c2385e9e/64b529e04167af0fd708bdb3_plane-23-p-130x130q80.png","_id":"64b529e04167af0fd708bdb3","updatedOn":"2023-07-17T11:58:43.747Z","fileSize":10608}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Clone in Webflow

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd41","type":"FormWrapper","tag":"div","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d0"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd42","b33d1962-96ff-a2b9-081d-9fc1a01fdd4e","b33d1962-96ff-a2b9-081d-9fc1a01fdd5a"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd42","type":"FormForm","tag":"form","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d5"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd43","b33d1962-96ff-a2b9-081d-9fc1a01fdd4d","9521b842-2c58-eaaf-3554-795d48219fe5"],"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":"b33d1962-96ff-a2b9-081d-9fc1a01fdd43","type":"FormTextInput","tag":"input","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d2"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Dates","data-name":"Dates","placeholder":"Date Range","type":"text","id":"Dates","disabled":false,"required":true},"xattr":[{"name":"ms-code-input","value":"date-range"}],"form":{"name":"Dates","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd4d","type":"FormButton","tag":"input","classes":["0a82eb22-ea77-222f-23fb-e4542bd379ce"],"children":[],"data":{"attr":{"type":"submit","value":"Find Tickets","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"9521b842-2c58-eaaf-3554-795d48219fe5","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/jquery/latest/jquery.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/momentjs/latest/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />\n<style>\n .daterangepicker td.active {\n background-color: #006cfa !important ;\n }\n</style>\n<script type=\"text/javascript\">\n$(function() {\n\n $('input[ms-code-input=\"date-range\"]').daterangepicker({\n \"opens\": \"center\",\n \"locale\": {\n \"format\": \"MM/DD/YYYY\",\n \"separator\": \" - \",\n \"applyLabel\": \"Apply\",\n \"cancelLabel\": \"Cancel\",\n \"fromLabel\": \"From\",\n \"toLabel\": \"To\",\n \"customRangeLabel\": \"Custom\",\n \"weekLabel\": \"W\",\n \"daysOfWeek\": [\n \"Su\",\n \"Mo\",\n \"Tu\",\n \"We\",\n \"Th\",\n \"Fr\",\n \"Sa\"\n ],\n \"monthNames\": [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n ],\n },\n });\n\n $('input[name=\"datefilter\"]').on('apply.daterangepicker', function(ev, picker) {\n $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));\n });\n\n $('input[name=\"datefilter\"]').on('cancel.daterangepicker', function(ev, picker) {\n $(this).val('');\n });\n\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/jquery/latest/jquery.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/momentjs/latest/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />\n<style>\n .daterangepicker td.active {\n background-color: #006cfa !important ;\n }\n</style>\n<script type=\"text/javascript\">\n$(function() {\n\n $('input[ms-code-input=\"date-range\"]').daterangepicker({\n \"opens\": \"center\",\n \"locale\": {\n \"format\": \"MM/DD/YYYY\",\n \"separator\": \" - \",\n \"applyLabel\": \"Apply\",\n \"cancelLabel\": \"Cancel\",\n \"fromLabel\": \"From\",\n \"toLabel\": \"To\",\n \"customRangeLabel\": \"Custom\",\n \"weekLabel\": \"W\",\n \"daysOfWeek\": [\n \"Su\",\n \"Mo\",\n \"Tu\",\n \"We\",\n \"Th\",\n \"Fr\",\n \"Sa\"\n ],\n \"monthNames\": [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n ],\n },\n });\n\n $('input[name=\"datefilter\"]').on('apply.daterangepicker', function(ev, picker) {\n $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));\n });\n\n $('input[name=\"datefilter\"]').on('cancel.daterangepicker', function(ev, picker) {\n $(this).val('');\n });\n\n});\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd4e","type":"FormSuccessMessage","tag":"div","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d7"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd4f"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd4f","type":"Block","tag":"div","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d9"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd50","b33d1962-96ff-a2b9-081d-9fc1a01fdd54","b33d1962-96ff-a2b9-081d-9fc1a01fdd58"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd50","type":"Heading","tag":"h1","classes":["0a82eb22-ea77-222f-23fb-e4542bd379cf"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd51","b33d1962-96ff-a2b9-081d-9fc1a01fdd53"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd51","type":"Strong","tag":"strong","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd52"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd52","text":true,"v":"Save these inputs"},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd53","text":true,"v":" to member profiles."},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd54","type":"Paragraph","tag":"p","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d3"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd55","b33d1962-96ff-a2b9-081d-9fc1a01fdd56"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd55","text":true,"v":"With Memberstack, you can allow your members to save this data to their profile and reuse it at any time as a saved filter, or anything else."},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd56","type":"Strong","tag":"strong","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd57"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd57","text":true,"v":""},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd58","type":"Link","tag":"a","classes":["0a82eb22-ea77-222f-23fb-e4542bd379d6"],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd59"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"https://app.memberstack.com/signup"}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd59","text":true,"v":"Try Memberstack"},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd5a","type":"FormErrorMessage","tag":"div","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd5b"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd5b","type":"Block","tag":"div","classes":[],"children":["b33d1962-96ff-a2b9-081d-9fc1a01fdd5c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b33d1962-96ff-a2b9-081d-9fc1a01fdd5c","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d2","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-bottom: 0px; padding-left: 40px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(0, 0.00%, 100.00%, 1.00); background-image: @img_64b529e04167af0fd708bdb3; background-position: 10px 50%; background-size: 20px; background-repeat: no-repeat;","variants":{"main_focus":{"styleLess":"border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-color: hsla(0, 0.00%, 0.00%, 1.00);"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 0.00%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d9","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: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00);","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d6","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; 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":"0a82eb22-ea77-222f-23fb-e4542bd379ce","fake":false,"type":"class","name":"btn","namespace":"","comb":"","styleLess":"margin-top: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(214.08, 100.00%, 49.02%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d0","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"width: 100%; max-width: 350px; margin-bottom: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.1); border-right-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-left-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 5px 17px 0 rgba(0, 0, 0, 0.1);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d5","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-column-gap: 10px; grid-row-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379d3","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":"0a82eb22-ea77-222f-23fb-e4542bd379d7","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: transparent; text-align: left;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0a82eb22-ea77-222f-23fb-e4542bd379cf","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 400;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/64b52828a6cd5b44c2385e9e/64b529e04167af0fd708bdb3_plane-23.png","siteId":"64b52828a6cd5b44c2385e9e","width":512,"isHD":false,"height":512,"fileName":"64b529e04167af0fd708bdb3_plane-23.png","createdOn":"2023-07-17T11:45:36.537Z","origFileName":"plane-23.png","fileHash":"a4954bf7d88b13a50277538a7e690a00","variants":[{"origFileName":"plane-23-p-500.png","fileName":"64b529e04167af0fd708bdb3_plane-23-p-500.png","size":11773,"format":"png","width":500,"quality":100,"error":"FILESIZE_EXCEEDS_CAP","_id":"64b529e19df1d604617c9916"}],"mimeType":"image/png","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/64b52828a6cd5b44c2385e9e/64b529e04167af0fd708bdb3_plane-23.png","thumbUrl":"https://cdn.prod.website-files.com/64b52828a6cd5b44c2385e9e/64b529e04167af0fd708bdb3_plane-23-p-130x130q80.png","_id":"64b529e04167af0fd708bdb3","updatedOn":"2023-07-17T11:58:43.747Z","fileSize":10608}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

The Date Range Input component allows users to select a range of dates through an intuitive interface, making it ideal for applications that require date filtering or booking functionalities.

Key Features:

User-friendly date range picker
Customizable placeholder and button text
Supports integration with Memberstack for saving user inputs
Responsive design suitable for various devices
Includes error handling and success messages

Design Elements:

Clean and modern aesthetic
Flexible layout with a maximum width of 350px
Color scheme featuring blue accents and white backgrounds
Rounded corners and subtle shadows for depth

Potential Use Cases:

Travel booking websites for selecting travel dates
Event management platforms for filtering events by date
E-commerce sites for setting promotional periods
Real estate listings to filter properties by availability
Membership sites allowing users to save their preferences

Conclusion: The Date Range Input component is a versatile tool that enhances user experience by simplifying date selection, making it a valuable addition for various web applications.

Similar Components

Price Range Picker

Radio Pill Buttons

Membership Text Area

Something not working as expected?

We would really appreciate if you could let us know what the issue is! If you want us to get back to you about it, you can leave your email too.

Thank you! Your feedback is much appreciated 💙

Oops! Something went wrong while submitting the form.