Best Period Picker

TimePicker like picker in mobile devices

Draggable, touchable, use mousewheel and keyboard. This plugin can be downloaded with PeriodPicker

   Buy and Download

Options

Name default Descr Ex.
clickAndSelect true You can click on any digit in picker, and this value will choosen {clickAndSelect:false}

Example

jQuery('#timepicker1').TimePickerAlone({
clickAndSelect: false
});


dragAndDrop true Enable/disable drag and drop in picker {dragAndDrop:false}

Example

jQuery('#timepicker2').TimePickerAlone({
dragAndDrop: false
});


mouseWheel true Enable/disable mousewheel in picker {mouseWheel:false}

Example

jQuery('#timepicker3').TimePickerAlone({
mouseWheel: false
});


inverseMouseWheel false if you want reverse mousewhhel behavior use it {inverseMouseWheel:true}

Example

jQuery('#timepicker4').TimePickerAlone({
inverseMouseWheel: false
});


listenKeyPress true When you click on some time's part(second,minutes etc) you can enter key(0-9) and this value will be choosen {listenKeyPress:true}

Example

jQuery('#timepicker5').TimePickerAlone({
listenKeyPress: false
});


saveOnChange true When you choose some time in picker in input field value will be updated too {saveOnChange:true}

Example

jQuery('#timepicker6').TimePickerAlone({
saveOnChange: false
});


onChange
function (str, datetime) {
	//console.log(str);
	//console.log(datetime);
}
Event is triggered when time is changed {onChange:alert}
onHide
function () {return true;}
Event is triggered when timepicker is closed. If it returns false the picker will not be closed

Example

jQuery('#timepicker7').TimePickerAlone({
	onHide: function ($input) {
		return $input.val() === '12:34:00';
	}
});


twelveHoursFormat true Use 12 am/pm hours format {twelveHoursFormat:false}

Example

jQuery('#timepicker8').TimePickerAlone({
twelveHoursFormat: false
});


inputFormat 'HH:mm:ss' Use 12 am/pm hours format {inputFormat:'H:m'}

Example

jQuery('#timepicker9').TimePickerAlone({
inputFormat: 'H:m'
});


defaultTime '00:00:00' Start time if in input field attribute "value" empty. In format inputFormat {defaultTime:'23:45'}

Example

jQuery('#timepicker11').TimePickerAlone({
defaultTime:'23:45'
});


hours true Show hours picker {hours:false}

Example

jQuery('#timepicker12').TimePickerAlone({
hours:false
});


minutes true Show minutes picker {minutes:false}

Example

jQuery('#timepicker13').TimePickerAlone({
minutes:false
});


seconds false Show seconds picker {seconds:true}

Example

jQuery('#timepicker14').TimePickerAlone({
seconds:true
});


ampm true Show am/pm picker. You can use it without twelveHoursFormat {ampm:false}

Example

jQuery('#timepicker15').TimePickerAlone({
ampm:false
});


steps [1,1,1,1] Steps for picker [hours,minutes,seconds,ampm] {steps:[2,2,2,1]}

Example

jQuery('#timepicker16').TimePickerAlone({
steps:[2,2,2,1]
});


inline false Inline mode

Example

jQuery('#timepicker_inline').TimePickerAlone({
inline:true
});


Methods

destroy

Returns the initial field to its original state

jQuery('#timepicker15').TimePickerAlone('destroy');

regenerate

When you change something on the page, you can recalc all picker's states

$(window).on('resize', function(){
	jQuery('#timepicker15').TimePickerAlone('regenerate');
});

save

Save current picker state in original input

jQuery('#timepicker15').TimePickerAlone('save');

setValue

Set timepicker value

jQuery('#timepicker15').TimePickerAlone('setValue', '12:00', true); // true - means no trigger change if used saveOnChange
jQuery('#timepicker16').TimePickerAlone('setValue', new Date());

getValue

get current Date object value

console.log(jQuery('#timepicker15').TimePickerAlone('getValue'));

setMax

set maxumum of time

jQuery('#timepicker15').TimePickerAlone('setMax', new Date()); // now will be upper limit
jQuery('#timepicker16').TimePickerAlone('setMax', '10:00'); 

setMin

set minimum of time

