---
title: "Date n Time Picker — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Injamul Haque Somrat · Forms. Form-ready Date and Time Picker"
canonical: "https://framer.elliotli.dev/component/date-n-time-picker"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Date n Time Picker

# Date n Time Picker

Form-ready Date and Time Picker

[View on Framer](https://framer.com/marketplace/components/date-n-time-picker/?via=elliot-li)

![Date n Time Picker preview image 1](https://framer.elliotli.dev/og/component/date-n-time-picker/0ac2b30391dfcd43/1600x1200.jpg)

## Summary

Form-ready Date and Time Picker

## Description

## 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

1.  Add the component to your Framer project.
    
2.  Place it inside a Framer Form.
    
3.  Set **Field Name** to the submission key you need, such as `appointment_datetime`.
    
4.  Leave **Value** empty to let visitors select their own date and time.
    
5.  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`
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3112

## Details

- **Author**: Injamul Haque Somrat
- **Price**: $15.00
- **Published**: 2026-08-11
- **Updated**: 2026-08-12
- **Added**: 2026-08-11
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from