---
title: "DayTime Pro — Free Framer component · Best of Framer"
description: "Free Framer component · by MJ Nafi · Buttons. Date Time Display is a flexible componen"
canonical: "https://framer.elliotli.dev/component/daytime-pro"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/DayTime Pro

# DayTime Pro

Date Time Display is a flexible componen

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

![DayTime Pro preview image 1](https://framer.elliotli.dev/og/component/daytime-pro/e70eebea604f9c23/1600x1200.jpg)

## Summary

Date Time Display is a flexible componen

## Description

Date Time Display is a flexible component for Framer that lets you render dynamic date and time directly inside your designs using simple formatting tokens. Instead of being limited to a fixed clock or calendar format, you can fully control how the output appears by inserting symbols inside curly braces within your text. The component automatically replaces those symbols with the correct live values and updates every second.

The component supports both **system time** and **international time**. In system mode, it simply follows the viewer’s device clock. In international mode, you can select a region and then choose a specific timezone within that region. This makes it useful for dashboards, global websites, event countdown pages, or any interface that needs to show time from different parts of the world.

Another useful feature is the **Font Source connection**. Instead of manually setting typography properties, the component can inherit styles from any text layer you connect. It automatically reads the font family, size, weight, line height, letter spacing, and other typographic settings, allowing the displayed time to match your design system perfectly.

The formatting system is designed to be simple and readable. You write normal text and place tokens inside curly braces wherever you want dynamic values to appear. For example:

Today is {dddd}, {MMMM} {do}, {YYYY} at {h}:{mm}:{ss} {a}

The component will convert that into a live sentence such as:

Today is Tuesday, March 10th, 2026 at 8:43:12 pm

**Key features**

-   Fully customizable date and time formatting using tokens
    
-   Supports both 12-hour and 24-hour clocks
    
-   Automatic updates every second
    
-   Local system time or international timezone display
    
-   Region-based timezone selection for easier navigation
    
-   Typography inheritance through a connected text layer
    
-   Works with any layout width or height in Framer
    
-   Lightweight logic built with native Intl date formatting
    

Because the formatting system is token-based, you can construct almost any readable style of date or time — from simple clocks to full descriptive sentences. This makes the component useful across a wide range of interfaces, including hero sections, dashboards, event pages, global product sites, and productivity tools.

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

-   All · #6897

## Details

- **Author**: MJ Nafi
- **Published**: 2026-03-22
- **Updated**: 2026-03-18
- **Added**: 2026-03-10
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow