This time I will share jQuery Plugin and tutorial about jQuery Plugin To Show Events Based On Current Time – TimeIT.js, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="timeit.js"></script> |
2. Hide content after a date. The default date format: YYYY-MM-DD HH:MM.
1 |
<p data-end="2016-5-5" class="timeit">May 5th, 2016<p> |
2 |
<p data-start="2036-12-01" class="timeit">Dec 1, 2036<p> |
3. Show content between dates.
1 |
<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).
1 |
<p data-start="2016-06-31" class="timeit">June 31, 2016</p> |
2 |
<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.
1 |
<p data-start="5 AM" data-end="5 PM" class="timeit">5 AM - 10-30 daily</p> |
2 |
<p data-start="20141231" class="timeit">20141231</p> |
6. Apply your own CSS styles to the hidden content.
3 |
text-decoration: line-through; |
4 |
display: inline !important; |
5 |
visibility: visible !important |
Change log:
2017-08-28
This awesome jQuery plugin is developed by vsevolodts. For more Advanced Usages, please check the demo page or visit the official website.
