Resources

Real-Time Clock/Date Widget

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Real-Time Clock/Date Widget

View demo

Copy component

Remix project

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How I made $10K+ with Framer in 60 days

Get your FREE ticket

$10k Undercover Event

Get your FREE ticket

Component

Real-Time Clock/Date Widget

This is a real-time clock widget (code component) for Framer that can also display the current date. You can use this on any of your websites to display the current time/date for your visitors.

Created by

Nandi

About the resource

This clock widget in Frame is highly customizable via component properties.

You can:

Display either the time or date.
Change the font.
Change the color.
And customize many other smaller details.

Code for the component

You can also copy this code to create the code component from scratch in your project.

About the resource

This clock widget in Frame is highly customizable via component properties.

You can:

Display either the time or date.
Change the font.
Change the color.
And customize many other smaller details.

Code for the component

You can also copy this code to create the code component from scratch in your project.

About the resource

This clock widget in Frame is highly customizable via component properties.

You can:

Display either the time or date.
Change the font.
Change the color.
And customize many other smaller details.

Code for the component

You can also copy this code to create the code component from scratch in your project.

import * as React from "react"
import {
    addPropertyControls,
    ControlType,
    NumberControlDescription,
    EnumControlDescription,
    RenderTarget,
} from "framer"
import {
    fontControls,
    fontSizeOptions,
    localeOptions,
    containerStyles,
    fontStack,
    useFontControls,
} from "https://framer.com/m/framer/default-utils.js@^0.45.0"

