NEW, i am looking for a Date / Time plugin / Display

GRIFFCOMM · Dec 19, 2020

Hi, am new to OBS, appears to be working, we need to create a background (Text (GDI+)?) that will show the current date and time.... i would of assumed text holders can be used, however i found an old plug in (https://obsproject.com/forum/resources/date-time-plugin.24/), but this appears corrupted and for the old version,

Any ideas if i can just add some text place holders in the TEXT add in to show a text date and time?

Many Thanks

FerretBomb · Dec 19, 2020

Unfortunately, no, there aren't. You can use a third-party tool like Snaz to update a text file on your hard disk once a second, if you don't mind having 3600 extra write operations per hour. This has been a highly-requested feature for years now, sadly.
Personally, as I only use it for date/timestamping the start and end of my stream recordings, I use a browser-based date/time page, which may or may not be useful in your case:

OBS Studio: A HTML page for showing current date and time in the video

OBS Studio: A HTML page for showing current date and time in the video - clock.html

gist.github.com

GRIFFCOMM · Dec 19, 2020

Hi, this gave me a great idea, ive managed to simplify the above alot, using the below time.html file locally (doesnt need to be hosted on a webserver), this is what we did (not super clean code, but works well considering we wrote it in about an hour). No external addins or script is required, only the below small HTML file, it will update every second in OBS automatically.

- Save the HTML page that has the clock in it to hard drive (see below for the code we wrote)
: In this example, C:\time.html
- In OBS Add > Browser (create new), any name
: Check Local File
: Browse for C:\time.html
: Width = 1920 (we use HDMI res for this)
: Height = 1080 (we use HDMI res for this)
: We padded the virtual in the HTML to bring the clock down far enough in the page, there are way better and cleaner ways of doing this, but it works, the width is automatic through the CSS in the HTML page
: Remove the custom CSS
- Activate the source, should now have a white time and date on the screen that updates every second (overkill, but means seconds will show if you want them)

C:\time.html file contains:

HTML:

<html>
<head>
<!-- Created by GRIFFCOMM Inc., info@griffcomm.ca  -->
<!-- 19 Dec 2020 -->
<style type="text/css">
.time {
    font-family: Arial;
    font-size: 120px;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
.date {
    font-family: Arial;
    font-size: 50px;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
</style>
<script>
var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function tempus()
{
    now = new Date();
    document.getElementById("time").innerHTML = now.getHours() + ':' + now.getMinutes();
    document.getElementById("date").innerHTML = now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
    setTimeout("tempus()", 1000);
}
</script>
</head>
<body onload="tempus();">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="time" class="time">TIME</span><br>
<span id="date" class="date">DATE</span>
</body>
</html>

GRIFFCOMM · Dec 19, 2020

Update on the above code, as no "0" padding was happening to the time....

HTML:

<html>
<head>
<!-- Created by GRIFFCOMM Inc., info@griffcomm.ca  -->
<!-- 19 Dec 2020 -->
<style type="text/css">
.time {
    font-family: Arial;
    font-size: 120px;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
.date {
    font-family: Arial;
    font-size: 50px;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
</style>
<script>
var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function padding(topad)
{
    topad = topad.toString();
    if (topad.length == 1)
    {
    topad = '0' + topad;
    };
    return topad;
};
function tempus()
{
    now = new Date();
    document.getElementById("time").innerHTML = padding(now.getHours()) + ':' + padding(now.getMinutes());
    document.getElementById("date").innerHTML = now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
    setTimeout("tempus()", 1000);
}
</script>
</head>
<body onload="tempus();">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="time" class="time">TIME</span><br>
<span id="date" class="date">DATE</span>
</body>
</html>

LividBunny · Jun 30, 2021

GRIFFCOMM said:

Update on the above code, as no "0" padding was happening to the time....

HTML:

<html>
<head>
<!-- Created by GRIFFCOMM Inc., info@griffcomm.ca  -->
<!-- 19 Dec 2020 -->
<style type="text/css">
.time {
    font-family: Arial;
    font-size: 120px;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
.date {
    font-family: Arial;
    font-size: 50px;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
</style>
<script>
var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function padding(topad)
{
    topad = topad.toString();
    if (topad.length == 1)
    {
    topad = '0' + topad;
    };
    return topad;
};
function tempus()
{
    now = new Date();
    document.getElementById("time").innerHTML = padding(now.getHours()) + ':' + padding(now.getMinutes());
    document.getElementById("date").innerHTML = now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
    setTimeout("tempus()", 1000);
}
</script>
</head>
<body onload="tempus();">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="time" class="time">TIME</span><br>
<span id="date" class="date">DATE</span>
</body>
</html>

How would one add the seconds?

EDIT: Nvm, I got it. EZ

3pelin · Jul 9, 2021

LividBunny said:
How would one add the seconds?

EDIT: Nvm, I got it. EZ

replace the corresponding line "time" with the following code

document.getElementById("time").innerHTML = padding(now.getHours()) + ':' + padding(now.getMinutes()) + ':' + padding(now.getSeconds());

jdill · Jan 29, 2022

How would I be able to make this a 12-hour clock with AM and PM indicators?

qhobbes · Jan 29, 2022

I just use this

OBS Lua - Date and Time

Sets a text source to act as a date/time text when the source is active. Uses the os.date() function, so read upon what it supports here: https://www.lua.org/pil/22.1.html

obsproject.com

GRIFFCOMM · Sep 22, 2022

jdill said:
How would I be able to make this a 12-hour clock with AM and PM indicators?

Hi, just seen this question, did you get it working?

GRIFFCOMM · Nov 2, 2024

We updated the code with a few more formatting changes:
- 12 or 24 hour clocks
- Full or 3 letter month names
- Easier to change the month names to your own language
- Automatic font sizing based on 2 or 4k layout sizing

HTML:

<html>
<head>
<!-- Created by GRIFFCOMM Inc., info@griffcomm.ca  -->
<!-- 1 Nov 2024 - updated with new layout options and automatic resizing for both layout and font size when changing between 2k and 4k formats -->
<!-- 19 Dec 2020 -->
<script>
	var timeformat = '24';
	// timeformat : denotes the use of 12 or 24 hours clocks (use '12' or '24')

	var monthlength = 'full';
	// monthlength : denotes the use of 3 letter or the complete month name (use 'short' or 'full')

	var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	// monthname : the long format of the month name, change each month name to your own language as required
	function ptime()
	{
		if (timeformat == '12')
		{
			return check12(now.getHours()) + ':' + padding(now.getMinutes())  + ' ' + checklabel(now.getHours());
		};
		if (timeformat == '24')
		{
			return padding(now.getHours()) + ':' + padding(now.getMinutes());
		};
	};
	function pdate()
	{
		if (monthlength == 'full')
		{
			return now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
		};
		if (monthlength == 'short')
		{
			return now.getDate() + ' ' + monthname[now.getMonth()].slice(0,3) + ' ' + now.getFullYear();
		};
	};
	function padding(topad)
	{
		topad = topad.toString();
		if (topad.length == 1)
		{
		topad = '0' + topad;
		};
		return topad;
	};
	function check12(checkhour)
	{
		if (checkhour > 12)
		{
			checkhour = checkhour - 12;
		}
		return checkhour;
	}
	function checklabel(checkhour)
	{
		if (checkhour < 13)
		{
			return 'am';
		}
		return 'pm';
	}
	function tempus()
	{
		now = new Date();
		document.getElementById("time").innerHTML = ptime();
		document.getElementById("date").innerHTML = pdate();
		setTimeout("tempus()", 1000);
	}
</script>
<style type="text/css">
.time {
	margin-top: 20%;
	font-family: Arial;
	font-size: 7vw;
	color: #DDDDDD;
	text-align: center;
	display: block;
	font-weight: bold;
}
.date {
	margin-top: -1%;
	font-family: Arial;
	font-size: 3vw;
	color: #DDDDDD;
	text-align: center;
	display: block;
	font-weight: bold;
}
</style>
</head>
<body onload="tempus();">
<span id="time" class="time">TIME</span><br>
<span id="date" class="date">DATE</span>
</body>
</html>

bcoyle · Nov 2, 2024

GRIFFCOMM said:

We updated the code with a few more formatting changes:
- 12 or 24 hour clocks
- Full or 3 letter month names
- Easier to change the month names to your own language
- Automatic font sizing based on 2 or 4k layout sizing

HTML:

<html>
<head>
<!-- Created by GRIFFCOMM Inc., info@griffcomm.ca  -->
<!-- 1 Nov 2024 - updated with new layout options and automatic resizing for both layout and font size when changing between 2k and 4k formats -->
<!-- 19 Dec 2020 -->
<script>
    var timeformat = '24';
    // timeformat : denotes the use of 12 or 24 hours clocks (use '12' or '24')

    var monthlength = 'full';
    // monthlength : denotes the use of 3 letter or the complete month name (use 'short' or 'full')

    var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    // monthname : the long format of the month name, change each month name to your own language as required
    function ptime()
    {
        if (timeformat == '12')
        {
            return check12(now.getHours()) + ':' + padding(now.getMinutes())  + ' ' + checklabel(now.getHours());
        };
        if (timeformat == '24')
        {
            return padding(now.getHours()) + ':' + padding(now.getMinutes());
        };
    };
    function pdate()
    {
        if (monthlength == 'full')
        {
            return now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
        };
        if (monthlength == 'short')
        {
            return now.getDate() + ' ' + monthname[now.getMonth()].slice(0,3) + ' ' + now.getFullYear();
        };
    };
    function padding(topad)
    {
        topad = topad.toString();
        if (topad.length == 1)
        {
        topad = '0' + topad;
        };
        return topad;
    };
    function check12(checkhour)
    {
        if (checkhour > 12)
        {
            checkhour = checkhour - 12;
        }
        return checkhour;
    }
    function checklabel(checkhour)
    {
        if (checkhour < 13)
        {
            return 'am';
        }
        return 'pm';
    }
    function tempus()
    {
        now = new Date();
        document.getElementById("time").innerHTML = ptime();
        document.getElementById("date").innerHTML = pdate();
        setTimeout("tempus()", 1000);
    }
</script>
<style type="text/css">
.time {
    margin-top: 20%;
    font-family: Arial;
    font-size: 7vw;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
.date {
    margin-top: -1%;
    font-family: Arial;
    font-size: 3vw;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
</style>
</head>
<body onload="tempus();">
<span id="time" class="time">TIME</span><br>
<span id="date" class="date">DATE</span>
</body>
</html>

COOL

GRIFFCOMM · Nov 3, 2024

Another update...

- 12 or 24 hour clocks
- Opt to show seconds
- Opt to show am/pm indicator (only works with 12 hour clock)
- Full or 3 letter month names
- Easier to change the month names to your own language
- Automatic font sizing based on 2 or 4k layout sizing

HTML:

<html>
<head>
<!-- Created by GRIFFCOMM Inc., info@griffcomm.ca  -->
<!-- 3 Nov 2024 - added 2 new options, show seconds and show am/pm indiucator -->
<!-- 1 Nov 2024 - updated with new layout options and automatic resizing for both layout and font size when changing between 2k and 4k formats -->
<!-- 19 Dec 2020 -->
<script>
    var timeformat = '24';
    // timeformat : denotes the use of 12 or 24 hours clocks (use '12' or '24')

    var showseconds = 'no';
    // showseconds : show seconds or not (use 'yes' or 'no')

    var showtimelabel = 'no';
    // showtimelabel : show am or pm after the time, only works when timeformat = '12' (use 'yes' or 'no')

    var monthlength = 'full';
    // monthlength : denotes the use of 3 letter or the complete month name (use 'short' or 'full')

    var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    // monthname : the long format of the month name, change each month name to your own language as required
    
    function ptime()
    {
        if (timeformat == '12')
        {
            return check12(now.getHours()) + ':' + padding(now.getMinutes());
        };
        if (timeformat == '24')
        {
            return padding(now.getHours()) + ':' + padding(now.getMinutes());
        };
    };
    function pseconds()
    {
        output = '';
        if (showseconds == 'yes')
        {
            output = '.' + padding(now.getSeconds());
        };
        if (showtimelabel == 'yes' && timeformat == '12')
        {
            output = output + ' ' + checklabel(now.getHours());
        };
        return output;
    };
    function pdate()
    {
        if (monthlength == 'full')
        {
            return now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
        };
        if (monthlength == 'short')
        {
            return now.getDate() + ' ' + monthname[now.getMonth()].slice(0,3) + ' ' + now.getFullYear();
        };
    };
    function padding(topad)
    {
        topad = topad.toString();
        if (topad.length == 1)
        {
        topad = '0' + topad;
        };
        return topad;
    };
    function check12(checkhour)
    {
        if (checkhour > 12)
        {
            checkhour = checkhour - 12;
        }
        return checkhour;
    }
    function checklabel(checkhour)
    {
        if (checkhour < 13)
        {
            return 'am';
        }
        return 'pm';
    }
    function tempus()
    {
        now = new Date();
        document.getElementById("time").innerHTML = ptime();
        document.getElementById("seconds").innerHTML = pseconds();
        document.getElementById("date").innerHTML = pdate();
        setTimeout("tempus()", 1000);
    }
</script>
<style type="text/css">
.timelocation {
    margin-top: 20%;
    text-align: center;
    display: block;
}
.time {
    font-family: Arial;
    font-size: 7vw;
    color: #DDDDDD;
    text-align: center;
    font-weight: bold;
}
.secondss {
    font-family: Arial;
    font-size: 3.5vw;
    color: #DDDDDD;
    text-align: center;
    font-weight: bold;
}
.date {
    margin-top: -1%;
    font-family: Arial;
    font-size: 3vw;
    color: #DDDDDD;
    text-align: center;
    display: block;
    font-weight: bold;
}
</style>
</head>
<body onload="tempus();">
<span class="timelocation"><span id="time" class="time">TIME</span><span id="seconds" class="secondss"> 00</span></span><br>
<span id="date" class="date">DATE</span>
</body>
</html>

GRIFFCOMM · Nov 4, 2024

As this works well, if there another location on the forum this can be posted on, its not a plug in, not really a script either....

qhobbes · Nov 5, 2024

@GRIFFCOMM Tools. There are other browser source things there such as timers and weather.

GRIFFCOMM · Nov 8, 2024

Posted this under tools

Free - Live Time & Date display

Shows the time and date in the center of the screen, automatically sized based on 2k or 4k both, text size and location. Configuration is via east to see settings at the top of the script. Loads as a webpage (local or hosted) then set to the...

obsproject.com

NEW, i am looking for a Date / Time plugin / Display

GRIFFCOMM

New Member

FerretBomb

Active Member

OBS Studio: A HTML page for showing current date and time in the video

GRIFFCOMM

New Member

GRIFFCOMM

New Member

LividBunny

New Member

3pelin

New Member

jdill

New Member

qhobbes

Active Member

OBS Lua - Date and Time

GRIFFCOMM

New Member

GRIFFCOMM

New Member

bcoyle

Member

GRIFFCOMM

New Member

GRIFFCOMM

New Member

qhobbes

Active Member

GRIFFCOMM

New Member

Free - Live Time & Date display