5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Tae4,

Date & Time Picker for Framer

A Form-ready date and time picker for Framer. Let visitors choose a date, select a time with touch-friendly scroll controls, and submit the result through a native Framer form field.

Features

Date and optional time selection
Scrollable hour and minute pickers for mouse and mobile touch
Form-ready Field Name control with ISO date/time submission
Week can start on any day, Sunday through Saturday
12-hour or 24-hour time formats
Configurable minute intervals, date limits, and past-date blocking
Responsive popup positioning that stays within the available screen area
Keyboard support, click-outside closing, and Escape-to-close
Fully customizable typography, colors, borders, radii, spacing, and shadow

Setup

Add the component to your Framer project.
Place it inside a Framer Form.
Set Field Name to the submission key you need, such as appointment_datetime.
Leave Value empty to let visitors select their own date and time.
Set date/time format, restrictions, and visual styles from the property panel.

Notes

The selected value is submitted as an ISO date/time, for example 2026-08-11T14:30:00.000Z.
Use a valid ISO string in Value only when controlling the picker through a Framer variable or override.

Perfect For

Appointment and consultation bookings
Event registrations
Demo requests
Restaurant or service reservations
Delivery and pickup scheduling
Contact forms requiring preferred dates
Availability and meeting requests

Customization Help

Use the property panel to customize:

Field Name — form submission key
Week Starts — Sunday through Saturday
Show Time / 24-Hour / Minute Step — time behavior
Min Date / Max Date / Disable Past — date availability
Font, colors, borders, radii, padding, and shadows — match any brand

Checkout Information

Product: Date & Time Picker for Framer
Delivery: Framer component URL after purchase
Installation: Paste the component URL directly into a Framer project
Support: injamulhaquesomrat@gmail.com

59:[["$","$L5c",null,{"post":{"id":"019ff176-9fe5-71b5-b0ef-5337d5642594","title":null,"body":"

I’ve just released my new Date & Time Picker for Framer - a clean, form-ready component for bookings, appointments, registrations, and scheduling.

Check it out now.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I’ve just released my new "},{"type":"text","text":"Date & Time Picker for Framer","marks":[{"type":"bold"}]},{"type":"text","text":" - a clean, form-ready component for bookings, appointments, registrations, and scheduling."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Check it out now."}]}]},"author":{"framerUserId":"4fcc85f2-c72a-45dd-9954-e95d3d91e65a","name":"Injamul Haque Somrat","slug":"injamulhaquesomrat","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4fcc85f2-c72a-45dd-9954-e95d3d91e65a/kcvnp6ty","followed":false,"followsYou":false},"media":[],"resources":[{"id":"poy7YJqAleO58r5lz35o","resolved":true,"title":"Date n Time Picker","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Date & Time Picker for Framer"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A Form-ready date and time picker for Framer. Let visitors choose a date, select a time with touch-friendly scroll controls, and submit the result through a native Framer form field."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Date and optional time selection"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scrollable hour and minute pickers for mouse and mobile touch"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Form-ready "},{"type":"text","text":"Field Name","marks":[{"type":"bold"}]},{"type":"text","text":" control with ISO date/time submission"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Week can start on any day, Sunday through Saturday"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"12-hour or 24-hour time formats"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable minute intervals, date limits, and past-date blocking"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive popup positioning that stays within the available screen area"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard support, click-outside closing, and Escape-to-close"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable typography, colors, borders, radii, spacing, and shadow"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Setup"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add the component to your Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place it inside a Framer Form."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set "},{"type":"text","text":"Field Name","marks":[{"type":"bold"}]},{"type":"text","text":" to the submission key you need, such as "},{"type":"text","text":"appointment_datetime","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Leave "},{"type":"text","text":"Value","marks":[{"type":"bold"}]},{"type":"text","text":" empty to let visitors select their own date and time."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set date/time format, restrictions, and visual styles from the property panel."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Notes"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The selected value is submitted as an ISO date/time, for example "},{"type":"text","text":"2026-08-11T14:30:00.000Z","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use a valid ISO string in "},{"type":"text","text":"Value","marks":[{"type":"bold"}]},{"type":"text","text":" only when controlling the picker through a Framer variable or override."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appointment and consultation bookings"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Event registrations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Demo requests"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Restaurant or service reservations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Delivery and pickup scheduling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact forms requiring preferred dates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Availability and meeting requests"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Help"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Use the property panel to customize:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Field Name","marks":[{"type":"bold"}]},{"type":"text","text":" — form submission key"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Week Starts","marks":[{"type":"bold"}]},{"type":"text","text":" — Sunday through Saturday"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Show Time / 24-Hour / Minute Step","marks":[{"type":"bold"}]},{"type":"text","text":" — time behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Min Date / Max Date / Disable Past","marks":[{"type":"bold"}]},{"type":"text","text":" — date availability"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font, colors, borders, radii, padding, and shadows","marks":[{"type":"bold"}]},{"type":"text","text":" — match any brand"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Checkout Information"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product: Date & Time Picker for Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Delivery: Framer component URL after purchase"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Installation: Paste the component URL directly into a Framer project"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Support: "},{"type":"text","text":"injamulhaquesomrat@gmail.com","marks":[{"type":"code"}]}]}]}]}]},"introduction":"Form-ready Date and Time Picker","slug":"date-n-time-picker","author":{"framerUserId":"4fcc85f2-c72a-45dd-9954-e95d3d91e65a","name":"Injamul Haque Somrat","slug":"injamulhaquesomrat","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4fcc85f2-c72a-45dd-9954-e95d3d91e65a/kcvnp6ty","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4fcc85f2-c72a-45dd-9954-e95d3d91e65a/019ff17a-aac8-7789-a595-9323f2a91930.png","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-08-11T15:35:10.314Z","updatedAt":"2026-08-12T08:24:57.930Z","publishedAt":"2026-08-11T15:35:10.295Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://datetimepicker.framer.website/","price":"15","paymentUrl":"https://contra.com/payment-link/4XktT8ny-date-and-time-picker-for-framer","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"Dn3G9KnLu39RPu5q90En"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-11T15:35:11.077Z","updatedAt":"2026-08-11T15:35:11.077Z","reported":false}}],"$L5e"]

Suggested for you