Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Date & Time’ Category

CLNDR.js is a jQuery plugin for creating calendars and customizing them however we want.

The plugin doesn’t generate any markup but uses an Underscore.js HTML template to fill with data.

jQuery Calendar - CLNDR.js

It has ready-to-use options for determining the week offset, the date to be displayed on initial load, click events (like next/previous month) and much more.

Just a note that, CLNDR.js is not a plug ‘n’ play way to create calendars but it is more a feature-rich boilerplate to create the calendar you have in mind.

tidyTime.js is a jQuery plugin for displaying the time in a friendly way.

The time values are converted to strings like: “quarter past 9″, “5 o’clock”, “3 to 8″, etc.

tidyTime.js

And, the plugin allows us to insert custom string before and after the time, like: ”Hey, it’s 10 minutes to 4. Be quick!”.

It is possible to set different strings for specific timestamps too and a callback exists when tidyTime is triggered.

When creating scheduled events in JavaScript, we use setTimeout() for events that are triggered once and setInterval() for the recurring ones.

Later.js, a stadalone JavaScript library, offers an advanced usage for triggering recurring events and can easily replace both methods for many projects.

Later.js

It has a chainable API which allows us to set complex schedules like:

later.parse.recur() .every(2).hour().first().dayOfMonth() .and() .on(8,20).hour().last().dayOfMonth() .except() .on(12).month();

which would normally take tons of if..else statements.

Also, the library accepts cron expressions or user friendly schedules (like “every 10 seconds”).

P.S. It works both in the browser and Nodejs.

The flipping elements in information boards (like the ones in airports) are usually loved by many.

FlipClock.js is a jQuery plugin which replicates this effect to present anything related to time.

It has support for working as a clock, countdown or timer and can be customized completely with CSS.

jQuery FlipClock.js

There is an option for auto-start, multiple methods exist for controlling it (start, stop, getTime, setTime..) with their callbacks.

Also, it has a full-featured API for extending the functionality further.

It is pretty hard to find a simple-yet-functional and good looking datepicker script.

The most popular one is probably the jQuery UI's picker but it is heavy in size for any project that actually does only need a datepicker.

Pikaday - JavaScript Datepicker

Pikaday is a standalone JavaScript datapicker which is small in size (<5kb) and can work well with Moment.js if advanced formatting is needed.

The design of the picker can be easily customized with CSS (the default style already looks good) and offers "quick year switching".

Countdowns always existed but they became popular and now being used widely.

This is probably due to the popularity of the "coming soon pages with countdowns" and daily deal websites that makes use of them heavily.

If you are creating your own coming soon page and in need of countdown functionality, here are the jQuery countdown plugins that you need:

jQuery Countdown Script

jQuery Countdown Script

The script allows us to set the countdown by mentioning a specific date-time or an offset.

It is possible to use multiple instances on the same page, start-stop the timer and much more.

Countdown

jQuery Countdown

This is probably the most advanced countdown solution which can actually count down and up.

There is support for timezones, multiple languages, pause/starting and callbacks on given timestamps.

Read the rest of this entry »

jQuery-Timing is a plugin for the framework that simplifies and improves the usage of timing-related events + loops.

Using the jQuery's chain syntax, it is possible to wait for events/animations to be completed, define timeouts and run sequential or parallel loops.

These are already possible but require the usage of callbacks that end up in longer lines of code. jQuery-Timing solves all in the same line (chain).

jQuery Timing

Rather than using setTimeout, it has a .wait() function (offers more than jQuery's .delay) that can wait for an event and a trigger function besides a defined period of time.

And, there is .repeat() ... .until() which eases creating loops of any events again in the same chain.

The plugin is documented so well, has lots of examples and every feature/function is explained in detail.

  • Tags:
  • Filed under: Date & Time, Goodies, MIT License
  • 1 Comment
  • For many people, rather than a full timestamp, a relative one (for ex: 5 minutes ago) is much easier and faster to understand.

    Smart Time Ago, a jQuery plugin, converts any given timestamps into relative ones with a simple function.

    Best of all, it smartly keeps watching the timestamps on the loaded page and updates them itself automatically so that the readers always get the right relative timestamp.

    jQuery Smart Time Ago

    jQuery Verbose Calendar is a plugin for creating a calendar that displays the whole months and days of a year at the same time.

    Once loaded, it auto-scrolls to "today" and displays the day names when hovered to any date in a tooltip.

    jQuery Verbose Calendar

    The calendar can be inserted into any HTML element with a single function, there are very few parameters to customize but a callback exists when a date is clicked which is great for adding extra interactions.

    Considering the amount of information displayed in a single interface, it can be a good fit for sharing events or tasks.

    minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

    Currently, there are 3 components: minform, longtable and dtcal.

    minjs

    minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

    longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

    And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com