jQuery('#timepicker15').TimePickerAlone('setMin', new Date()); // now is the lower limit
jQuery('#timepicker16').TimePickerAlone('setMin', '12:00'); 
Add a comment

PeriodPicker jQuery plugin select range dates

Perfect period picker for CMS or CRM

or datetimepicker
with clear button
Compact mode
like datetimepicker mode
Inline mode


I have already bought the product. How to updade?
By email will be sent the latest version of the product you purchased

Getting started

Extract bought archive and include after </body> next

<link rel="stylesheet" href="/build/jquery.periodpicker.min.css">
<script src="/jquery.min.js"></script>
<script src="/build/jquery.periodpicker.full.min.js"></script>

Some HTML form elements input period

<input id="periodpickerstart" type="text" />
<input id="periodpickerend" type="text" />

Simple init

jQuery('#periodpickerstart').periodpicker({
 end: '#periodpickerend'
});

If you want use TimePicker or PeriodTimePicker or DateTimePicker include

<link rel="stylesheet" href="/build/jquery.timepicker.min.css">
<script src="/build/jquery.timepicker.min.js"></script>

and use timepicker and timepickerOptions settings. For example will make datetimepicker

jQuery('#datetimepicker').periodpicker({
	norange: true, // use only one value
	cells: [1, 1], // show only one month

	resizeButton: false, // deny resize picker
	fullsizeButton: false,
	fullsizeOnDblClick: false,

	timepicker: true, // use timepicker
	timepickerOptions: {
		hours: true,
		minutes: true,
		seconds: false,
		ampm: true
	}
});

Or you can use alone timepciker. More about timepicker

jQuery('#timepicker').timepickeralone({
	hours: true,
	minutes: true,
	seconds: true,
	ampm: false
});

Compact mode

jQuery('#compact_mode').periodpicker({
    cells: [1, 1],
    withoutBottomPanel: true,
    yearsLine: false,
    title: false,
    closeButton: false,
    fullsizeButton: false
});

Browser support

  • Internet Explorer 9+
  • Opera 12+
  • Safari 6
  • Firefox 3.x+
  • Chrome 25+

Changelog

Version 5.3.5

Fixed Issue 47

Version 5.3.1

Added option todayButton and onTodayButtonClick event

jQuery('#picker-with-today-button').periodpicker({
    todayButton: true
});

Result

and event

jQuery('#picker-with-today-button-event').periodpicker({
    todayButton: true,
    onTodayButtonClick: function () {
        this.month = 1;
        this.year = 2027;
        this.regenerate();
        return false;
    },
});

Result

Options

Name default Descr Ex.
tabIndex 0 Tab index for focusable {tabIndex:1}

Example

jQuery('#tabindex').periodpicker({
    tabIndex: false // disable focusable
});
lang en The localization key. {lang:ru}

Example

jQuery('#pps').periodpicker({
 end: '#periodpickerend',
 lang: 'ru'
});
animation true Use css animation when periodpicker is opened

Example

jQuery('#animation').periodpicker({
 end: '#animation1',
 animation: false
});


i18n {...} Localization store

Example

