An ultra-simple, customizable,
light-weight date picker plug-in
for jQuery
at just over
7KB compressed or
25KB uncompressed.
<!DOCTYPE html>
<html>
<head>
<link href="styles/glDatePicker.default.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="text" id="mydate" />
<body>
<input type="text" id="mydate" gldp-id="mydate" />
<div gldp-el="mydate"
style="width:400px; height:300px; position:absolute; top:70px; left:100px;">
</div>
$(function() {...}); or inside $(document).ready(function() {...}); however depending
on your site's layout, the calendar may not position correctly. For most situations, consider attaching in $(window).load.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="glDatePicker.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$('input').glDatePicker();
});
</script>
</body>
</html>
$('example1').glDatePicker();
$('#example2').glDatePicker(
{
showAlways: true,
allowMonthSelect: false,
allowYearSelect: false,
prevArrow: '',
nextArrow: '',
selectedDate: new Date(2013, 8, 5),
selectableDateRange: [
{ from: new Date(2013, 8, 1),
to: new Date(2013, 8, 10) },
{ from: new Date(2013, 8, 19),
to: new Date(2013, 8, 22) },
],
selectableDates: [
{ date: new Date(2013, 8, 24) },
{ date: new Date(2013, 8, 30) }
]
});
$('#example3').glDatePicker(
{
showAlways: true,
cssName: 'darkneon',
selectedDate: new Date(2013, 0, 5),
specialDates: [
{
date: new Date(2013, 0, 8),
data: { message: 'Meeting every day 8 of the month' },
repeatMonth: true
},
{
date: new Date(0, 0, 1),
data: { message: 'Happy New Year!' },
repeatYear: true
},
],
onClick: function(target, cell, date, data) {
target.val(date.getFullYear() + ' - ' +
date.getMonth() + ' - ' +
date.getDate());
if(data != null) {
alert(data.message + '\n' + date);
}
}
});
$('#example4').glDatePicker(
{
showAlways: true,
selectedDate: new Date(2013, 8, 5),
dowOffset: 3,
selectableYears: [2012, 2013, 2014],
selectableMonths: [8, 11],
selectableDOW: [1, 4, 6]
});
// Doing it in a single pass
var myDatePicker = $('#example1').glDatePicker(
{
showAlways: true,
selectableDOW: [0, 2, 3]
}).glDatePicker(true);
// Or you can do it with multiple calls
$('example1').glDatePicker(
{
showAlways: true,
selectableDOW: [0, 2, 3]
});
var myDatePicker = $('example1').glDatePicker(true);
// This example updates some options (calling render will re-generate the calendar)
$.extend(myDatePicker.options,
{
cssName: 'darkneon',
allowMonthSelect: false,
allowYearSelect: false
});
myDatePicker.render();
// If the calendar is not set to showAlways=true, you can force it to show by calling the show() function
myDatePicker.show();
$('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(); }
});