$('input').glDatePicker(
{
// Style to use for the calendar. This name must match the name used in
// the stylesheet, using the class naming convention "gldp-cssName".
cssName: 'default',
// The z-index for the calendar control.
zIndex: 1000,
// Thickness of border (in pixels)
borderSize: 1,
// The number of pixels to offset the calendar's position on the page.
calendarOffset: { x: 0, y: 1 },
// Set to true if you want the calendar to be visible at all times.
// NOTE: If your target element is hidden, the calendar will be hidden as well.
showAlways: false,
// Hide the calendar when a date is selected (only if showAlways is set to false).
hideOnClick: true,
// Allow selection of months by clicking on the month in the title.
allowMonthSelect: true,
// Allow selection of years by clicking on the year in the title.
allowYearSelect: true,
// The date that will be treated as 'today'.
todayDate: new Date(),
// The date that will appear selected when the calendar renders.
// By default it will be set to todayDate.
selectedDate: null,
// Arrows used for the Previous and Next month buttons on the title.
// Set these to blank to hide the arrows completely.
prevArrow: '\u25c4',
nextArrow: '\u25ba',
// A collection of dates that can be selectable by the user.
// The dates can be a one-time selection or made repeatable by setting
// the repeatYear or repeatMonth flag to true.
// By default repeatYear and repeatMonth are false.
//
// This example creates 4-individual dates that can be selected;
// The first date will repeat every year, the second date will repeat every
// month and year, the third date will repeat every month and the fourth date
// will only be selectable one-time and not repeat:
//
// selectableDates: [
// { date: new Date(0, 8, 5), repeatYear: true },
// { date: new Date(0, 0, 14), repeatMonth: true, repeatYear: true },
// { date: new Date(2013, 0, 24), repeatMonth: true },
// { date: new Date(2013, 11, 25) },
// ]
selectableDates: null,
// A collection of date ranges that are selectable by the user.
// The ranges can be made to repeat by setting repeatYear to true
// (repeatMonth is not supported).
//
// This example will create 3-sets of selectable date ranges with
// specific from and to ranges. The 4th and 5th ranges don't specify
// the "to" date in which case the "to" date will be the maximum days for
// the month specified in "from". The 4th and 5th ranges also repeat every year:
//
// selectableDateRange: [
// { from: new Date(2013, 1, 1), to: newDate (2013, 2, 1) },
// { from: new Date(2013, 4, 1), to: newDate (2013, 8, 1) },
// { from: new Date(2013, 7, 10), to: newDate (2013, 9, 10) },
// { from: new Date(0, 8, 10), repeatYear: true }
// { from: new Date(0, 9, 1), repeatYear: true }
// ]
selectableDateRange: null,
// Mark certain dates as special dates. Similar to selectableDates, this
// property supports both repeatYear and repeatMonth flags.
// Each special date can be styled using custom style names and can have
// data attached to it that will be returned in the onClick callback.
// The data field can be any custom (JSON style) object.
//
// This example creates two (repeatable by year) dates with special data in them.
// The first date also assigns a special class (which you will have to define).
// specialDates: [
// {
// date: new Date(0, 8, 5),
// data: { message: 'Happy Birthday!' },
// repeatYear: true,
// cssClass: 'special-bday'
// },
// {
// date: new Date(2013, 0, 8),
// data: { message: 'Meeting every day 8 of the month' },
// repeatMonth: true
// }
// ]
specialDates: null,
// List of months that can be selectable, including when the user clicks
// on the title to select from the dropdown.
// This example only makes two months visible; September and December:
// selectableMonths: [8, 11]
selectableMonths : null,
// List of selectable years. If not provided, will default to 5-years
// back and forward.
// This example only allows selection of dates that have year 2012, 2013, 2015
// selectableYears: [2012, 2013, 2015]
selectableYears: null,
// List of selectable days of the week. 0 is Sunday, 1 is Monday, and so on.
// This example allows only Sunday, Tuesday, Thursday:
// selectableDOW: [0, 2, 4]
selectableDOW : null,
// Names of the month that will be shown in the title.
// Will default to long-form names:
// January, February, March, April, May, June, July,
// August, September, October, November, December
monthNames: null,
// Names of the days of the Week that will be shown below the title.
// Will default to short-form names:
// Sun, Mon, Tue, Wed, Thu, Fri, Sat
dowNames: null,
// The day of the week to start the calendar on. 0 is Sunday, 1 is Monday and so on.
dowOffset: 0,
// Callback that will trigger when the user clicks a selectable date.
// Parameters that are passed to the callback:
// el : The input element the date picker is bound to
// cell : The cell on the calendar that triggered this event
// date : The date associated with the cell
// data : Special data associated with the cell (if available, otherwise, null)
onClick: (function(el, cell, date, data) {
el.val(date.toLocaleDateString());
}),
// Callback that will trigger when the user hovers over a selectable date.
// This callback receives the same set of parameters as onClick.
onHover: function(el, cell, date, data) {},
// Callback that will trigger when the calendar needs to show.
// You can use this callback to animate the opening of the calendar.
onShow: function(calendar) { calendar.show(); },
// Callback that will trigger when the calendar needs to hide.
// You can use this callback to animate the hiding of the calendar.
onHide: function(calendar) { calendar.hide(); }
});