Recipe 12.1

Creating a Component to Show Today's Date

This demo shows a simple web component that shows the current date in a human friendly format.

Demo

Today's date is:

Code

JavaScript

class TodaysDate extends HTMLElement {
  connectedCallback() {
    const format = new Intl.DateTimeFormat(
      navigator.language,
      { dateStyle: 'full' }
    );

    this.textContent = format.format(new Date());
  }
}

if (!customElements.get('todays-date')) {
  customElements.define('todays-date', TodaysDate);
}

HTML

<h2>Today's date is:</h2>

<todays-date></todays-date>