Δδ

webdelta.js

https://thunderpoot.github.io/webdelta/

webdelta.js is a versatile JavaScript utility that allows you to easily convert UNIX timestamps into human-readable dates, times, and relative time descriptions directly on your webpages. This script dynamically displays time information with customisable tooltips and formats.

Features

• Automatic Conversion: Converts UNIX timestamps to readable date and time formats.
• Time Zone Support: Automatically displays times in the user's local time zone or a custom time zone of your choice.
• Localised: Makes use of the JavaScript Intl API to support multiple locales.
• Relative Time Descriptions: Displays relative time (e.g., "2 minutes ago" or "in 3 days") with live updating tooltips.
• Custom Formatting: Choose from various formatting options like short, medium, long, and full for dates and times.
• Tooltip Customisation: Fully customisable tooltips with adjustable styles and behaviours, including support for dynamic updates every second.
• Synchronisation: Ensures that all time updates are perfectly synchronised with the real-time clock.
• Easy Integration: Just include the script on your webpage and add the appropriate classes to your tags.
• Multiple Display Modes: Display only the date, only the time, or both, with or without time zones.

Installation

CDN:

Include the script in your HTML:

<script src="https://cdn.jsdelivr.net/gh/thunderpoot/[email protected]/dist/webdelta.min.js"></script>

Download:

1. Download the webdelta.js file and include it in your project.
2. Add the following line in your HTML:

<script src="path/to/webdelta.js"></script>

Usage

1. Add the webDelta class to any <span> element containing a UNIX timestamp:

<span class="webDelta">1724769141</span>

2. Customise the display using additional classes:

<span class="webDelta dateOnly weekday">1724769141</span>

Available Options

Class	Description
raw	Don't reformat the date, preserve the UNIX timestamp.
dateOnly	Display only the date (with time zone unless noTZ is present)
timeOnly	Display only the time (with time zone unless noTZ is present)
iso8601	Display the date and time in ISO 8601 format
short	Display the date and time in a short format
medium	Display the date and time in a medium format
long	Display the date and time in a long format
full	Display the date and time in a full format
weekday	Include the full weekday name in the date and time string
utc	Force the date and time to be displayed in UTC
noTZ	Disable the time zone display
noTooltip	Disable the tooltip display

Configuration

You can customise the behaviour and appearance of webdelta.js by adding the following configuration to your page:

<script>
    window.webDeltaConfig = {
        tooltipBorderRadius: '8px',
        tooltipFont: 'Helvetica, sans-serif',
        tooltipFontSize: '16px',
        tooltipXOffset: 20,
        tooltipYOffset: 20,
        timeZone: 'Europe/Madrid',
        lang: 'es', // Supports BCP47 values such as sv-SE or en-GB
        tooltipBackgroundColor: '#333333',
        tooltipForegroundColor: '#ffcc00'
    };
</script>

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

T E Vaughan

Links

• GitHub Repository
• Issue Tracker