jQuery('#periodpickerstart2').periodpicker({
 end: '#periodpickerend2',
 lang: 'de',
 i18n: {
 'de' : {
   'Select week #' : 'Wahlen Sie Woche #',
   'Select period' : 'Wahlen Sie Zeitraums',
   'Open fullscreen' : 'Offnen Vollbild',
   'Close' : 'schlie?en',
   'OK' : 'OK',
   'Choose period' : 'Zeitraum wahlen'
  }
});


withoutBottomPanel false Do not show the bottom panel with buttons and input elements

Example

jQuery('#withoutBottomPanel1').periodpicker({
    withoutBottomPanel: true
});


showTimepickerInputs true Show inputs for enterind times

Example

jQuery('#showTimepickerInputs1').periodpicker({
    showTimepickerInputs: false,
    timepicker: true
});


showDatepickerInputs true Show inputs for enterind times

Example

jQuery('#showDatepickerInputs1').periodpicker({
    showDatepickerInputs: false
});


timepicker false Use timepickers in preriodpicker

Example

jQuery('#datetimepicker111').periodpicker({
 timepicker: true, //use timepicker
 timepickerOptions: {
	hours: true,
	minutes: true,
	seconds: false,
	ampm: true
 }
});
useTimepickerLimits true Don't allow set time2 less than time1 and time1 more than time2 in timepickers when was selected range
timepickerOptions {} Options for timepicker. More options

Example

jQuery('#timepickerOptions').periodpicker({
 timepicker: true, //use timepicker
 timepickerOptions: {
	dragAndDrop: false,
	mouseWheel: false,
	hours: true,
	minutes: true,
	seconds: false,
	ampm: true
 }
});
defaultEndTime false If you need different defaultTime for start and for end use this option for END, and timepickerOptions.defaultTime for START

Example

jQuery('#defaultEndTime2').periodpicker({
 timepicker: true, //use timepicker
 defaultEndTime: '21:00',
 timepickerOptions: {
	defaultTime: '19:00'
 }
});
yearsLine true Show years selecter line {yearsLine: false}

Example

jQuery('#periodpickerstart3').periodpicker({
 end: '#periodpickerend3',
 yearsLine: false
});


title true Show title {title: false}

Example

jQuery('#periodpickerstart4').periodpicker({
 end: '#periodpickerend4',
 title: false
});


inline false Show periodpicker inline mode {inline: true}

Example

jQuery('#inline_mode').periodpicker({
    inline: true,
    
    norange: true, // use only one value
    cells: [1, 1], // show only one month

    resizeButton: false, // deny resize picker

    fullsizeButton: false,
    fullsizeOnDblClick: false,
    
    timepicker: false // use timepicker
});


clearButtonInButton false Show clear value button in main button {clearButtonInButton: true}

Example

jQuery('#clearButtonInButton1').periodpicker({
            clearButtonInButton: true
        });


clearButton false Show clear value button in periodpicker {clearButton: true}

Example

jQuery('#clearButton1').periodpicker({
            i18n: {
                en: {
                    'Clear': '×'
                }
            },
            clearButton: true,
            okButton: false
        });


closeAfterClear false Hide periodpicker after clear operation {closeAfterClear: true}

Example

jQuery('#closeAfterClear1').periodpicker({
            norange: true,
            cells: [1, 1],

            i18n: {
                en: {
                    'Clear': '×'
                }
            },
            timepicker: false,
            clearButtonInButton: true,
            clearButton: true,
            closeAfterClear: true,
            okButton: false
        });


todayButton false Show «Today» button. Go picker to current day {todayButton: true}

Example

jQuery('#picker-with-today-button').periodpicker({
    todayButton: true
});
okButton true Show «OK» button {okButton: false}

Example

jQuery('#periodpickerstart5').periodpicker({
 end: '#periodpickerend5',
 okButton: false
});


closeButton true Show «× Close» button {closeButton: false}

Example

jQuery('#periodpickerstart6').periodpicker({
 end: '#periodpickerend6',
 closeButton: false
});


fullsizeButton true Show «Open on fullsize» button {fullsizeButton: false}

Example

jQuery('#periodpickerstart7').periodpicker({
 end: '#periodpickerend7',
 fullsizeButton: false
});


resizeButton true Show «Resize» button and enable Resize opportunity {resizeButton: false}

Example

jQuery('#periodpickerstart8').periodpicker({
 end: '#periodpickerend8',
 resizeButton: false
});


Example

jQuery('#periodpickerstartwithownavigate').periodpicker({
	cells: [1, 1],
	navigate: false
});

fullsizeOnDblClick true When you click on picker's header open fullsize mode {fullsizeOnDblClick: false}

Example

jQuery('#periodpickerstart9').periodpicker({
 end: '#periodpickerend9',
 fullsizeOnDblClick: false
});


fullsize true Always open picker in fullsize mode {fullsize: false}

Example

jQuery('#a1').periodpicker({
 end: '#b1',
 fullsize: false
});


draggable true Allow drag picker by header {draggable: false}

Example

jQuery('#a2').periodpicker({
 end: '#b2',
 draggable: false
});


mousewheel true Allow use mousewheel for change picker's. Work only when plugin mousewheel was included {mousewheel: false}

Example

jQuery('#a3').periodpicker({
 end: '#b3',
 mousewheel: false
});


mousewheelYearsLine true If true, then when scrolling the mouse wheel over lightYears, it will not be constantly changing the month and year will {mousewheelYearsLine: false}
reverseMouseWheel true If mousewheel is true, you can exchange his behavior {reverseMouseWheel: false}

Example

jQuery('#a4').periodpicker({
    end: '#b4',
    mousewheel: true,
    reverseMouseWheel: false
});


hideAfterSelect false When period choosen periodpicker closed {hideAfterSelect: true}

Example

jQuery('#a14').periodpicker({
     end: '#b14',
     hideAfterSelect: true
    });


hideOnBlur true When enabled likeXDSoftDateTimePicker mode, and form has more 1 elements, source input lose focus {hideOnBlur: false}

Example

jQuery('#hideOnBlurex').periodpicker({
     hideOnBlur: true,
     likeXDSoftDateTimePicker: true
    });


norange false Use like simple datepicker {norange: true}

Example

jQuery('#norange1').periodpicker();
formatMonth 'MMMM YYYY' Mounth's name will show in this format. Use moment.js formats {formatMonth: 'MM YY'}

Example

jQuery('#a5').periodpicker({
    end: '#b5',
    formatMonth: 'MM YY'
});


formatDecoreDate 'D MMMM' This option needed for show in button resulted period. Use moment.js formats {formatDecoreDate: 'DD.MM'}

Example

jQuery('#a6').periodpicker({
 end: '#b6',
 formatDecoreDate: 'DD.MM'
});


formatDecoreDateWithoutMonth 'D' When month and year from first value equal month and year from second value, in first part is shown only date. Use moment.js formats {formatDecoreDateWithoutMonth: 'DD'}

Example

jQuery('#addwm7').periodpicker({
 end: '#bddwm7',
 formatDecoreDateWithoutMonth: 'D YYYY'
});


formatDecoreDateWithYear 'D MMMM YYYY' It uses the same place where «formatDecoreDate» but when year of first period's value not equal year of second. Use moment.js formats {formatDecoreDateWithYear: 'DD.MM.YYYY'}

Example

jQuery('#a7').periodpicker({
 end: '#b7',
 formatDecoreDateWithYear: 'DD.MM.YYYY'
});


formatDate 'YYYY/MM/DD' Inside format, use when you need get values from with «valueStringStrong» command. Use moment.js formats. Also this format is used for return value in form input {formatDate: 'DD.MM.YYYY'}

Example

jQuery('#a8').periodpicker({
 end: '#b8',
 formatDate: 'DD.MM.YYYY'
});
jQuery('#a8').on('change', function () {
	alert(jQuery(this).periodpicker('valueStringStrong'));
});


formatDecoreDateTime 'D MMMM' Similarly formatDecoreDate but using the options timepicker:true {formatDecoreDateTime: 'DD.MM'}
formatDecoreDateTimeWithoutMonth 'HH:mm D' Similarly formatDecoreDateWithoutMonth but using the options timepicker:true {formatDecoreDateTimeWithoutMonth: 'DD'}
formatDecoreDateTimeWithYear 'HH:mm D MMMM YYYY' Similarly formatDecoreDateWithYear but using the options timepicker:true {formatDecoreDateTimeWithYear: 'DD.MM.YYYY'}
formatDateTime 'HH:mm YYYY/MM/D' Similarly formatDate but using the options timepicker:true {formatDateTime: 'DD.MM.YYYY'}
end '' Identificator of input element or element for secod period's value {end: $('#input2')}
noHideSourceInputs false Do not hide the original input elements {noHideSourceInputs: true}
likeXDSoftDateTimePicker false Hide Picker button, not hide the source input fields. If the input field gets the focus it displays periodpiker. Behavior similar to datetimepicker {likeXDSoftDateTimePicker: true}

Example

<input id="likeXDSoftDateTimePicker1" type="text" />
jQuery('#likeXDSoftDateTimePicker1').periodpicker({
    likeXDSoftDateTimePicker: true,
    norange: true,
    cells: [1, 1],
    withoutBottomPanel: true,
    yearsLine: false,
    title: false,
    closeButton: false,
    resizeButton: false,
    fullsizeButton: false,
    hideAfterSelect: true
});


startMonth Current month Number of month 1..12 for start picker's position. Work only inputs don't have values {startMonth: 12}

Example

<input id="v1" type="text" />
<input id="g1" type="text"/>
jQuery('#v1').periodpicker({
 end: '#g1',
 startMonth: 12
});


startYear Current year Year for start picker's position. Work only inputs don't have values {startYear: 2002}

Example

jQuery('#v2').periodpicker({
 end: '#g2',
 startYear: 2002
});


dayOfWeekStart 7 Day for start week. Mon - 1,Tue - 2,Wen - 3,Thu - 4, Fri - 5, Sat - 6, Sun - 7 {dayOfWeekStart: 1}

Example

jQuery('#v3').periodpicker({
 end: '#g3',
 dayOfWeekStart: 1
});


yearSizeInPixels 120 The width of one of the all periods yearsline in pixel. Use when you change «yearsPeriod» option {yearSizeInPixels: 300}
yearsPeriod [2000 , Current Year + 20] Period for YearsLine {yearsPeriod: [2002, 2005]}

Example

jQuery('#v4').periodpicker({
 end: '#g4',
 yearsPeriod: [2002, 2005]
});


weekEnds [6,7] The days of the week, which will be designated as weekend. Mon - 1,Tue - 2,Wen - 3,Thu - 4, Fri - 5, Sat - 6, Sun - 7 {weekEnds: [7]}

Example

jQuery('#v5').periodpicker({
 end: '#g5',
 weekEnds: [7]
});


holidays [] Days which will highlight like weekends. In «formatDate» format
{
 holidays: ['1.12.2015', '2.12.2015'],
 formatDate: 'D.MM.YYYY'
}

Example

jQuery('#v6').periodpicker({
 end: '#g6',
 holidays: ['1.12.2015', '2.12.2015'],
 formatDate: 'D.MM.YYYY'
});


disableDays [] Disable days. These days you can not select. In «formatDate» format
{
 disableDays: ['1.12.2015', '2.12.2015'],
 formatDate: 'D.MM.YYYY'
}

Example

jQuery('#v7').periodpicker({
 end: '#g7',
 disableDays: ['1.12.2015', '2.12.2015'],
 formatDate: 'D.MM.YYYY'
});


minDate false Disable all days before this value. These days you can not select. In «formatDate» format
{
 minDate: '1.12.2015',
 formatDate: 'D.MM.YYYY'
}

Example

jQuery('#v8').periodpicker({
 end: '#g8',
 minDate: '1.12.2015'
 formatDate: 'D.MM.YYYY'
});


maxDate false Disable all days after this value. These days you can not select. In «formatDate» format
{
 maxDate: '22.12.2015',
 formatDate: 'D.MM.YYYY'
}

Example

jQuery('#v9').periodpicker({
 end: '#g9',
 maxDate: '22.12.2015'
 formatDate: 'D.MM.YYYY'
});


cells [1,3] Default size for picker count rows (minimum - 1) and count cols (minimum - 3).
{
 cells: [10,10]
}

Example

jQuery('#j1').periodpicker({
 end: '#h1',
 cells: [10,10]
});


utcOffset null Setting the utc offset by supplying minutes http://momentjs.com/docs/#/manipulating/utc-offset/

Example

jQuery('#j1').periodpicker({
 end: '#h1',
 utcOffset: 120
});

Events

Name Descr
onAfterShow Fires after the picker shows

Example

$('#ppaftershow').periodpicker({
    onAfterShow: function () {
        // we do not give select weekends and holidays
        this.picker.find('.period_picker_weekday,.period_picker_holiday').on('mousedown', function (e) {
            e.stopImmediatePropagation();
            return false;
        });
    }
});
onAfterHide Fires after the picker had hidden

Example

$('#ppafterhide#39;).periodpicker({
    // if the user does not chose that fill the current date
    onAfterHide: function () {
        var val = this.startinput.val();
        if (!val || !moment(val, this.options.format).isValid()) {
            this.addRange([new Date()]);
        }
    }
});
onAfterRegenerate Fires after picker regenerates. After resize, after change year and month, and after show(fires before onAfterShow).

