Period Picker - a easy to use jQuery period picker plugin

To use this plugin you will need to add two to three lines to the <head> markup depending on wether you already use jQuery or not :

<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="jquery.period_picker.js"></script>
<link rel="stylesheet" href="period_picker.css" type="text/css" media="screen" />

That being done (with the correct paths to the different files) you have two ways to create a new period picker :

Automatic setup

To add the plugin to a field with default options just use the class «period_picker» :

<input type="text" name="your_input" class="period_picker" />

Manual setup

You can also set a date input on the field whose id is «your_input_3» by using the following javascript instructions :

$(document).ready(function(){
   $('#your_input_3').Period_picker();
});

It's by using this method that you can provide the input by different options than the default ones :

$(document).ready(function(){
   $('#your_input_3').Period_picker({
      start_of_week:2,
      date_min:''
   });
});

Initialisation options

Before talking about actual options, there is something you might need :

Setting a preloaded period

If you want to set a period as the default one to show when the pannel is first poped-out, just set the two dates, space separated, as the value of your HTML field respecting the specified date_format.

The (few) options

Language options

month_names

month_names takes a javascript array containing the month names (who would have guessed ?) starting from January to end in December.

short_day_names

short_day_names takes a javascript array of the day names shortened to one to three caracters (for display purposes). Starting on sunday.

Selectable days

date_min

Specify the minimum date to fill in. If the user tries to go further in the past an error will be shown. Must use the specified date_format.

date_max

Specify the maximum date to fill in. If the user tries to go further in the future an error will be shown. Must use the specified date_format.

Display options

start_of_week

Select the day to start the week from. Default option is Monday (1), but you can start a week on Friday if you want to (who am i to judge ?) by setting this option to 5.

...

Based upon Jonathan Leighton's date input
-
Fresh updates by Paul Da Silva

-
Bitcoin debit card - Promo code Genesis Mining - Gaz moins cher - Relationship closeness inventory - Coolwraps