Autocomplete Like Google
copysite.v.3

PeriodPicker jQuery plugin select range dates

Perfect period picker for CMS or CRM

   Buy and Download Bug Tracker
or datetimepicker
with clear button
Compact mode
like datetimepicker mode
Inline mode


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

Name Descr
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