Example

$('#ppafterregenerate#39;).periodpicker({
    // this example is more correct, because picker can recreate all of its elements, and after the show
    onAfterRegenerate: function () {
        // we do not give select weekends and holidays
        this.picker.find('.period_picker_weekday,.period_picker_holiday').on('mousedown', function (e) {
            e.stopImmediatePropagation();
            return false;
        });
    }
});
onOkButtonClick Fired when user click on OK button

Example

{onOkButtonClick: function () {
    alert(this.startinput.val()) // this is PeriodPicker instance
}}
onTodayButtonClick Fired when user click on Today button

Example

{onTodayButtonClick: function () {
    this.month = 1;
    this.year = 2027;
    this.regenerate();
    return false;
}}

Commands

NameDescr
picker Return main PeriodPicker JS object

Example

jQuery('#z1').periodpicker({end: '#x1'});
console.log(jQuery('#z1').periodpicker('picker'));
jQuery('#z1').periodpicker('picker').button.css('width', 500);
regenerate Regenerate picker widget. Has one parameter cells

Example

jQuery('#regenerate1').periodpicker({cells: [1,1]});
jQuery(window).on('resize', function () {
    if (window.innerWidth > 1024) {
        jQuery('#regenerate1')
            .periodpicker('regenerate', [1,3]);        
    }
});
setOption Change options

