Period Selector

Period Selector is a visual element to select a single month or year.

It simplifies selecting a predefined month or year just by a single click.

Period Selector is a visual element to select a single month or year.

It simplifies selecting a predefined month or year just by a single click.

Period Selector is a simple library for selecting a single year or month amoung some predefined ranges. It's useful to filter a set of items based on the time. You can add any number of this Facebook like component to your page as you need.

The following features are included in Period Selector:

Facebook Period Selector like
Multiple plugin in a single page
Separated onYearClick and onMonthClick events
Auto arange years and months based on input dates
Smooth expand and collapse

Step 1:

Pack Your Bags

Download Period Selector
Add the following markup to your document <head> and you’ll have everything you need to put Period selector on your page.

	
/* Attach the Period Selector CSS file */
<link rel=" stylesheet" type="text/css" href="css/tinytools.periodselector.min.css">
/* jQuery needs to be attached */
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/* Then attach the Period Selector plugin */
<script src="tinytools.periodselector.min.js"></script>

Step 2:

Define Period Selector container

The container can be a div element. Optionally, you can add an id attribute to the element to use as the jQuery selector:

	
<div id="PeriodSelectorContainer"></div>

Step 3:

Start The Engine

To activate the Period Selector, start the engine by including the code below in the ready event of the page document:

	
<script>
	$(document).ready(function () {
		$("#PeriodSelectorContainer").periodSelector({
			onMonthClick: function (month) { console.log(month); },
			onYearClick: function (year) { console.log(year); },
			months: [{ year: 2013, month: 12 },
				{ year: 2014, month: 8 },
				{ year: 2013, month: 5 },
				{ year: 2012, month: 1 },
				{ year: 2012, month: 2 },
				{ year: 2012, month: 2 }]
		});
	});
</script>

Optional Parameters

Property	Default	Description
onYearClick	false	Callback that fires after clicking on a year. Parameters: 1- Year, 2- Caller
onMonthClick	false	Callback that fires after clicking on a month. Parameters: 1- mounth, 2- Year, 3- Caller
months	{}	An array of a double-property object containing the "month" and "year" values which have to be selected using the plugin.