Schedule Content Visibility by Date & Time - TimeIT.js

TimeIT.js is a jQuery vanilla JavaScript library that shows or hides page elements based on configurable start and end date/time values.

It runs on any static HTML page, reads data-start and data-end attributes directly on your markup, and flips element visibility at exactly the right moment.

Features:

• Accepts YYYY-MM-DD HH:MM (exact datetime), YYYY-MM-DD (midnight start), and HH:MM (repeating daily schedule).
• Handles ranges that cross midnight, such as 22:00 to 06:00, correctly.
• Uses the native HTML hidden attribute to show and hide content.
• Calculates the time until the next state change and self-schedules a re-run.
• Marks elements with an .error class and a descriptive title tooltip when a date attribute is malformed.

Use Cases:

• Show a sale banner or discount code only between a campaign's exact start and end datetime.
• Publish a conference agenda, speaker announcement, or registration link at a predefined date.
• Use the HH:MM format to show a "Live now" badge only during business hours or a live stream window.

How To Use It:

1. Include the core JavaScript file timeit.js on your webpage.

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

2. Add the class timeit to any element you want to schedule. Then set data-start, data-end, or both. The script reads these values on load.

<!-- Show a New Year message only in the first week of January 2026 -->
<div class="timeit" data-start="2027-01-01" data-end="2027-01-07 23:59">
  <p>Happy New Year! Our offices reopen on January 8th.</p>
</div>

<!-- Show a summer sale banner starting June 1st, with no set end date -->
<div class="timeit" data-start="2027-06-01">
  <p>Summer Sale is live — up to 40% off all plans.</p>
</div>

<!-- Hide a maintenance notice after the maintenance window ends -->
<div class="timeit" data-end="2027-04-15 06:00">
  <p>Scheduled maintenance is in progress. Service may be intermittent.</p>
</div>

3. The HH:MM format triggers a daily repeating rule. The script resolves the time against the current calendar day on each run.

<!-- Show a "Support is online" badge only during business hours -->
<div class="timeit" data-start="09:00" data-end="17:30">
  <span class="badge badge--green">Support is online</span>
</div>

<!-- Overnight example: show a "Late night deals" bar from 10 PM to 2 AM -->
<div class="timeit" data-start="22:00" data-end="02:00">
  <p>Late Night Deals — active now until 2 AM!</p>
</div>

4. TimeIT.js uses the native hidden HTML attribute to conceal elements. Browsers apply display: none to [hidden] by default. If your CSS resets or a framework overrides this, add the following rule to restore it:

/* Restore browser default for hidden attribute if your CSS reset strips it */
[hidden] {
  display: none !important;
}

5. The .error class is added to elements with invalid date strings. You can style it to surface misconfigured markup during development:

/* Highlight misconfigured timeit elements in development */
.timeit.error {
  outline: 2px dashed red;
}

6. Accepted Date Format:

• YYYY-MM-DD HH:MM — Exact date and time. Example: 2026-09-01 08:30.
• YYYY-MM-DD — Date only. The time resolves to midnight (00:00) in the user's local timezone.
• HH:MM — Time only. The script evaluates this against today's date on every run.

Changelog:

2026-03-19

• Removed dependency on jQuery; plugin now works with plain vanilla JavaScript.
• ReUpdated timeit.js to use native DOM APIs (querySelectorAll, classList, getAttribute, etc.).
• Refactored timeit.js to modern ES6+ standards (arrow functions, const/let, modular helpers).
• Rewrote date parsing logic for improved reliability and consistent handling of time-only, date-only, and datetime inputs.
• Simplified and clarified visibility logic (including support for overnight time ranges).
• Replaced .hidden CSS class with native HTML hidden attribute for better semantics and accessibility.
• Removed manual aria-hidden handling (now implicitly managed by hidden attribute).
• Eliminated global mutable state; improved scheduling logic using functional patterns.
• Improved error handling with clearer validation and separation of concerns.
• Enhanced maintainability by splitting logic into pure utility functions (parseDate, shouldHide, etc.).
• Added more predictable and efficient re-run scheduling for future state updates.

2017-08-28

• v3

---

This awesome jQuery plugin is developed by vsevolodts. For more Advanced Usages, please check the demo page or visit the official website.