Wednesday, July 18, 2012

jQuery plugins: timeago, stepy, datepicker

Here some useful jQuery plugins that I use in my projects.

timeago: timeago jQuery plugin provides convert timestamp values to relative time.
Example:
<abbr class="timeago" title="1995-09-20T015:04:23Z">September 20, 1995</abbr>
jQuery(document).ready(function() {
    jQuery("abbr.timeago").timeago();
});
It would look :
If you want to support timestamps in the future, you can set it like:
    $.timeago.settings.allowFuture = true;
Then it would look :

stepy: stepy jQuery plugin provides create custom wizard that based on FormToWizard.
Example:
<form id="form_stepy"> 
    <fieldset title="Step1">
        <legend>Description of step 1</legend>
    </fieldset>
    <fieldset title="Step2">
        <legend>Description of step 2</legend>
    </fieldset>
</form>
jQuery(document).ready(function() {
    $('#form_stepy').stepy({
        block:        true,
        titleClick:   true
    });
});
It would look :

datepicker: datepicker jQuery plugin provides to use a popup calendar input fields.
Example:
<p>Date:<input type="text" id="mydatepicker"> </p>
jQuery(document).ready(function() {
    $(function() {
        $( "#mydatepicker" ).datepicker();
    });
});
It would look :
plugins websites are: timeago stepy datepicker