https://github.com/thunderpoot/webdelta
A JavaScript utility for web pages that creates dynamic, human-readable dates, times, and relative time descriptions from UNIX timestamps.
https://github.com/thunderpoot/webdelta
duration iso8601 javascript timestamps web web-development
Last synced: about 2 months ago
JSON representation
A JavaScript utility for web pages that creates dynamic, human-readable dates, times, and relative time descriptions from UNIX timestamps.
- Host: GitHub
- URL: https://github.com/thunderpoot/webdelta
- Owner: thunderpoot
- License: mit
- Created: 2024-08-27T14:54:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-28T12:46:14.000Z (about 1 year ago)
- Last Synced: 2025-06-18T14:43:08.367Z (4 months ago)
- Topics: duration, iso8601, javascript, timestamps, web, web-development
- Language: JavaScript
- Homepage: https://thunderpoot.github.io/webdelta/
- Size: 29.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Δδ
## 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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
- **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:
```html
```
#### Download:
1. Download the `webdelta.js` file and include it in your project.
2. Add the following line in your HTML:
```html
```
### Usage
1. Add the `webDelta` class to any `` element containing a UNIX timestamp:
```html
1724769141
```
2. Customise the display using additional classes:
```html
1724769141
```
### 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:
```html
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'
};
```
### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
### Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
### Author
T E Vaughan
### Links
- [GitHub Repository](https://github.com/thunderpoot/webdelta)
- [Issue Tracker](https://github.com/thunderpoot/webdelta/issues)