5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8b0,

A polished, fully customizable date-range picker for Framer — perfect for bookings, reservations, rentals, event registrations, or any project needing a "check-in / check-out" style date selector.

Key features:

Clean popover calendar with smooth open/close animation
Select a start and end date with visual range highlighting
Show 1, 2, or 3 months at once, or auto-adjust based on space
Built-in month & year dropdowns for jumping to far-off dates in one click
Block off unavailable dates (already-booked days) — visible with a strikethrough but not selectable
Set minimum and maximum selectable dates
Choose whether a range can skip over unavailable dates or must snap back automatically
Built-in validation with a custom error message, plus optional helper text
Choose the submitted date format (ISO, US, EU, or long-form)
Supports different locales and calendar labeling systems (Gregorian, Buddhist, Japanese, etc.)
Use it standalone, or wire it to Framer Variables for full control
Every color, font, radius, and spacing detail is stylable — no code required
Fully responsive and touch-friendly

Works seamlessly with Framer's native Forms — no custom code needed. Drop it in, name your fields, and it submits alongside the rest of your form data automatically.

Whether you're building a hotel booking site, car rental page, event signup, or appointment scheduler, this component gives you a beautiful, production-ready date-range field in seconds.

So here's all you do:

Drag the component inside your Framer Form, just like any other field.
Name the fields — in the settings panel, set "Start Field Name" and "End Field Name" (e.g. check_in and check_out).
Done. When someone picks their dates and hits Submit, both dates travel with the rest of the form data.

5a:[["$","$L5d",null,{"post":{"id":"01a0aea1-98ae-712a-91f5-2ca1b755d259","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"a1cU5edljUc10ET9cFHq","resolved":true,"title":"Range Calendar Pro","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A polished, fully customizable date-range picker for Framer — perfect for bookings, reservations, rentals, event registrations, or any project needing a \"check-in / check-out\" style date selector."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean popover calendar with smooth open/close animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select a start and end date with visual range highlighting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Show 1, 2, or 3 months at once, or auto-adjust based on space"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in month & year dropdowns for jumping to far-off dates in one click"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Block off unavailable dates (already-booked days) — visible with a strikethrough but not selectable"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set minimum and maximum selectable dates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose whether a range can skip over unavailable dates or must snap back automatically"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in validation with a custom error message, plus optional helper text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose the submitted date format (ISO, US, EU, or long-form)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports different locales and calendar labeling systems (Gregorian, Buddhist, Japanese, etc.)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use it standalone, or wire it to Framer Variables for full control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Every color, font, radius, and spacing detail is stylable — no code required"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive and touch-friendly"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Works seamlessly with Framer's native Forms","marks":[{"type":"bold"}]},{"type":"text","text":" — no custom code needed. Drop it in, name your fields, and it submits alongside the rest of your form data automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"Whether you're building a hotel booking site, car rental page, event signup, or appointment scheduler, this component gives you a beautiful, production-ready date-range field in seconds."}]},{"type":"customHeading","content":[{"type":"text","text":"So here's all you do:"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the component inside your Framer Form","marks":[{"type":"bold"}]},{"type":"text","text":", just like any other field."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Name the fields","marks":[{"type":"bold"}]},{"type":"text","text":" — in the settings panel, set \"Start Field Name\" and \"End Field Name\" (e.g. "},{"type":"text","text":"check_in","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"check_out","marks":[{"type":"code"}]},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Done.","marks":[{"type":"bold"}]},{"type":"text","text":" When someone picks their dates and hits Submit, both dates travel with the rest of the form data."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Sleek date-range picker for forms","slug":"range-calendar-pro","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ae9e-fb82-7500-bffe-a6da1d658483.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-09-17T09:10:19.160Z","updatedAt":"2026-09-17T09:10:19.160Z","publishedAt":"2026-09-17T09:10:19.144Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rangecalendarpro.framer.website/","price":"15","paymentUrl":"https://contra.com/payment-link/GeExBIeT-range-calendar-pro","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"2agZ874BZIKdF0NrpMUY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-17T09:10:21.102Z","updatedAt":"2026-09-17T09:10:21.102Z","reported":false}}],"$L5f"]

Suggested for you