---
title: "Date and Time — Free Framer component · Best of Framer"
description: "Free Framer component · by Soubhagya Sahu · Interactive. Here's a concise version with bullet points: Live Date & Time Display Component A professional, real-time date and time…"
canonical: "https://framer.elliotli.dev/component/date-and-time"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Date and Time

# Date and Time

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

![Date and Time preview image 1](https://framer.elliotli.dev/og/component/date-and-time/9ec2c0e30321fa69/1600x1200.jpg)

## Summary

Here's a concise version with bullet points: Live Date & Time Display Component A professional, real-time date and time component with extensive customization options.

## Description

Here's a concise version with bullet points:

## Live Date & Time Display Component

A professional, real-time date and time component with extensive customization options. Perfect for hero sections, dashboards, event pages, and any project requiring live time display.

**Features:**

**Time Display:**

-   12-hour or 24-hour format
    
-   Optional seconds display
    
-   Real-time updates every second
    
-   AM/PM indicator for 12-hour format
    

**Date Formats (9 Options):**

-   Full: "Monday, January 15, 2024"
    
-   Short: "Jan 15, 2024"
    
-   Day Month: "15 Jan 2024"
    
-   Numeric: "01/15/2024"
    
-   ISO: "2024-01-15"
    
-   Dot: "15.01.2024"
    
-   Day Short: "Mon, Jan 15"
    
-   Month Day: "January 15"
    
-   Day Month Short: "15 Jan"
    

**Layout Options:**

-   One-line layout: Time and date together
    
-   Two-line layout: Stacked display
    

**Separators (One-Line Mode):**

-   Dash - | Pipe | | Dot • | Comma , | Space | At at
    

**Typography Controls:**

-   Custom font family
    
-   Adjustable font size
    
-   Font weight (Light to Extra Bold)
    
-   Line height control
    
-   Letter spacing adjustment
    

**Styling:**

-   Custom text color
    
-   Text alignment (Left, Center, Right)
    
-   Auto-sizing to content
    
-   Fully responsive
    

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

-   All · #1957

## Details

- **Author**: Soubhagya Sahu
- **Published**: 2025-10-23
- **Updated**: 2025-11-29
- **Added**: 2025-10-14
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step