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".