Example

jQuery('#z1').periodpicker({end: '#x1', lang: 'ru'});
jQuery('#z1').periodpicker('setOption','lang','en');
setOptions Change options

Example

jQuery('#z1').periodpicker({end: '#x1', lang: 'ru'});
jQuery('#z1').periodpicker('setOptions',{'lang' : 'en'});
change Change period's values from input

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('#z1').val('12.01.2004')
jQuery('#z1').periodpicker('change');
destroy Destroy picker

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('#z1').periodpicker('destroy');
hide Hide opened picker

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('#z1').periodpicker('show');
jQuery('#z1').periodpicker('hide');
show Open picker

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('.btn').click(function (){
 jQuery('#z1').periodpicker('show');
})
clear Clear picker's value

Example

jQuery('#clear').periodpicker();
jQuery('.some-clear-btn').click(function (){
 jQuery('#clear').periodpicker('clear');
})
value Return period array [[Date, Date]]. if there is a second parameter, the period will be set on it

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('#z1').periodpicker('value', ['2010/03/12', '2010/03/18']);
jQuery('#z1').periodpicker('value', '2010/03/12');
jQuery('.btn').click(function (){
 console.log(jQuery('#z1').periodpicker('value'));
})
valueStringStrong Return period value in formatDate strong format

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('.btn').click(function (){
 console.log(jQuery('#z1').periodpicker('valueStringStrong'));// 1.02.2004-2.02.2005
})
valueString Return period value in formatDecoreDate(formatDecoreDateWithYear) format

