glDatePicker is a simple, customizable, lightweight date picker calendar plugin for jQuery weighing in 4KB compressed (11KB uncompressed).
It includes the following features:
forward and backward navigation
current date highlight
restricting selection of dates outside of a range
restricting selection of dates beyond N-days from start date
restricting forward / backwards month navigation
individual styles per date picker (in case you have multiples on one page)
show currently selected date
examples
Click on the text boxes to see examples of the control with the settings shown.
Example #1: Basic usage
// Basic date picker with default settings
$("#date1").glDatePicker();
Example #2: Use a custom styled date picker (only for this control)
// Use a custom theme named android
$("#date2").glDatePicker(
{
cssName: "android",
selectedDate: 5
});
Example #3: Restricting selection to a specific date
// Set the last selectable date to September 5, 2011
$("#date3").glDatePicker(
{
endDate: new Date("September 5, 2011")
});
Example #4: Restricting selection of dates N-days from start date
// Set last selectable date to start date + 5-days, prevent old date selection
// and set selected date to 3-days from start date
$("#date4").glDatePicker(
{
endDate: 5,
startDate: new Date("September 5, 2011"),
selectedDate: 3,
allowOld: false
});
Example #5: Hide prev/next arrows and prevent old dates selections
// Hide prev/next buttons and prevent selection of dates older than today
$("#date5").glDatePicker(
{
showPrevNext: false,
allowOld: false,
startDate: new Date()
});
Example #6: Using a custom callback to show date in a different format
Below are all the available settings that can be adjusted and public methods that can be called.
The values shown are the default setting values.
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Settings
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
$("#date").glDatePicker(
{
// Name of the stylesheet to use.
// For example, if your css name is called doublerainbow
// then all all your css elements will need to be
// prefixed with .gldp-doublerainbow in your stylesheet.
// Use the /css/default.css as a starting point.
cssName: "default",
// Set starting date.
// NOTE: Consider setting allowOld to false to make the startDate the
// first date that can be selected.
// Possible values:
// -1 : Use beginning of current month
// Date() : A javascript date, for example: new Date("September 5, 2011")
startDate: -1,
// Set last selectable date. Can be an actual date or a number indicating
// offset from the startDate value.
// Possible values:
// -1 : No end date
// +ve : A positive number indicating # of days from startDate
// Date() : A javascript date, for example: new Date("September 5, 2011")
endDate: -1,
// Set the currently selected date. Can be an actual date or a number indicating
// offset from the startDate value.
// Possible values:
// -1 : No selected date
// +ve : A positive number indicating # of days from startDate
// Date() : A javascript date, for example: new Date("September 5, 2011")
selectedDate: -1,
// Show previous and next arrows. Arrows will be automatically shown or
// hidden if set to true. Set to false to force it never show.
// Possible values: true | false
showPrevNext: true,
// Allow selection of dates older than startDate if set to true.
// Possible values: true | false
allowOld: true,
// Show the calendar at all times if set to true.
// NOTE: Consider using position: "inherit" if you set this to true.
// Possible values: true | false
showAlways: false,
// Set how calendar will appear positioned on the page.
// Note: If you are using showAlways: true, then consider
// setting the position to inherit
// Possible values: static | absolute | fixed | relative | inherit
position: "absolute",
// A callback function to call when a date has been selected.
// Possible values: a function with two arguments: target, newDate
// For example:
// $("#date").glDatePicker(
// {
// onChange: function(target, newDate)
// {
// target.val
// (
// newDate.getFullYear() + "-" +
// (newDate.getMonth() + 1) + "-" +
// newDate.getDate()
// );
// }
// });
onChange: null
});
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Public methods
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
// Set a new start date
$("#date").glDatePicker("setStartDate", new Date("September 5, 2011"));
// Set a new end date
$("#date").glDatePicker("setEndDate", new Date("September 5, 2011"));
// Set a new selected date
$("#date").glDatePicker("setSelectedDate", new Date("September 5, 2011"));
