Best Period Picker

License

Go Back

This license is a legal agreement between you and XDSoft.net for the use of PeriodPicker (*all versions*) Software (the "Software"). By downloading any version of the Software you agree to be bound by the terms and conditions of this license. XDSoft.net reserves the right to alter this agreement at any time, for any reason, without notice.

Revised on: August 24, 2015

PeriodPicker Installations

A PeriodPicker Professional License & OEM License purchases allow a multiple "live" installation in a production environment and ancillary "development use only" installations as needed to support the live installation (such as development and a staging servers). Additional installations do not require additional license purchases. If you have specific installation needs not covered by this license, please contact us: chupurnov@gmail.com.

Permitted Use

PeriodPicker License:

  • Basic License: Holder of the Basic License may use the Software personally or allow use of the Software to their colleagues, clients and users on a single domain with unlimited subdomains (*.domain.com) engaging a commercial, for-profit or non-for-profit activities. Websites engaging in direct, or indirect commercial activities must purchase a Basic License. Users of the Basic License may include the Software in their projects, products, widgets, extensions, or use in other fair way while developing other products (according to Restrictions below). The Basic License does not allow integration of the Software with open source products with exception to add-ons, extensions and plugins sold or distributed separately from the open source software. The Basic License allows license holder’s products to be sold or distributed otherwise to the end users only, and not to the developers or vendors, who do not intend to use the Software for actual text editing, but plan to modify and redistribute it to the end user. In case the License holder sell or otherwise distribute the Software to the developers and not to the end users, the License Holder must advise the developers that the developers must purchase their own license in order to use the Software. No technical support whatsoever will be provided for the Basic License holders.
  • Professional License: Holder of the Professional License may use the Software personally or allow use of the Software to their colleagues, clients and users on an unlimited websites engaging a commercial, for-profit or non-for-profit activities. Websites engaging in direct, or indirect commercial activities must purchase a Professional License. Users of the Professional License may include the Software in their projects, products, widgets, extensions, or use in other fair way while developing other products (according to Restrictions below). The Professional License does not allow integration of the Software with open source products with exception to add-ons, extensions and plugins sold or distributed separately from the open source software. The Professional License allows license holder’s products to be sold or distributed otherwise to the end users only, and not to the developers or vendors, who don’t intend to use the Software for actual text editing, but plan to modify and redistribute it to the end user. In case the License holder sell or otherwise distribute the Software to the developers and not to the end users, the License Holder must advise the developers that the developers must purchase their own license in order to use the Software. Support for the holders of the Professional License is limited to one year from the date of purchase.
  • The OEM License: Holders of the OEM License may use the Software as if they had the Professional license. In addition, OEM License holders are allowed to sell or otherwise distribute the Software to the developers and not only to the end users. The OEM license allows license holder’s clients to develop their own products based on or containing Software. The OEM License holder’s clients do not have to obtain their own Professional or OEM license. The OEM License holders are allowed to integrate the Software with open source products. However, neither license holder nor license holder’s clients can sell PeriodPicker as a sole product (with or without modification); License holder and license holder’s clients should use it fairly; XDSoft.net still holds all the copyrights for Software code, Software code does not become open source, and we solely determine "fair use" of the Software. Support for the holders of the OEM License is limited to one year from the date of purchase.

XDSoft.net will be the sole arbiter as to what constitutes commercial activities and fair use.

Restrictions

Unless you have been granted prior, written consent from XDSoft.net, you may not:

  • Reproduce, distribute, or transfer the Software as a sole product, or portions thereof, to any third party.
  • Sell, rent, lease, assign, or sublet the Software as a sole product or portions thereof.
  • Grant rights to any other person.
  • Use the software in violation of any United States or international laws or regulations.

Display of Copyright Notices

All copyright and proprietary notices and logos (if any) of PeriodPicker and/or XDSoft.net within the Software files must remain intact.

Making Copies

You may make copies of the Software for back-up purposes, provided that you reproduce the Software in its original form and with all proprietary notices on the back-up copy. You may include copies of the Software as an integral part of your product (according to Permitted Use stated above).

Software Modification

You may alter, modify, or extend the Software for your own use or for use in as an integral part of your product or service, or commission a third-party to perform modifications for you, but you may not resell, redistribute or transfer the modified or derivative version of the Software as a sole product without prior written consent from XDSoft.net. Components from the Software may not be extracted and used in other programs without prior written consent from XDSoft.net.

Technical Support

Technical support is provided by email only. No representations or guarantees are made regarding the response itself or response time in which support questions are answered. Support service is limited to Bug reports (clients may report malfunctions they have found), Feature Suggestions (clients may suggest a feature to be added to the Software in the future) and Help Requests (clients require help with the Software). For the Bug Reports and Feature Suggestions we reserve the right to solely determine best course of action: we can accept, decline or postpone any work in regards of received Bug Reports or Feature Suggestion. We give no guarantee whatsoever that we will fix any particular malfunction and we reserve the right to determine whether Reported Bug is a malfunction or not. We don’t give any guarantee whatsoever that we will implement any of Suggested Features. We guarantee response to Help request (usually within two business days), but under no circumstances do we guarantee this time frame for all requests. We do, however, aim to provide the best support service possible, and in most cases it takes less time to hear back from us when you need help.

Refund Policy

We offer a 30 day money back guarantee. If for any reason PeriodPicker doesn’t work out for your project, simply email us within 30 days of purchase for a full refund.

Indemnity

You agree to indemnify and hold harmless XDSoft.net for any third-party claims, actions or suits, as well as any related expenses, liabilities, damages, settlements or fees arising from your use or misuse of the Software, or a violation of any terms of this license.

Disclaimer Of Warranty

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF QUALITY, PERFORMANCE, NON-INFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE. FURTHER, XDSoft.net DOES NOT WARRANT THAT THE SOFTWARE OR ANY RELATED SERVICE WILL ALWAYS BE AVAILABLE.

Limitations Of Liability

YOU ASSUME ALL RISK ASSOCIATED WITH THE INSTALLATION AND USE OF THE SOFTWARE. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS OF THE SOFTWARE BE LIABLE FOR CLAIMS, DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE. LICENSE HOLDERS ARE SOLELY RESPONSIBLE FOR DETERMINING THE APPROPRIATENESS OF USE AND ASSUME ALL RISKS ASSOCIATED WITH ITS USE, INCLUDING BUT NOT LIMITED TO THE RISKS OF PROGRAM ERRORS, DAMAGE TO EQUIPMENT, LOSS OF DATA OR SOFTWARE PROGRAMS, OR UNAVAILABILITY OR INTERRUPTION OF OPERATIONS.

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

Another Calendar Popup plugin

Try another perfect datetime picker

Simple Date Time Picker

Only Date Picker

Hide buttons

Only timepicker

Buy   Read more ...


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

Added buttonClassSuffix option

Fix a bug in the cleanup button, when after cleaning the picker was opened

Added events onChange and onChangePeriod

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.
buttonClassSuffix "" Add class to main button {buttonClassSuffix: " btn btn-primary"}
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;
}}
onChange Fired when user change picker's value

Example

{onChange: function () {
    $('form').submit()
}}
onChangePeriod Fired when user select or change period picker's value

Example

{onChangePeriod: function () {
    $('form').submit()
}}

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

 

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
comments powered by Disqus