jdPicker - the ultimate jQuery date picker

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.jdpicker.js"></script>
<link rel="stylesheet" href="jdpicker.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 date picker :

Automatic setup

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

<input type="text" name="your_input" class="jdpicker" />
<input type="hidden" name="your_input_2" class="jdpicker" />

The first input (the text one) will be transformed into a text input that triggers the calendar on focus. The second one (hidden one) will be transformed into an inline calendar.

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').jdPicker();
});

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').jdPicker({
      start_of_week:2,
      show_week:1
   });
});

Initialisation options

Before talking about actual options, there are two behaviours that you must know :

Setting a preloaded date

If you want to set a date as the default one to show when the calendar is first poped-out, just set it as the value of your HTML field respecting the specified date_format.

Display an inline calendar

If for some reason you need to show the calendar as an inline element rather than as a dropdown menu, use a hidden input.

The (many many) 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_month_names

short_month_names works the same way as onth_names but with its content being the short version of the month names. Starting from Jan to Dec.

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.

error_out_of_range

This option contains the message to display the user when he tries to selecte a date that is either inferior to the date_min or superior to the date_max.

week_label

Select the label of the week number column if enabled. If show_week is set to 0, this option is useless...

Selectable days

selectable_days

Specify, as a javascript array the days that the user can select. You must specify the days as the Date object takes them : 0 for Sunday, 1 for Monday, ...

non_selectable

An array of the date you don't want your user to select. The format must be the same as the one used by the date input plugin and specified by the date_format optipon ("YYYY/mm/dd" by default). It can be used to forbid users from selecting holiday dates for instance.

rec_non_selectable

Same thing as non_selectable except this one only needs the month and the day to work for every year. It can be used to forbid users from selecting the 1st of january every year for instance : "01/01".

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.

show_week

Wether or not to show the week numbers on the left side of the calendar. Takes a binary : 0 for no, 1 for yes.

General options

select_week

Forces the user to select a whole week. If this option is set to 1 (true), the date returned will be the first day of the week.

date_format

Specifies the date format to use for the whole instance. Changing this option will affect non_selectable, rec_non_selectable, date_min and date_max. The available options are (example of the 23rd of january 2010) :

You can modify or add some new options by editing the switch located between lines 71 and 109. You just need to use a few regexp and some brain cells !

...

Original project by Jonathan Leighton
-
Fresh updates by Paul Da Silva

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