Example

jQuery('#z1').periodpicker({end: '#x1'});
jQuery('.btn').click(function (){
 console.log(jQuery('#z1').periodpicker('valueString'));// 1 January - 2 December 2005
})
disable Disable picker's trigger button

Example

jQuery('#disables').periodpicker();
jQuery('.btn').click(function (){
    jQuery('#disables').periodpicker('disable');//
})
enable Enable picker's trigger button

Example

jQuery('#enables').periodpicker();
    jQuery('#enables').periodpicker('disable'));
    jQuery('.btn').click(function (){
        jQuery('#enables').periodpicker('enable');//
    })

It is paid extension. If you buy it you help all my opensource projects. Thank you!

Download

 

Add a comment

selectSpinner jQuery plugin - Select with Spinner in one

For fast choose from a lot of data use this plugin, due to the fact that the choice to select the desired value, you can use the buttons - "up" and "down" to select the desired value, and very very fast

Download and Source

Example:

           

Use

  • Mousewheel
  • Button up and down
  • DropDown list
  • Drag&Drop spin buttons
  • Type a few characters
Add a comment

Autocomplete like Google jQuery Plugin

JQuery Autocomplete plugin is a lightweight simple and easy in settings autocomplete like Google. Support Accent Folding

Local Remote Local&Remote Source Download

Add a comment

jQuery Slideshow with hardware-accelerated transitions

Responsive, accessible as a pure CSS slideshow. Prev/next navigation, bullets with thumbnails,...

Fixed Table Header and Left Column