/**
 * TIME
 *
 * @framerIntrinsicWidth 140
 * @framerIntrinsicHeight 20
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export function Time(props) {
    const {
        outputType,
        fontFamily,
        fontSize,
        fontWeight,
        localeType,
        customLocale,
        timeFormat,
        showYear,
        showWeekday,
        showHours,
        showMinutes,
        showSeconds,
        monthFormat,
        color,
        font,
        alignment,
    } = props

    const [rerenderOutputKey, setRerenderOutputKey] = React.useState(
        `${Math.random()}`
    )
    const timerRef = React.useRef<number>()

    const text = React.useMemo(() => {
        const locale = localeType === "custom" ? [customLocale] : []
        let formatOptions: Intl.DateTimeFormatOptions
        switch (outputType) {
            case "date":
                formatOptions = {
                    weekday: showWeekday ? "long" : undefined,
                    day: "numeric",
                    month: monthFormat,
                    year: showYear ? "numeric" : undefined,
                }
                break
            case "time":
                formatOptions = {
                    hour: showHours ? "numeric" : undefined,
                    minute: showMinutes ? "numeric" : undefined,
                    second: showSeconds && showMinutes ? "numeric" : undefined,
                    hour12: timeFormat === "12h",
                }
                break
            default:
                console.error(`Unsupported outputType: ${outputType}`)
                break
        }
        return new Intl.DateTimeFormat(locale, formatOptions).format(new Date())
    }, [
        outputType,
        localeType,
        customLocale,
        timeFormat,
        showYear,
        showWeekday,
        showHours,
        showMinutes,
        showSeconds,
        monthFormat,
        rerenderOutputKey,
    ])

    React.useEffect(() => {
        if (outputType === "time") {
            const timer = setInterval(
                () => setRerenderOutputKey(`${Math.random()}`),
                (60 - new Date().getSeconds()) * 1000
            )
            timerRef.current = timer
            return () => {
                if (timer) {
                    return clearInterval(timer)
                }
            }
        }
    }, [timerRef.current, outputType])

    return (
        <div
            style={{
                ...containerStyles,
                color,
                fontFamily: fontStack,
                fontWeight: 500,
                fontSize: 16,
                ...font,
            }}
        >
            <span style={{ width: "100%" }}>{text}</span>
        </div>
    )
}

Time.defaultProps = {
    height: 20,
    width: 140,
    outputType: "time",
    localeType: "auto",
    customLocale: "en-US",
    color: "#999",
    timeFormat: "24h",
    showYear: true,
    showWeekday: true,
    showHours: true,
    showMinutes: true,
    showSeconds: false,
    monthFormat: "long",
    alignment: "center",
}

Time.displayName = "Time & Date"

addPropertyControls(Time, {
    outputType: {
        title: "Type",
        type: ControlType.Enum,
        displaySegmentedControl: true,
        options: ["date", "time"],
        optionTitles: ["Date", "Time"],
        defaultValue: Time.defaultProps.outputType,
    },
    showWeekday: {
        title: "Weekday",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showWeekday,
        hidden: (props) => props.outputType !== "date",
    },
    monthFormat: {
        title: "Month",
        type: ControlType.Enum,
        options: ["short", "long", "numeric"],
        optionTitles: ["Short", "Long", "Numeric"],
        defaultValue: Time.defaultProps.monthFormat,
        hidden: (props) => props.outputType !== "date",
    },
    showYear: {
        title: "Year",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showYear,
        hidden: (props) => props.outputType !== "date",
    },
    timeFormat: {
        title: "Format",
        type: ControlType.Enum,
        options: ["12h", "24h"],
        optionTitles: ["12h", "24h"],
        displaySegmentedControl: true,
        defaultValue: Time.defaultProps.timeFormat,
        hidden: (props) => props.outputType !== "time",
    },
    showHours: {
        title: "Hours",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showHours,
        hidden: (props) => props.outputType !== "time",
    },
    showMinutes: {
        title: "Minutes",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showMinutes,
        hidden: (props) => props.outputType !== "time",
    },
    showSeconds: {
        title: "Seconds",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showSeconds,
        hidden: (props) => props.outputType !== "time" || !props.showMinutes,
    },
    localeType: {
        title: "Locale",
        type: ControlType.Enum,
        displaySegmentedControl: true,
        options: ["custom", "auto"],
        optionTitles: ["Custom", "Auto"],
        defaultValue: Time.defaultProps.localeType,
    },
    customLocale: {
        title: " ",
        type: ControlType.Enum,
        options: Object.keys(localeOptions).sort(),
        optionTitles: Object.keys(localeOptions)
            .sort()
            .map((key) => localeOptions[key]),
        hidden: (props) => props.localeType !== "custom",
        defaultValue: "en",
    },
    font: {
        // @ts-expect-error – Internal
        type: ControlType.Font,
        controls: "extended",
    },
    color: {
        type: ControlType.Color,
        defaultValue: Time.defaultProps.color,
    },
})

import * as React from "react"
import {
    addPropertyControls,
    ControlType,
    NumberControlDescription,
    EnumControlDescription,
    RenderTarget,
} from "framer"
import {
    fontControls,
    fontSizeOptions,
    localeOptions,
    containerStyles,
    fontStack,
    useFontControls,
} from "https://framer.com/m/framer/default-utils.js@^0.45.0"

/**
 * TIME
 *
 * @framerIntrinsicWidth 140
 * @framerIntrinsicHeight 20
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export function Time(props) {
    const {
        outputType,
        fontFamily,
        fontSize,
        fontWeight,
        localeType,
        customLocale,
        timeFormat,
        showYear,
        showWeekday,
        showHours,
        showMinutes,
        showSeconds,
        monthFormat,
        color,
        font,
        alignment,
    } = props

    const [rerenderOutputKey, setRerenderOutputKey] = React.useState(
        `${Math.random()}`
    )
    const timerRef = React.useRef<number>()

    const text = React.useMemo(() => {
        const locale = localeType === "custom" ? [customLocale] : []
        let formatOptions: Intl.DateTimeFormatOptions
        switch (outputType) {
            case "date":
                formatOptions = {
                    weekday: showWeekday ? "long" : undefined,
                    day: "numeric",
                    month: monthFormat,
                    year: showYear ? "numeric" : undefined,
                }
                break
            case "time":
                formatOptions = {
                    hour: showHours ? "numeric" : undefined,
                    minute: showMinutes ? "numeric" : undefined,
                    second: showSeconds && showMinutes ? "numeric" : undefined,
                    hour12: timeFormat === "12h",
                }
                break
            default:
                console.error(`Unsupported outputType: ${outputType}`)
                break
        }
        return new Intl.DateTimeFormat(locale, formatOptions).format(new Date())
    }, [
        outputType,
        localeType,
        customLocale,
        timeFormat,
        showYear,
        showWeekday,
        showHours,
        showMinutes,
        showSeconds,
        monthFormat,
        rerenderOutputKey,
    ])

    React.useEffect(() => {
        if (outputType === "time") {
            const timer = setInterval(
                () => setRerenderOutputKey(`${Math.random()}`),
                (60 - new Date().getSeconds()) * 1000
            )
            timerRef.current = timer
            return () => {
                if (timer) {
                    return clearInterval(timer)
                }
            }
        }
    }, [timerRef.current, outputType])

    return (
        <div
            style={{
                ...containerStyles,
                color,
                fontFamily: fontStack,
                fontWeight: 500,
                fontSize: 16,
                ...font,
            }}
        >
            <span style={{ width: "100%" }}>{text}</span>
        </div>
    )
}

Time.defaultProps = {
    height: 20,
    width: 140,
    outputType: "time",
    localeType: "auto",
    customLocale: "en-US",
    color: "#999",
    timeFormat: "24h",
    showYear: true,
    showWeekday: true,
    showHours: true,
    showMinutes: true,
    showSeconds: false,
    monthFormat: "long",
    alignment: "center",
}

Time.displayName = "Time & Date"

addPropertyControls(Time, {
    outputType: {
        title: "Type",
        type: ControlType.Enum,
        displaySegmentedControl: true,
        options: ["date", "time"],
        optionTitles: ["Date", "Time"],
        defaultValue: Time.defaultProps.outputType,
    },
    showWeekday: {
        title: "Weekday",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showWeekday,
        hidden: (props) => props.outputType !== "date",
    },
    monthFormat: {
        title: "Month",
        type: ControlType.Enum,
        options: ["short", "long", "numeric"],
        optionTitles: ["Short", "Long", "Numeric"],
        defaultValue: Time.defaultProps.monthFormat,
        hidden: (props) => props.outputType !== "date",
    },
    showYear: {
        title: "Year",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showYear,
        hidden: (props) => props.outputType !== "date",
    },
    timeFormat: {
        title: "Format",
        type: ControlType.Enum,
        options: ["12h", "24h"],
        optionTitles: ["12h", "24h"],
        displaySegmentedControl: true,
        defaultValue: Time.defaultProps.timeFormat,
        hidden: (props) => props.outputType !== "time",
    },
    showHours: {
        title: "Hours",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showHours,
        hidden: (props) => props.outputType !== "time",
    },
    showMinutes: {
        title: "Minutes",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showMinutes,
        hidden: (props) => props.outputType !== "time",
    },
    showSeconds: {
        title: "Seconds",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showSeconds,
        hidden: (props) => props.outputType !== "time" || !props.showMinutes,
    },
    localeType: {
        title: "Locale",
        type: ControlType.Enum,
        displaySegmentedControl: true,
        options: ["custom", "auto"],
        optionTitles: ["Custom", "Auto"],
        defaultValue: Time.defaultProps.localeType,
    },
    customLocale: {
        title: " ",
        type: ControlType.Enum,
        options: Object.keys(localeOptions).sort(),
        optionTitles: Object.keys(localeOptions)
            .sort()
            .map((key) => localeOptions[key]),
        hidden: (props) => props.localeType !== "custom",
        defaultValue: "en",
    },
    font: {
        // @ts-expect-error – Internal
        type: ControlType.Font,
        controls: "extended",
    },
    color: {
        type: ControlType.Color,
        defaultValue: Time.defaultProps.color,
    },
})

import * as React from "react"
import {
    addPropertyControls,
    ControlType,
    NumberControlDescription,
    EnumControlDescription,
    RenderTarget,
} from "framer"
import {
    fontControls,
    fontSizeOptions,
    localeOptions,
    containerStyles,
    fontStack,
    useFontControls,
} from "https://framer.com/m/framer/default-utils.js@^0.45.0"

/**
 * TIME
 *
 * @framerIntrinsicWidth 140
 * @framerIntrinsicHeight 20
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export function Time(props) {
    const {
        outputType,
        fontFamily,
        fontSize,
        fontWeight,
        localeType,
        customLocale,
        timeFormat,
        showYear,
        showWeekday,
        showHours,
        showMinutes,
        showSeconds,
        monthFormat,
        color,
        font,
        alignment,
    } = props

    const [rerenderOutputKey, setRerenderOutputKey] = React.useState(
        `${Math.random()}`
    )
    const timerRef = React.useRef<number>()

    const text = React.useMemo(() => {
        const locale = localeType === "custom" ? [customLocale] : []
        let formatOptions: Intl.DateTimeFormatOptions
        switch (outputType) {
            case "date":
                formatOptions = {
                    weekday: showWeekday ? "long" : undefined,
                    day: "numeric",
                    month: monthFormat,
                    year: showYear ? "numeric" : undefined,
                }
                break
            case "time":
                formatOptions = {
                    hour: showHours ? "numeric" : undefined,
                    minute: showMinutes ? "numeric" : undefined,
                    second: showSeconds && showMinutes ? "numeric" : undefined,
                    hour12: timeFormat === "12h",
                }
                break
            default:
                console.error(`Unsupported outputType: ${outputType}`)
                break
        }
        return new Intl.DateTimeFormat(locale, formatOptions).format(new Date())
    }, [
        outputType,
        localeType,
        customLocale,
        timeFormat,
        showYear,
        showWeekday,
        showHours,
        showMinutes,
        showSeconds,
        monthFormat,
        rerenderOutputKey,
    ])

    React.useEffect(() => {
        if (outputType === "time") {
            const timer = setInterval(
                () => setRerenderOutputKey(`${Math.random()}`),
                (60 - new Date().getSeconds()) * 1000
            )
            timerRef.current = timer
            return () => {
                if (timer) {
                    return clearInterval(timer)
                }
            }
        }
    }, [timerRef.current, outputType])

    return (
        <div
            style={{
                ...containerStyles,
                color,
                fontFamily: fontStack,
                fontWeight: 500,
                fontSize: 16,
                ...font,
            }}
        >
            <span style={{ width: "100%" }}>{text}</span>
        </div>
    )
}

Time.defaultProps = {
    height: 20,
    width: 140,
    outputType: "time",
    localeType: "auto",
    customLocale: "en-US",
    color: "#999",
    timeFormat: "24h",
    showYear: true,
    showWeekday: true,
    showHours: true,
    showMinutes: true,
    showSeconds: false,
    monthFormat: "long",
    alignment: "center",
}

Time.displayName = "Time & Date"

addPropertyControls(Time, {
    outputType: {
        title: "Type",
        type: ControlType.Enum,
        displaySegmentedControl: true,
        options: ["date", "time"],
        optionTitles: ["Date", "Time"],
        defaultValue: Time.defaultProps.outputType,
    },
    showWeekday: {
        title: "Weekday",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showWeekday,
        hidden: (props) => props.outputType !== "date",
    },
    monthFormat: {
        title: "Month",
        type: ControlType.Enum,
        options: ["short", "long", "numeric"],
        optionTitles: ["Short", "Long", "Numeric"],
        defaultValue: Time.defaultProps.monthFormat,
        hidden: (props) => props.outputType !== "date",
    },
    showYear: {
        title: "Year",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showYear,
        hidden: (props) => props.outputType !== "date",
    },
    timeFormat: {
        title: "Format",
        type: ControlType.Enum,
        options: ["12h", "24h"],
        optionTitles: ["12h", "24h"],
        displaySegmentedControl: true,
        defaultValue: Time.defaultProps.timeFormat,
        hidden: (props) => props.outputType !== "time",
    },
    showHours: {
        title: "Hours",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showHours,
        hidden: (props) => props.outputType !== "time",
    },
    showMinutes: {
        title: "Minutes",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showMinutes,
        hidden: (props) => props.outputType !== "time",
    },
    showSeconds: {
        title: "Seconds",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: Time.defaultProps.showSeconds,
        hidden: (props) => props.outputType !== "time" || !props.showMinutes,
    },
    localeType: {
        title: "Locale",
        type: ControlType.Enum,
        displaySegmentedControl: true,
        options: ["custom", "auto"],
        optionTitles: ["Custom", "Auto"],
        defaultValue: Time.defaultProps.localeType,
    },
    customLocale: {
        title: " ",
        type: ControlType.Enum,
        options: Object.keys(localeOptions).sort(),
        optionTitles: Object.keys(localeOptions)
            .sort()
            .map((key) => localeOptions[key]),
        hidden: (props) => props.localeType !== "custom",
        defaultValue: "en",
    },
    font: {
        // @ts-expect-error – Internal
        type: ControlType.Font,
        controls: "extended",
    },
    color: {
        type: ControlType.Color,
        defaultValue: Time.defaultProps.color,
    },
})

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Get your FREE ticket

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Get your FREE ticket

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Get your FREE ticket

More resources

View all

Playlist Generation Circular Animation in Framer
Component
Playlist Generation Circular Animation in Framer
Component
3D Letter Testimonials in Framer
Component
3D Letter Testimonials in Framer
Component