jQuery Plugin To Show Events Based On Current Time - TimeIT.js

TimeIT.js is a tiny yet useful jQuery plugin which enables you to show/hide html contents based on the current date/time.

Basic usage:

1. Include the JavaScript file timeit.js after jQuery library and you're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="timeit.js"></script>

2. Hide content after a date. The default date format: YYYY-MM-DD HH:MM.

<p data-end="2016-5-5" class="timeit">May 5th, 2016<p>
<p data-start="2036-12-01" class="timeit">Dec 1, 2036<p>

3. Show content between dates.

<p data-start="2016-06-31" data-end="2018-01-01" class="timeit">June 2016 - Jan 2018<p>

4. Show content after a date (no expiration).

<p data-start="2016-06-31" class="timeit">June 31, 2016</p>
<p data-start="2026-01-01" class="timeit">Jan 1st, 2026</p>

5. Processing user input errors. When the date or time is entered with an error, .error class is added with a 'title' attribute that describes an error. This functionality is removed from minified version of the plugin.

<p data-start="5 AM" data-end="5 PM" class="timeit">5 AM - 10-30 daily</p>
<p data-start="2014\12\31" class="timeit">2014\12\31</p>

6. Apply your own CSS styles to the hidden content.

.hidden {
  color: #ccc;
  text-decoration: line-through;
  display: inline !important;
  visibility: visible !important
}

Change log:

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.