Date Format Selector
Thursday, January 30, 202512 days agoSome time ago, I created a small application with interactive form controls that fed into the Date.toLocaleString()
function. I generally prefer standardized functions over third party dependencies, but I found it hard to experiment with the Date.toLocaleString()
function and build an intuition for using it.
The result of my effort is the Date Format Selector, which you can find hosted on GitHub Pages at https://nicholas-wilcox.github.io/date-format-selector/
. You can also find the source code here.
At the time, I was also gaining interest in the standard Web Component APIs, so I took the opportunity to learn how to create web components with vanilla JavaScript. Because most of the parameters of Date.toLocaleString()
can each take one of an enumerative set of values (for example, the hour
, minute
, and second
fields can each be either "numeric"
or "2-digit"
), I knew I needed to create a component for a group of connected radio inputs.
I also wanted my HTML to be succinct, without much repetition or clutter caused by my custom JavaScript. The coded ended up looking something like this:
The JavaScript itself is less elegant, but that's really because I'm not using any third-party libraries. While defining a custom element is as simple as extending the HTMLElement
class and calling the customElements.define()
function, you still need to implement the component, which means programmatically appending DOM nodes inside the component. This is why I defined the templates in the main HTML file, so the JavaScript module for the web component could copy those templates as needed.
The following code has been heavily truncated (the event handling code has been removed), but it should give you an impression of how you implement a web component if you aren't already familiar.
There's more to be said about how the application deals with locales and time zones, so please check out the code and the README if you are interested.