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 Photobox

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

jQuery AlignColumn

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

imgLiquid

A jQuery Plugin to resize images to fit in a container.

Autocomplete like Google

Simple autocomplete like Google

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery imagesScrolling

Jquery plugin images scrolling

jQuery FocusPoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without...

jQuery Month selector

jQueryUI Widget that enables to display and select a month and year using the mm.itemselector widget

Modern Blink

Modern Blink provides the behavior of the blink tag using CSS Animations. Will fallback to jQuery...

jQuery mSlide

Simple and easy to use slider-gallery with touch support.

Animated Table Sorter

Animated Table Sorter is a simple html table sorter, with the added benefit of animating the...

jQuery conventAccordion

jQuery plugin for horizontal and/or vertical accordion.

jQuery Waterwheel Carousel

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

Ezdz [izy-dizy]

A jQuery plugin to turn standard input type file into a nice drag&drop zone with validators...

jQuery Phoenix

jQuery plugin to save form fields values to Local Storage via HMTL5 Web Storage API. Lost...

appendGrid – The dynamic table input jQuery plugin

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

Zebra_Tooltips

A lightweight, highly-configurable jQuery plugin for creating simple but smart and visually...

jQuery Nice file Input

The jQuery Nice File Input Plugin provides batter looking file input HTML element, while making...

easing – easing functions for jQuery or standalone

Easing function for use with or without jQuery. In addition to the standard list of easing...

International Telephone Input

A jQuery plugin for entering international telephone numbers

A very light weight(2.5kb minified) modal window plugin which suits your basic needs.

modalBox.js is a very light weight modal window plugin packed with only most used features and...

Fotorama

A simple, stunning, powerful jQuery gallery.

plainModal

The simple jQuery Plugin for customizable modal windows.

jQuery PieTimer

A CSS3-based pie timer.

Zebra_Pin

A lightweight jQuery plugin for pinning any element to the page or to a container element

Rangy Inputs

jQuery plug-in for selection and caret manipulation within textareas and text inputs.

jQuery Number Format

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

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

jQuery Fullscreen

jQuery Fullscreen plugin allows you to open any element on a page in fullscreen mode without...

Bootstrap Tags Input

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

Responsive Carousel

Simple and friendly responsive carousel plugin for jQuery. This library accept any type of...

aciTree – A customizable treeview control

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

Mobiscroll Image & Text Scroller

Renders a scrollable list of images with or without optional text for easy data picking on touch...

jQuery Super Labels

Give your forms a helping of awesome!

jQuery UI Size Effect

Resize an element to a specified width and height.

Parallax ImageScroll

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects when...

jQuery.popLockIt

A jQuery plugin for 'locking' short content in place as the user scrolls by longer content. For...

WysiBB – Wysiwyg BBcode editor

Wysiwyg BBcode editor based on jQuery

TimeTo

Timer countdown digital clock

blueimp Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel...

Easy responsive tabs to accordion

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

ImgAreaSelect – image selection/cropping plugin

ImgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers...

jQuery Gridly

Gridly is a jQuery plugin that allows for dragging and dropping as well as resizing.

Alpaca Forms

Easy Forms Engine for jQuery / Bootstrap.

jQuery Form – Fancy Web Form Designer

Formoid - Super Easy jQuery Contact Forms, Online Email Form Maker. * Easy - Build any type of...

perfect-scrollbar

Tiny but perfect jquery scrollbar plugin.

BootStrap Maxlength

jQuery and Bootstrap plugin for character count on inputs

jQuery Lifestream

Show a stream of your online activity with jQuery
good