Date Calculator

A simple, interactive date calculator that allows you to add or subtract years, months, weeks, days, hours, and minutes from a given date. Results update automatically as you change values.

How to Use This Widget

1. Download the widget

Download the widget files and host them on your own server:

Download Widget Files

The ZIP file contains both ESM (ES modules) and UMD (Universal Module Definition) builds.

After downloading, extract the files to your website directory and include ONE of these script tags in your HTML:

<!-- Modern browsers: ESM build -->
<script type=&quot;module&quot; src=&quot;/path/to/gema369-date-calc.es.js&quot;></script>

<!-- Legacy fallback: UMD build -->
<script src=&quot;/path/to/gema369-date-calc.umd.js&quot;></script>

Note: Replace "/path/to/" with the actual path where you uploaded the widget files on your server.

2. Add the widget HTML

Place this HTML where you want the widget to appear:

<gema369-date-calculator initial-date="2025-05-20"></gema369-date-calculator>

Available Attributes:

initial-date (optional)
ISO format YYYY-MM-DD. Defaults to today's date if omitted.
Example: 2025-05-20

3. Styling & Theming

You can customize the appearance of the widget using CSS. Here's an example:

gema369-date-calculator {
  /* change font */
  font-family: "Roboto", sans-serif;

  /* change border color */
  border: 1px solid #888;
  border-radius: 0.5rem;
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* target internal elements */
gema369-date-calculator .results {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid #eee;
}

4. Advanced Usage

You can interact with the widget programmatically:

// Get a reference to the widget
const widget = document.querySelector('gema369-date-calculator');

// Set a new initial date
widget.setAttribute('initial-date', '2025-12-31');