Autocomplete Like Google

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