I use discord a lot. Like a lot a lot. I have groups of friends that are located in various parts of the world, and it’s confusing as heck to transform the times that they say into my own time, for get togethers, D&D sessions, sometimes work and a lot more. Discord has this fancy feature that I don’t really see anyone apart from discord bots using, with which you can give a specifically formatted timestamp and it will display that in the user’s local timezone, making it soooo much easier to organise things.
However, the amount of people who’ll be able to get that timestamp is comparitively very few compared to the user base, so I wanted to make a tool that fixed that, giving a nice and easy to use manner by which a user can generate this formatted timestamp, and what I ended up with was this tool.
This reddit post describes the addition of localised dates.
Discord Date Format
An example of the timestamp is this:
<t:1666556580:F>which would result inSunday, October 23, 2022 22:23 pmbeing the time in the GMT+2 timezone.The format is as follows:
<t:${Math.floor(Date.now() / 1000)}:flag>whereDate.now()is the timestamp wanted, andflagis a preset set of formats to transform into:
Flag Format tShort Time (i.e. 22:23 pm)TLong Time (i.e. 22:23:00 pm)dShort Date (i.e. 23/10/2022)DLong Date (i.e. 23 October 2022)fShort Date/Time (i.e. October 23, 2022 22:23)FLong Date/Time (i.e. Sunday, October 23, 2022 22:23 pm)RRelative Time (i.e. 10 minutes ago)Note: The format of the date is somewhat dictated by local settings in discord and your device, an easy way to check what kind of format you have is hover over the timestamp of one of a message.
Having been primarily a Reactjs developer for a number of years I ended up using that lib for this, alongside the now deprecated Momentjs for date handling, you can see the code over on my codepen for the project. The first iteration used the base date and time inputs, as well as a select for the different formats of the date that I could find. Then it would highlight the timestamp in an easily selectable element, and show a version of what it would look like from inside a discord message.
Later on, I used chronojs to make an input field that a user could type in colloquially and have that automatically transformed, like a user could say 8pm and it would return the next 8pm timestamp, it’s just generally an easier way to use it for non technical minded users :)
chronojs
A natural language date parser in Javascript. It is designed to handle most date/time format and extract information from any given text.
Wanting to not link everybody a codepen, I then investigated methods by which I could make it on a static site like this one, and thus the repo was made. However, Reactjs works best with a transpiler, such as babel, but on a quick project like this, I wanted to make it usable in a way that I didn’t have to use a transpiler. JSX is the main issue with Reactjs and using it without a transpiler, so I started using htm.
htm
A JSX-like syntax in plain JavaScript
However, it uses slightly different syntax, specifically around using js within properties, so some of the tool needed to be re-written, though this is the version I’d end up sending everywhere!
The tool’s been available for usage since March 2022, and a lot of my friends and groups I’m in have started using it for announcements and general get togethers as well, and it’s been a massive godsend, no more need to ask “when is 8pm?” which sounds like a stupid question, but is very different when you have a group where there’s multiple timezones involved, especially with the amount of different labels that americans have for timezones (if I hear PST or PDT or whichever one more time…).
For the future I’d like to make a bot that can automatically recognise a time being posted and then post a new one on the lines of “Did you mean xxx?” using this tool, but that’d involve things like hosting and I think this might be enough.. Depends on the traction and if it’s requested more :D