jQuery plugin to modify a table element with a fixed header element and fixed left columns.

Easy responsive tabs to accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or...

jQuery DOM Cache

Using $.cache (or $.domCache) may dramatically increase the performance of your web application...

jQuery Marquee with CSS3 Support

jQuery plugin to scroll the text like the old traditional marquee. NOW with CSS3 support.

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and...

jQuery Ajax Loading

jQuery Ajax Loading.

jScroll – jQuery Plugin for Infinite Scrolling / Auto-Paging

jScroll is a jQuery plugin allowing you to effortlessly implement infinite scrolling, lazy...

jQuery editable select box

This plugin allows you to make a select box editable like a text box while keeping it's...

Galereya

Responsive, easily customizable gallery with a masonry layout

Mosaic Flow

Pinterest like responsive image grid for jQuery that doesn’t suck.

TagCanvas HTML5 canvas tag cloud

Displays tags as a 3D rotating tag cloud using an HTML5 canvas

Card Deck Slideshow

This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each...

jBox

jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips,...

WordPress Lightbox – Catalyst Template

Wordpress Image Lightbox. Catalyst Style DEMO. Wordpress Photo Lightbox maker comes with a...

jQuery Turtle

jQuery plugin for turtle graphics. Every element is a turtle that can rotate, move, animate,...

DataTable AJAX Pagination jQuery plugin

The best jQuery AJAX Pagination plugin——DataTable jQuery plugin!

Simple Calendar and Date Picker

A simple calendar and date picker only depends on JQuery

jQuery SumoSelect

SumoSelect is a jquery plugin which beautifully renders a single or multiple HTML select element....

jQuery Browser Rejection

jReject is a simple tool for rejecting specific browsers in a nice modal window

qTip2 – Pretty powerful tooltips

Introducing... qTip2. The second generation of the advanced qTip plugin for the ever popular...

jQuery Date and Time picker

jQuery plugin for date, time, or datetime manipulation in form

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

fancy input

Makes typing in input fields fun with CSS3 effects

Blindify

Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning...

jQuery droparea

jQuery plugin for HTML5 drag-and-drop (images and files).

appendGrid – The dynamic table input jQuery plugin

appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Acxmenu – multilevel jquery accordion menu

Acxmenu - multilevel jquery accordion menu plugin for jQuery.

mBox fullscreen lightbox plugin

mBox is a true full-screen light box(modal box) solution. Full Screen feature is supported by...

Bootstrap Datagrid

bs_grid is a jQuery Datagrid plugin, based on Twitter Bootstrap. Advanced row selection, sorting,...

Flexible jQuery slider plugin

with ayaSlider you can create a flexible slider with multiple parallax effects, there is no...

Bootstrap Form Helpers Date Picker

Date Picker jQuery plugin for Bootstrap.

jQuery Photobox

A lightweight CSS3 image gallery plugin for jQuery that is pretty to look and and easy to use.

jQuery Tiles

Splits images in as many tiles as you want, even with a gap.

jQuery nanoGALLERY

Image gallery simplified. Touch enabled, responsive, justified/cascading/grid layout and it...

Bootstrap Auto-Hiding Navbar

An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling...

Canvas Image Map Area Editor

Create and edit image map area polygons in a canvas-based GUI that replaces form elements.

aciTree – A customizable treeview control

aciTree renders a treeview control based on a simple data structure. The tree can be lazy loaded...

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Switchy

This is a tiny jQuery plugin which can be used as both a switch or a slider.

jQuery Slider – WOW image slider

WOW Slider is a jQuery image slider plugin with fantastic visual effects and beautifully...

jQuery Clock or Timer plugin in retro flip-count down style

jQuery Clock,Timer or Counter plugin in retro flip-count down style. The plugin can display the...

jQuery Waterwheel Carousel

This jQuery plugin can display images with a cascading waterwheel effect.

jQuery Super Labels

Give your forms a helping of awesome!

autoNumeric – Currency formatting made easy

jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs....

jQuery Number Format

Easily format numbers for display use. Replace numbers inline in a document, or return a...

jQuery Easy Ticker

jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly...

jQuery AlignColumn

jQuery plugin for aligning columns of a table on decimal or other character.
good