Set focus in next control on enter in PHP,ASP.NET,JSP,SERVLETS.
Download latest jQuery and apply listed below code in your web page.
<script language="javascript" src="../js/jquery-1.6.js" type="text/javascript"></script>
<input type="text" name="t1" id="t1" onkeyup="javascript: if(setFocusNext(event)) $('#t2').focus();" />
<br/>
<input type="text" name="t2" id="t2" onkeyup="javascript: if(setFocusNext(event)) $('#t3').focus();" />
<br/>
<input type="text" name="t3" id="t3" />
<script type="text/javascript">
function setFocusNext(e){
var cd=0;
if(window.event) {
cd = e.keyCode;
} else if(e.which) {
cd = e.which;
}
if(cd==13) {
return true;
} else {
return false;
}
}
</script>
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
Monday, June 6, 2011
Thursday, September 16, 2010
how to use noConflict in jQuery
how to use noConflict in jQuery
var $j = jQuery.noConflict();
$j('#idOfElement').methodName();
var $j = jQuery.noConflict();
$j('#idOfElement').methodName();
Wednesday, August 11, 2010
Check if an element exists in jQuery
Check if an element exists in jQuery
Some times you need to check element in jQuery that is it exists or not
you can use listed below code:
if ($('#txtID).length) {
// put here your code
}
Some times you need to check element in jQuery that is it exists or not
you can use listed below code:
if ($('#txtID).length) {
// put here your code
}
Wednesday, July 21, 2010
event delegation in jQuery
event delegation in jQuery
$("#btnId").click(function(){
// put your code here ;
});
$("#btnId").click(function(){
// put your code here ;
});
Monday, March 15, 2010
A simple jQuery date picker
A simple jQuery date picker
download latest version of jquery.js file from jquery site.
and copy listed below code:
index.html
=========================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>A Simple jQuery Datepicker</title>
<style type="text/css">
@import "css/jquery.datepick.css";
</style>
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
$('#myDate').datepick({dateFormat: 'mm-dd-yyyy'});
});
</script>
</head>
<body>
<p>Select date:<input type="text" id="myDate"></p>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jquery.datepick.css
============================
.datepick {
background-color: #fff;
color: #000;
border: 1px solid #444;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-family: Arial,Helvetica,Sans-serif;
font-size: 90%;
}
.datepick-rtl {
direction: rtl;
}
.datepick-popup {
z-index: 1000;
}
.datepick-disable {
position: absolute;
z-index: 100;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
}
.datepick a {
color: #fff;
text-decoration: none;
}
.datepick a.datepick-disabled {
color: #888;
cursor: auto;
}
.datepick button {
margin: 0.25em;
padding: 0.125em 0em;
background-color: #fcc;
border: none;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
float: left;
width: 100%;
background-color: #000;
color: #fff;
font-size: 90%;
font-weight: bold;
}
.datepick-ctrl {
background-color: #600;
}
.datepick-cmd {
width: 30%;
}
.datepick-cmd:hover {
background-color: #777;
}
.datepick-ctrl .datepick-cmd:hover {
background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
width: 8%;
}
a.datepick-cmd {
height: 1.5em;
}
button.datepick-cmd {
text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
float: left;
padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
float: left;
width: 35%;
text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
float: right;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
float: right;
padding-left: 0%;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today {
float: right;
}
.datepick-rtl .datepick-cmd-next, .datepick-rtl .datepick-cmd-nextJump,
.datepick-rtl .datepick-cmd-close {
float: left;
padding-left: 2%;
padding-right: 0%;
text-align: left;
}
.datepick-month-nav {
float: left;
background-color: #777;
text-align: center;
}
.datepick-month-nav div {
float: left;
width: 12.5%;
margin: 1%;
padding: 1%;
}
.datepick-month-nav span {
color: #888;
}
.datepick-month-row {
clear: left;
}
.datepick-month {
float: left;
width: 15em;
border: 1px solid #444;
text-align: center;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
height: 1.5em;
background-color: #444;
color: #fff;
font-weight: bold;
}
.datepick-month-header select, .datepick-month-header input {
height: 1.4em;
border: none;
}
.datepick-month-header input {
position: absolute;
display: none;
}
.datepick-month table {
width: 100%;
border-collapse: collapse;
}
.datepick-month thead {
border-bottom: 1px solid #aaa;
}
.datepick-month th, .datepick-month td {
margin: 0em;
padding: 0em;
font-weight: normal;
text-align: center;
}
.datepick-month th {
border: 1px solid #777;
}
.datepick-month th, .datepick-month th a {
background-color: #777;
color: #fff;
}
.datepick-month td {
background-color: #eee;
border: 1px solid #aaa;
}
.datepick-month td.datepick-week {
border: 1px solid #777;
}
.datepick-month td.datepick-week * {
background-color: #777;
color: #fff;
border: none;
}
.datepick-month a {
display: block;
width: 100%;
padding: 0.125em 0em;
background-color: #eee;
color: #000;
text-decoration: none;
}
.datepick-month span {
display: block;
width: 100%;
padding: 0.125em 0em;
}
.datepick-month td span {
color: #888;
}
.datepick-month td .datepick-other-month {
background-color: #fff;
}
.datepick-month td .datepick-weekend {
background-color: #ddd;
}
.datepick-month td .datepick-today {
background-color: #f0c0c0;
}
.datepick-month td .datepick-highlight {
background-color: #f08080;
}
.datepick-month td .datepick-selected {
background-color: #777;
color: #fff;
}
.datepick-month th.datepick-week {
background-color: #777;
color: #fff;
}
.datepick-status {
clear: both;
background-color: #ddd;
text-align: center;
}
.datepick-clear-fix {
clear: both;
}
.datepick-cover {
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -1px;
left: -1px;
width: 100px;
height: 100px;
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jquery.datepick.js
============================
// for more see http://keith-wood.name/datepick.html
(function($) { // Hide scope, no $ conflict
/* Datepicker manager. */
function Datepicker() {
this._defaults = {
pickerClass: '', // CSS class to add to this instance of the datepicker
showOnFocus: true, // True for popup on focus, false for not
showTrigger: null, // Element to be cloned for a trigger, null for none
showAnim: 'show', // Name of jQuery animation for popup, '' for no animation
showOptions: {}, // Options for enhanced animations
showSpeed: 'normal', // Duration of display/closure
popupContainer: null, // The element to which a popup calendar is added, null for body
alignment: 'bottom', // Alignment of popup - with nominated corner of input:
// 'top' or 'bottom' aligns depending on language direction,
// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
fixedWeeks: false, // True to always show 6 weeks, false to only show as many as are needed
firstDay: 0, // First day of the week, 0 = Sunday, 1 = Monday, ...
calculateWeek: this.iso8601Week, // Calculate week of the year from a date, null for ISO8601
monthsToShow: 1, // How many months to show, cols or [rows, cols]
monthsOffset: 0, // How many months to offset the primary month by;
// may be a function that takes the date and returns the offset
monthsToStep: 1, // How many months to move when prev/next clicked
monthsToJump: 12, // How many months to move when large prev/next clicked
useMouseWheel: true, // True to use mousewheel if available, false to never use it
changeMonth: true, // True to change month/year via drop-down, false for navigation only
yearRange: 'c-10:c+10', // Range of years to show in drop-down: 'any' for direct text entry
// or 'start:end', where start/end are '+-nn' for relative to today
// or 'c+-nn' for relative to the currently selected date
// or 'nnnn' for an absolute year
shortYearCutoff: '+10', // Cutoff for two-digit year in the current century
showOtherMonths: false, // True to show dates from other months, false to not show them
selectOtherMonths: false, // True to allow selection of dates from other months too
defaultDate: null, // Date to show if no other selected
selectDefaultDate: false, // True to pre-select the default date if no other is chosen
minDate: null, // The minimum selectable date
maxDate: null, // The maximum selectable date
dateFormat: 'mm/dd/yyyy', // Format for dates
autoSize: false, // True to size the input field according to the date format
rangeSelect: false, // Allows for selecting a date range on one date picker
rangeSeparator: ' - ', // Text between two dates in a range
multiSelect: 0, // Maximum number of selectable dates, zero for single select
multiSeparator: ',', // Text between multiple dates
onDate: null, // Callback as a date is added to the datepicker
onShow: null, // Callback just before a datepicker is shown
onChangeMonthYear: null, // Callback when a new month/year is selected
onSelect: null, // Callback when a date is selected
onClose: null, // Callback when a datepicker is closed
altField: null, // Alternate field to update in synch with the datepicker
altFormat: null, // Date format for alternate field, defaults to dateFormat
constrainInput: true, // True to constrain typed input to dateFormat allowed characters
commandsAsDateFormat: false, // True to apply formatDate to the command texts
commands: this.commands // Command actions that may be added to a layout by name
};
this.regional = {
'': { // US/English
monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
dateFormat: 'mm/dd/yyyy', // See options on formatDate
firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
renderer: this.defaultRenderer, // The rendering templates
prevText: '<Prev', // Text for the previous month command
prevStatus: 'Show the previous month', // Status text for the previous month command
prevJumpText: '<<', // Text for the previous year command
prevJumpStatus: 'Show the previous year', // Status text for the previous year command
nextText: 'Next>', // Text for the next month command
nextStatus: 'Show the next month', // Status text for the next month command
nextJumpText: '>>', // Text for the next year command
nextJumpStatus: 'Show the next year', // Status text for the next year command
currentText: 'Current', // Text for the current month command
currentStatus: 'Show the current month', // Status text for the current month command
todayText: 'Today', // Text for the today's month command
todayStatus: 'Show today\'s month', // Status text for the today's month command
clearText: 'Clear', // Text for the clear command
clearStatus: 'Clear all the dates', // Status text for the clear command
closeText: 'Close', // Text for the close command
closeStatus: 'Close the datepicker', // Status text for the close command
yearStatus: 'Change the year', // Status text for year selection
monthStatus: 'Change the month', // Status text for month selection
weekText: 'Wk', // Text for week of the year column header
weekStatus: 'Week of the year', // Status text for week of the year column header
dayStatus: 'Select DD, M d, yyyy', // Status text for selectable days
defaultStatus: 'Select a date', // Status text shown by default
isRTL: false // True if language is right-to-left
}};
$.extend(this._defaults, this.regional['']);
this._disabled = [];
}
$.extend(Datepicker.prototype, {
dataName: 'datepick',
/* Class name added to elements to indicate already configured with datepicker. */
markerClass: 'hasDatepick',
_popupClass: 'datepick-popup', // Marker for popup division
_triggerClass: 'datepick-trigger', // Marker for trigger element
_disableClass: 'datepick-disable', // Marker for disabled element
_coverClass: 'datepick-cover', // Marker for iframe backing element
_monthYearClass: 'datepick-month-year', // Marker for month/year inputs
_curMonthClass: 'datepick-month-', // Marker for current month/year
_anyYearClass: 'datepick-any-year', // Marker for year direct input
_curDoWClass: 'datepick-dow-', // Marker for day of week
commands: { // Command actions that may be added to a layout by name
// name: { // The command name, use '{button:name}' or '{link:name}' in layouts
// text: '', // The field in the regional settings for the displayed text
// status: '', // The field in the regional settings for the status text
// // The keystroke to trigger the action
// keystroke: {keyCode: nn, ctrlKey: boolean, altKey: boolean, shiftKey: boolean},
// enabled: fn, // The function that indicates the command is enabled
// date: fn, // The function to get the date associated with this action
// action: fn} // The function that implements the action
prev: {text: 'prevText', status: 'prevStatus', // Previous month
keystroke: {keyCode: 33}, // Page up
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.day(
$.datepick._applyMonthsOffset($.datepick.add($.datepick.newDate(inst.drawDate),
1 - inst.get('monthsToStep'), 'm'), inst), 1), -1, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), -inst.get('monthsToStep'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, -inst.get('monthsToStep')); }
},
prevJump: {text: 'prevJumpText', status: 'prevJumpStatus', // Previous year
keystroke: {keyCode: 33, ctrlKey: true}, // Ctrl + Page up
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.day(
$.datepick._applyMonthsOffset($.datepick.add($.datepick.newDate(inst.drawDate),
1 - inst.get('monthsToJump'), 'm'), inst), 1), -1, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), -inst.get('monthsToJump'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, -inst.get('monthsToJump')); }
},
next: {text: 'nextText', status: 'nextStatus', // Next month
keystroke: {keyCode: 34}, // Page down
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToStep'), 'm'), inst), 1).
getTime() <= maxDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToStep'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, inst.get('monthsToStep')); }
},
nextJump: {text: 'nextJumpText', status: 'nextJumpStatus', // Next year
keystroke: {keyCode: 34, ctrlKey: true}, // Ctrl + Page down
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToJump'), 'm'), inst), 1).
getTime() <= maxDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToJump'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, inst.get('monthsToJump')); }
},
current: {text: 'currentText', status: 'currentStatus', // Current month
keystroke: {keyCode: 36, ctrlKey: true}, // Ctrl + Home
enabled: function(inst) {
var minDate = inst.curMinDate();
var maxDate = inst.get('maxDate');
var curDate = inst.selectedDates[0] || $.datepick.today();
return (!minDate || curDate.getTime() >= minDate.getTime()) &&
(!maxDate || curDate.getTime() <= maxDate.getTime()); },
date: function(inst) {
return inst.selectedDates[0] || $.datepick.today(); },
action: function(inst) {
var curDate = inst.selectedDates[0] || $.datepick.today();
$.datepick.showMonth(this, curDate.getFullYear(), curDate.getMonth() + 1); }
},
today: {text: 'todayText', status: 'todayStatus', // Today's month
keystroke: {keyCode: 36, ctrlKey: true}, // Ctrl + Home
enabled: function(inst) {
var minDate = inst.curMinDate();
var maxDate = inst.get('maxDate');
return (!minDate || $.datepick.today().getTime() >= minDate.getTime()) &&
(!maxDate || $.datepick.today().getTime() <= maxDate.getTime()); },
date: function(inst) { return $.datepick.today(); },
action: function(inst) { $.datepick.showMonth(this); }
},
clear: {text: 'clearText', status: 'clearStatus', // Clear the datepicker
keystroke: {keyCode: 35, ctrlKey: true}, // Ctrl + End
enabled: function(inst) { return true; },
date: function(inst) { return null; },
action: function(inst) { $.datepick.clear(this); }
},
close: {text: 'closeText', status: 'closeStatus', // Close the datepicker
keystroke: {keyCode: 27}, // Escape
enabled: function(inst) { return true; },
date: function(inst) { return null; },
action: function(inst) { $.datepick.hide(this); }
},
prevWeek: {text: 'prevWeekText', status: 'prevWeekStatus', // Previous week
keystroke: {keyCode: 38, ctrlKey: true}, // Ctrl + Up
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.newDate(inst.drawDate), -7, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), -7, 'd'); },
action: function(inst) { $.datepick.changeDay(this, -7); }
},
prevDay: {text: 'prevDayText', status: 'prevDayStatus', // Previous day
keystroke: {keyCode: 37, ctrlKey: true}, // Ctrl + Left
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.newDate(inst.drawDate), -1, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), -1, 'd'); },
action: function(inst) { $.datepick.changeDay(this, -1); }
},
nextDay: {text: 'nextDayText', status: 'nextDayStatus', // Next day
keystroke: {keyCode: 39, ctrlKey: true}, // Ctrl + Right
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.add($.datepick.newDate(inst.drawDate), 1, 'd').
getTime() <= maxDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), 1, 'd'); },
action: function(inst) { $.datepick.changeDay(this, 1); }
},
nextWeek: {text: 'nextWeekText', status: 'nextWeekStatus', // Next week
keystroke: {keyCode: 40, ctrlKey: true}, // Ctrl + Down
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.add($.datepick.newDate(inst.drawDate), 7, 'd').
getTime() <= maxDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), 7, 'd'); },
action: function(inst) { $.datepick.changeDay(this, 7); }
}
},
/* Default template for generating a datepicker. */
defaultRenderer: {
// Anywhere: '{l10n:name}' to insert localised value for name,
// '{link:name}' to insert a link trigger for command name,
// '{button:name}' to insert a button trigger for command name,
// '{popup:start}...{popup:end}' to mark a section for inclusion in a popup datepicker only,
// '{inline:start}...{inline:end}' to mark a section for inclusion in an inline datepicker only
// Overall structure: '{months}' to insert calendar months
picker: '<div class="datepick">' +
'<div class="datepick-nav">{link:prev}{link:today}{link:next}</div>{months}' +
'{popup:start}<div class="datepick-ctrl">{link:clear}{link:close}</div>{popup:end}' +
'<div class="datepick-clear-fix"></div></div>',
// One row of months: '{months}' to insert calendar months
monthRow: '<div class="datepick-month-row">{months}</div>',
// A single month: '{monthHeader:dateFormat}' to insert the month header -
// dateFormat is optional and defaults to 'MM yyyy',
// '{weekHeader}' to insert a week header, '{weeks}' to insert the month's weeks
month: '<div class="datepick-month"><div class="datepick-month-header">{monthHeader}</div>' +
'<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
// A week header: '{days}' to insert individual day names
weekHeader: '<tr>{days}</tr>',
// Individual day header: '{day}' to insert day name
dayHeader: '<th>{day}</th>',
// One week of the month: '{days}' to insert the week's days, '{weekOfYear}' to insert week of year
week: '<tr>{days}</tr>',
// An individual day: '{day}' to insert day value
day: '<td>{day}</td>',
// jQuery selector, relative to picker, for a single month
monthSelector: '.datepick-month',
// jQuery selector, relative to picker, for individual days
daySelector: 'td',
// Class for right-to-left (RTL) languages
rtlClass: 'datepick-rtl',
// Class for multi-month datepickers
multiClass: 'datepick-multi',
// Class for selectable dates
defaultClass: '',
// Class for currently selected dates
selectedClass: 'datepick-selected',
// Class for highlighted dates
highlightedClass: 'datepick-highlight',
// Class for today
todayClass: 'datepick-today',
// Class for days from other months
otherMonthClass: 'datepick-other-month',
// Class for days on weekends
weekendClass: 'datepick-weekend',
// Class prefix for commands
commandClass: 'datepick-cmd',
// Extra class(es) for commands that are buttons
commandButtonClass: '',
// Extra class(es) for commands that are links
commandLinkClass: '',
// Class for disabled commands
disabledClass: 'datepick-disabled'
},
/* Override the default settings for all datepicker instances.
@param settings (object) the new settings to use as defaults
@return (Datepicker) this object */
setDefaults: function(settings) {
$.extend(this._defaults, settings || {});
return this;
},
_ticksTo1970: (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) +
Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000),
_msPerDay: 24 * 60 * 60 * 1000,
ATOM: 'yyyy-mm-dd', // RFC 3339/ISO 8601
COOKIE: 'D, dd M yyyy',
FULL: 'DD, MM d, yyyy',
ISO_8601: 'yyyy-mm-dd',
JULIAN: 'J',
RFC_822: 'D, d M yy',
RFC_850: 'DD, dd-M-yy',
RFC_1036: 'D, d M yy',
RFC_1123: 'D, d M yyyy',
RFC_2822: 'D, d M yyyy',
RSS: 'D, d M yy', // RFC 822
TICKS: '!',
TIMESTAMP: '@',
W3C: 'yyyy-mm-dd', // ISO 8601
/* Format a date object into a string value.
The format can be combinations of the following:
d - day of month (no leading zero)
dd - day of month (two digit)
o - day of year (no leading zeros)
oo - day of year (three digit)
D - day name short
DD - day name long
w - week of year (no leading zero)
ww - week of year (two digit)
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
yy - year (two digit)
yyyy - year (four digit)
@ - Unix timestamp (s since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote
@param format (string) the desired format of the date (optional, default datepicker format)
@param date (Date) the date value to format
@param settings (object) attributes include:
dayNamesShort (string[]) abbreviated names of the days from Sunday (optional)
dayNames (string[]) names of the days from Sunday (optional)
monthNamesShort (string[]) abbreviated names of the months (optional)
monthNames (string[]) names of the months (optional)
calculateWeek (function) function that determines week of the year (optional)
@return (string) the date in the above format */
formatDate: function(format, date, settings) {
if (typeof format != 'string') {
settings = date;
date = format;
format = '';
}
if (!date) {
return '';
}
format = format || this._defaults.dateFormat;
settings = settings || {};
var dayNamesShort = settings.dayNamesShort || this._defaults.dayNamesShort;
var dayNames = settings.dayNames || this._defaults.dayNames;
var monthNamesShort = settings.monthNamesShort || this._defaults.monthNamesShort;
var monthNames = settings.monthNames || this._defaults.monthNames;
var calculateWeek = settings.calculateWeek || this._defaults.calculateWeek;
// Check whether a format character is doubled
var doubled = function(match, step) {
var matches = 1;
while (iFormat + matches < format.length && format.charAt(iFormat + matches) == match) {
matches++;
}
iFormat += matches - 1;
return Math.floor(matches / (step || 1)) > 1;
};
// Format a number, with leading zeroes if necessary
var formatNumber = function(match, value, len, step) {
var num = '' + value;
if (doubled(match, step)) {
while (num.length < len) {
num = '0' + num;
}
}
return num;
};
// Format a name, short or long as requested
var formatName = function(match, value, shortNames, longNames) {
return (doubled(match) ? longNames[value] : shortNames[value]);
};
var output = '';
var literal = false;
for (var iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) == "'" && !doubled("'")) {
literal = false;
}
else {
output += format.charAt(iFormat);
}
}
else {
switch (format.charAt(iFormat)) {
case 'd': output += formatNumber('d', date.getDate(), 2); break;
case 'D': output += formatName('D', date.getDay(),
dayNamesShort, dayNames); break;
case 'o': output += formatNumber('o', this.dayOfYear(date), 3); break;
case 'w': output += formatNumber('w', calculateWeek(date), 2); break;
case 'm': output += formatNumber('m', date.getMonth() + 1, 2); break;
case 'M': output += formatName('M', date.getMonth(),
monthNamesShort, monthNames); break;
case 'y':
output += (doubled('y', 2) ? date.getFullYear() :
(date.getFullYear() % 100 < 10 ? '0' : '') + date.getFullYear() % 100);
break;
case '@': output += Math.floor(date.getTime() / 1000); break;
case '!': output += date.getTime() * 10000 + this._ticksTo1970; break;
case "'":
if (doubled("'")) {
output += "'";
}
else {
literal = true;
}
break;
default:
output += format.charAt(iFormat);
}
}
}
return output;
},
/* Parse a string value into a date object.
See formatDate for the possible formats, plus:
* - ignore rest of string
@param format (string) the expected format of the date ('' for default datepicker format)
@param value (string) the date in the above format
@param settings (object) attributes include:
shortYearCutoff (number) the cutoff year for determining the century (optional)
dayNamesShort (string[]) abbreviated names of the days from Sunday (optional)
dayNames (string[]) names of the days from Sunday (optional)
monthNamesShort (string[]) abbreviated names of the months (optional)
monthNames (string[]) names of the months (optional)
@return (Date) the extracted date value or null if value is blank
@throws errors if the format and/or value are missing,
if the value doesn't match the format,
or if the date is invalid */
parseDate: function(format, value, settings) {
if (value == null) {
throw 'Invalid arguments';
}
value = (typeof value == 'object' ? value.toString() : value + '');
if (value == '') {
return null;
}
format = format || this._defaults.dateFormat;
settings = settings || {};
var shortYearCutoff = settings.shortYearCutoff || this._defaults.shortYearCutoff;
shortYearCutoff = (typeof shortYearCutoff != 'string' ? shortYearCutoff :
this.today().getFullYear() % 100 + parseInt(shortYearCutoff, 10));
var dayNamesShort = settings.dayNamesShort || this._defaults.dayNamesShort;
var dayNames = settings.dayNames || this._defaults.dayNames;
var monthNamesShort = settings.monthNamesShort || this._defaults.monthNamesShort;
var monthNames = settings.monthNames || this._defaults.monthNames;
var year = -1;
var month = -1;
var day = -1;
var doy = -1;
var shortYear = false;
var literal = false;
// Check whether a format character is doubled
var doubled = function(match, step) {
var matches = 1;
while (iFormat + matches < format.length && format.charAt(iFormat + matches) == match) {
matches++;
}
iFormat += matches - 1;
return Math.floor(matches / (step || 1)) > 1;
};
// Extract a number from the string value
var getNumber = function(match, step) {
var isDoubled = doubled(match, step);
var size = [2, 3, isDoubled ? 4 : 2, 11, 20]['oy@!'.indexOf(match) + 1];
var digits = new RegExp('^-?\\d{1,' + size + '}');
var num = value.substring(iValue).match(digits);
if (!num) {
throw 'Missing number at position {0}'.replace(/\{0\}/, iValue);
}
iValue += num[0].length;
return parseInt(num[0], 10);
};
// Extract a name from the string value and convert to an index
var getName = function(match, shortNames, longNames, step) {
var names = (doubled(match, step) ? longNames : shortNames);
for (var i = 0; i < names.length; i++) {
if (value.substr(iValue, names[i].length) == names[i]) {
iValue += names[i].length;
return i + 1;
}
}
throw 'Unknown name at position {0}'.replace(/\{0\}/, iValue);
};
// Confirm that a literal character matches the string value
var checkLiteral = function() {
if (value.charAt(iValue) != format.charAt(iFormat)) {
throw 'Unexpected literal at position {0}'.replace(/\{0\}/, iValue);
}
iValue++;
};
var iValue = 0;
for (var iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) == "'" && !doubled("'")) {
literal = false;
}
else {
checkLiteral();
}
}
else {
switch (format.charAt(iFormat)) {
case 'd': day = getNumber('d'); break;
case 'D': getName('D', dayNamesShort, dayNames); break;
case 'o': doy = getNumber('o'); break;
case 'w': getNumber('w'); break;
case 'm': month = getNumber('m'); break;
case 'M': month = getName('M', monthNamesShort, monthNames); break;
case 'y':
var iSave = iFormat;
shortYear = !doubled('y', 2);
iFormat = iSave;
year = getNumber('y', 2);
break;
case '@':
var date = this._normaliseDate(new Date(getNumber('@') * 1000));
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case '!':
var date = this._normaliseDate(
new Date((getNumber('!') - this._ticksTo1970) / 10000));
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case '*': iValue = value.length; break;
case "'":
if (doubled("'")) {
checkLiteral();
}
else {
literal = true;
}
break;
default: checkLiteral();
}
}
}
if (iValue < value.length) {
throw 'Additional text found at end';
}
if (year == -1) {
year = this.today().getFullYear();
}
else if (year < 100 && shortYear) {
year += (shortYearCutoff == -1 ? 1900 : this.today().getFullYear() -
this.today().getFullYear() % 100 - (year <= shortYearCutoff ? 0 : 100));
}
if (doy > -1) {
month = 1;
day = doy;
for (var dim = this.daysInMonth(year, month); day > dim;
dim = this.daysInMonth(year, month)) {
month++;
day -= dim;
}
}
var date = this.newDate(year, month, day);
if (date.getFullYear() != year || date.getMonth() + 1 != month || date.getDate() != day) {
throw 'Invalid date';
}
return date;
},
/* A date may be specified as an exact value or a relative one.
@param dateSpec (Date or number or string) the date as an object or string
in the given format or an offset - numeric days from today,
or string amounts and periods, e.g. '+1m +2w'
@param defaultDate (Date) the date to use if no other supplied, may be null
@param currentDate (Date) the current date as a possible basis for relative dates,
if null today is used (optional)
@param dateFormat (string) the expected date format - see formatDate above (optional)
@param settings (object) attributes include:
shortYearCutoff (number) the cutoff year for determining the century (optional)
dayNamesShort (string[7]) abbreviated names of the days from Sunday (optional)
dayNames (string[7]) names of the days from Sunday (optional)
monthNamesShort (string[12]) abbreviated names of the months (optional)
monthNames (string[12]) names of the months (optional)
@return (Date) the decoded date */
determineDate: function(dateSpec, defaultDate, currentDate, dateFormat, settings) {
if (currentDate && typeof currentDate != 'object') {
settings = dateFormat;
dateFormat = currentDate;
currentDate = null;
}
if (typeof dateFormat != 'string') {
settings = dateFormat;
dateFormat = '';
}
var offsetString = function(offset) {
try {
return $.datepick.parseDate(dateFormat, offset, settings);
}
catch (e) {
// Ignore
}
offset = offset.toLowerCase();
var date = (offset.match(/^c/) && currentDate ? $.datepick.newDate(currentDate) : null) ||
$.datepick.today();
var pattern = /([+-]?[0-9]+)\s*(d|w|m|y)?/g;
var matches = pattern.exec(offset);
while (matches) {
date = $.datepick.add(date, parseInt(matches[1], 10), matches[2] || 'd');
matches = pattern.exec(offset);
}
return date;
};
defaultDate = (defaultDate ? $.datepick.newDate(defaultDate) : null);
dateSpec = (dateSpec == null ? defaultDate :
(typeof dateSpec == 'string' ? offsetString(dateSpec) : (typeof dateSpec == 'number' ?
(isNaN(dateSpec) || dateSpec == Infinity || dateSpec == -Infinity ? defaultDate :
$.datepick.add($.datepick.today(), dateSpec, 'd')) : $.datepick.newDate(dateSpec))));
return dateSpec;
},
/* Find the number of days in a given month.
@param year (Date) the date to get days for or
(number) the full year
@param month (number) the month (1 to 12)
@return (number) the number of days in this month */
daysInMonth: function(year, month) {
month = (year.getFullYear ? year.getMonth() + 1 : month);
year = (year.getFullYear ? year.getFullYear() : year);
return this.newDate(year, month + 1, 0).getDate();
},
/* Calculate the day of the year for a date.
@param year (Date) the date to get the day-of-year for or
(number) the full year
@param month (number) the month (1-12)
@param day (number) the day
@return (number) the day of the year */
dayOfYear: function(year, month, day) {
var date = (year.getFullYear ? year : this.newDate(year, month, day));
var newYear = this.newDate(date.getFullYear(), 1, 1);
return Math.floor((date.getTime() - newYear.getTime()) / this._msPerDay) + 1;
},
/* Set as calculateWeek to determine the week of the year based on the ISO 8601 definition.
@param year (Date) the date to get the week for or
(number) the full year
@param month (number) the month (1-12)
@param day (number) the day
@return (number) the number of the week within the year that contains this date */
iso8601Week: function(year, month, day) {
var checkDate = (year.getFullYear ?
new Date(year.getTime()) : this.newDate(year, month, day));
// Find Thursday of this week starting on Monday
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
checkDate.setMonth(0, 1); // Compare with Jan 1
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
},
/* Return today's date.
@return (Date) today */
today: function() {
return this._normaliseDate(new Date());
},
/* Return a new date.
@param year (Date) the date to clone or
(number) the year
@param month (number) the month (1-12)
@param day (number) the day
@return (Date) the date */
newDate: function(year, month, day) {
return (!year ? null : (year.getFullYear ? this._normaliseDate(new Date(year.getTime())) :
new Date(year, month - 1, day, 12)));
},
/* Standardise a date into a common format - time portion is 12 noon.
@param date (Date) the date to standardise
@return (Date) the normalised date */
_normaliseDate: function(date) {
if (date) {
date.setHours(12, 0, 0, 0);
}
return date;
},
/* Set the year for a date.
@param date (Date) the original date
@param year (number) the new year
@return the updated date */
year: function(date, year) {
date.setFullYear(year);
return this._normaliseDate(date);
},
/* Set the month for a date.
@param date (Date) the original date
@param month (number) the new month (1-12)
@return the updated date */
month: function(date, month) {
date.setMonth(month - 1);
return this._normaliseDate(date);
},
/* Set the day for a date.
@param date (Date) the original date
@param day (number) the new day of the month
@return the updated date */
day: function(date, day) {
date.setDate(day);
return this._normaliseDate(date);
},
/* Add a number of periods to a date.
@param date (Date) the original date
@param amount (number) the number of periods
@param period (string) the type of period d/w/m/y
@return the updated date */
add: function(date, amount, period) {
if (period == 'd' || period == 'w') {
this._normaliseDate(date);
date.setDate(date.getDate() + amount * (period == 'w' ? 7 : 1));
}
else {
var year = date.getFullYear() + (period == 'y' ? amount : 0);
var month = date.getMonth() + (period == 'm' ? amount : 0);
date.setTime($.datepick.newDate(year, month + 1,
Math.min(date.getDate(), this.daysInMonth(year, month + 1))).getTime());
}
return date;
},
/* Apply the months offset value to a date.
@param date (Date) the original date
@param inst (object) the current instance settings
@return (Date) the updated date */
_applyMonthsOffset: function(date, inst) {
var monthsOffset = inst.get('monthsOffset');
if ($.isFunction(monthsOffset)) {
monthsOffset = monthsOffset.apply(inst.target[0], [date]);
}
return $.datepick.add(date, -monthsOffset, 'm');
},
/* Attach the datepicker functionality to an input field.
@param target (element) the control to affect
@param settings (object) the custom options for this instance */
_attachPicker: function(target, settings) {
target = $(target);
if (target.hasClass(this.markerClass)) {
return;
}
target.addClass(this.markerClass);
var inst = {target: target, selectedDates: [], drawDate: null, pickingRange: false,
inline: ($.inArray(target[0].nodeName.toLowerCase(), ['div', 'span']) > -1),
get: function(name) { // Get a setting value, defaulting if necessary
var value = this.settings[name] !== undefined ?
this.settings[name] : $.datepick._defaults[name];
if ($.inArray(name, ['defaultDate', 'minDate', 'maxDate']) > -1) { // Decode date settings
value = $.datepick.determineDate(
value, null, this.selectedDates[0], this.get('dateFormat'), inst.getConfig());
}
return value;
},
curMinDate: function() {
return (this.pickingRange ? this.selectedDates[0] : this.get('minDate'));
},
getConfig: function() {
return {dayNamesShort: this.get('dayNamesShort'), dayNames: this.get('dayNames'),
monthNamesShort: this.get('monthNamesShort'), monthNames: this.get('monthNames'),
calculateWeek: this.get('calculateWeek'),
shortYearCutoff: this.get('shortYearCutoff')};
}
};
$.data(target[0], this.dataName, inst);
var inlineSettings = ($.fn.metadata ? target.metadata() : {});
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
if (inst.inline) {
inst.drawDate = $.datepick._checkMinMax($.datepick.newDate(inst.selectedDates[0] ||
inst.get('defaultDate') || $.datepick.today()), inst);
inst.prevDate = $.datepick.newDate(inst.drawDate);
this._update(target[0]);
if ($.fn.mousewheel) {
target.mousewheel(this._doMouseWheel);
}
}
else {
this._attachments(target, inst);
target.bind('keydown.' + this.dataName, this._keyDown).
bind('keypress.' + this.dataName, this._keyPress).
bind('keyup.' + this.dataName, this._keyUp);
if (target.attr('disabled')) {
this.disable(target[0]);
}
}
},
/* Retrieve the settings for a datepicker control.
@param target (element) the control to affect
@param name (string) the name of the setting (optional)
@return (object) the current instance settings (name == 'all') or
(object) the default settings (no name) or
(any) the setting value (name supplied) */
options: function(target, name) {
var inst = $.data(target, this.dataName);
return (inst ? (name ? (name == 'all' ?
inst.settings : inst.settings[name]) : $.datepick._defaults) : {});
},
/* Reconfigure the settings for a datepicker control.
@param target (element) the control to affect
@param settings (object) the new options for this instance or
(string) an individual property name
@param value (any) the individual property value (omit if settings is an object) */
option: function(target, settings, value) {
target = $(target);
if (!target.hasClass(this.markerClass)) {
return;
}
settings = settings || {};
if (typeof settings == 'string') {
var name = settings;
settings = {};
settings[name] = value;
}
var inst = $.data(target[0], this.dataName);
var dates = inst.selectedDates;
extendRemove(inst.settings, settings);
this.setDate(target[0], dates, null, false, true);
inst.pickingRange = false;
inst.drawDate = $.datepick.newDate(this._checkMinMax(
(settings.defaultDate ? inst.get('defaultDate') : inst.drawDate) ||
inst.get('defaultDate') || $.datepick.today(), inst));
if (!inst.inline) {
this._attachments(target, inst);
}
if (inst.inline || inst.div) {
this._update(target[0]);
}
},
/* Attach events and trigger, if necessary.
@param target (jQuery) the control to affect
@param inst (object) the current instance settings */
_attachments: function(target, inst) {
target.unbind('focus.' + this.dataName);
if (inst.get('showOnFocus')) {
target.bind('focus.' + this.dataName, this.show);
}
if (inst.trigger) {
inst.trigger.remove();
}
var trigger = inst.get('showTrigger');
inst.trigger = (!trigger ? $([]) :
$(trigger).clone().removeAttr('id').addClass(this._triggerClass)
[inst.get('isRTL') ? 'insertBefore' : 'insertAfter'](target).
click(function() {
if (!$.datepick.isDisabled(target[0])) {
$.datepick[$.datepick.curInst == inst ?
'hide' : 'show'](target[0]);
}
}));
this._autoSize(target, inst);
var dates = this._extractDates(inst, target.val());
if (dates) {
this.setDate(target[0], dates, null, true);
}
if (inst.get('selectDefaultDate') && inst.get('defaultDate') &&
inst.selectedDates.length == 0) {
this.setDate(target[0], $.datepick.newDate(inst.get('defaultDate') || $.datepick.today()));
}
},
/* Apply the maximum length for the date format.
@param inst (object) the current instance settings */
_autoSize: function(target, inst) {
if (inst.get('autoSize') && !inst.inline) {
var date = $.datepick.newDate(2009, 10, 20); // Ensure double digits
var dateFormat = inst.get('dateFormat');
if (dateFormat.match(/[DM]/)) {
var findMax = function(names) {
var max = 0;
var maxI = 0;
for (var i = 0; i < names.length; i++) {
if (names[i].length > max) {
max = names[i].length;
maxI = i;
}
}
return maxI;
};
date.setMonth(findMax(inst.get(dateFormat.match(/MM/) ? // Longest month
'monthNames' : 'monthNamesShort')));
date.setDate(findMax(inst.get(dateFormat.match(/DD/) ? // Longest day
'dayNames' : 'dayNamesShort')) + 20 - date.getDay());
}
inst.target.attr('size', $.datepick.formatDate(dateFormat, date, inst.getConfig()).length);
}
},
/* Remove the datepicker functionality from a control.
@param target (element) the control to affect */
destroy: function(target) {
target = $(target);
if (!target.hasClass(this.markerClass)) {
return;
}
var inst = $.data(target[0], this.dataName);
if (inst.trigger) {
inst.trigger.remove();
}
target.removeClass(this.markerClass).empty().unbind('.' + this.dataName);
if (inst.inline && $.fn.mousewheel) {
target.unmousewheel();
}
if (!inst.inline && inst.get('autoSize')) {
target.removeAttr('size');
}
$.removeData(target[0], this.dataName);
},
/* Apply multiple event functions.
Usage, for example: onShow: multipleEvents(fn1, fn2, ...)
@param fns (function...) the functions to apply */
multipleEvents: function(fns) {
var funcs = arguments;
return function(args) {
for (var i = 0; i < funcs.length; i++) {
funcs[i].apply(this, arguments);
}
};
},
/* Enable the datepicker and any associated trigger.
@param target (element) the control to use */
enable: function(target) {
var $target = $(target);
if (!$target.hasClass(this.markerClass)) {
return;
}
var inst = $.data(target, this.dataName);
if (inst.inline)
$target.children('.' + this._disableClass).remove().end().
find('button,select').attr('disabled', '').end().
find('a').attr('href', 'javascript:void(0)');
else {
target.disabled = false;
inst.trigger.filter('button.' + this._triggerClass).
attr('disabled', '').end().
filter('img.' + this._triggerClass).
css({opacity: '1.0', cursor: ''});
}
this._disabled = $.map(this._disabled,
function(value) { return (value == target ? null : value); }); // Delete entry
},
/* Disable the datepicker and any associated trigger.
@param target (element) the control to use */
disable: function(target) {
var $target = $(target);
if (!$target.hasClass(this.markerClass))
return;
var inst = $.data(target, this.dataName);
if (inst.inline) {
var inline = $target.children(':last');
var offset = inline.offset();
var relOffset = {left: 0, top: 0};
inline.parents().each(function() {
if ($(this).css('position') == 'relative') {
relOffset = $(this).offset();
return false;
}
});
var zIndex = $target.css('zIndex');
zIndex = (zIndex == 'auto' ? 0 : parseInt(zIndex, 10)) + 1;
$target.prepend('<div class="' + this._disableClass + '" style="' +
'width: ' + inline.outerWidth() + 'px; height: ' + inline.outerHeight() +
'px; left: ' + (offset.left - relOffset.left) + 'px; top: ' +
(offset.top - relOffset.top) + 'px; z-index: ' + zIndex + '"></div>').
find('button,select').attr('disabled', 'disabled').end().
find('a').removeAttr('href');
}
else {
target.disabled = true;
inst.trigger.filter('button.' + this._triggerClass).
attr('disabled', 'disabled').end().
filter('img.' + this._triggerClass).
css({opacity: '0.5', cursor: 'default'});
}
this._disabled = $.map(this._disabled,
function(value) { return (value == target ? null : value); }); // Delete entry
this._disabled.push(target);
},
/* Is the first field in a jQuery collection disabled as a datepicker?
@param target (element) the control to examine
@return (boolean) true if disabled, false if enabled */
isDisabled: function(target) {
return (target && $.inArray(target, this._disabled) > -1);
},
/* Show a popup datepicker.
@param target (event) a focus event or
(element) the control to use */
show: function(target) {
target = target.target || target;
var inst = $.data(target, $.datepick.dataName);
if ($.datepick.curInst == inst) {
return;
}
if ($.datepick.curInst) {
$.datepick.hide($.datepick.curInst, true);
}
if (inst) {
// Retrieve existing date(s)
inst.lastVal = null;
inst.selectedDates = $.datepick._extractDates(inst, $(target).val());
inst.pickingRange = false;
inst.drawDate = $.datepick._checkMinMax($.datepick.newDate(inst.selectedDates[0] ||
inst.get('defaultDate') || $.datepick.today()), inst);
inst.prevDate = $.datepick.newDate(inst.drawDate);
$.datepick.curInst = inst;
// Generate content
$.datepick._update(target, true);
// Adjust position before showing
var offset = $.datepick._checkOffset(inst);
inst.div.css({left: offset.left, top: offset.top});
// And display
var showAnim = inst.get('showAnim');
var showSpeed = inst.get('showSpeed');
showSpeed = (showSpeed == 'normal' && $.ui && $.ui.version >= '1.8' ?
'_default' : showSpeed);
var postProcess = function() {
var cover = inst.div.find('.' + $.datepick._coverClass);
if (cover.length) {
var borders = $.datepick._getBorders(inst.div);
cover.css({left: -borders[0], top: -borders[1], // IE6- only
width: inst.div.outerWidth() + borders[0],
height: inst.div.outerHeight() + borders[1]});
}
};
if ($.effects && $.effects[showAnim]) {
var data = inst.div.data(); // Update old effects data
for (var key in data) {
if (key.match(/^ec\.storage\./)) {
data[key] = inst._mainDiv.css(key.replace(/ec\.storage\./, ''));
}
}
inst.div.data(data).show(showAnim, inst.get('showOptions'), showSpeed, postProcess);
}
else {
inst.div[showAnim || 'show']((showAnim ? showSpeed : ''), postProcess);
}
if (!showAnim) {
postProcess();
}
}
},
/* Extract possible dates from a string.
@param inst (object) the current instance settings
@param text (string) the text to extract from
@return (CDate[]) the extracted dates */
_extractDates: function(inst, datesText) {
if (datesText == inst.lastVal) {
return;
}
inst.lastVal = datesText;
var dateFormat = inst.get('dateFormat');
var multiSelect = inst.get('multiSelect');
var rangeSelect = inst.get('rangeSelect');
datesText = datesText.split(multiSelect ? inst.get('multiSeparator') :
(rangeSelect ? inst.get('rangeSeparator') : '\x00'));
var dates = [];
for (var i = 0; i < datesText.length; i++) {
try {
var date = $.datepick.parseDate(dateFormat, datesText[i], inst.getConfig());
if (date) {
var found = false;
for (var j = 0; j < dates.length; j++) {
if (dates[j].getTime() == date.getTime()) {
found = true;
break;
}
}
if (!found) {
dates.push(date);
}
}
}
catch (e) {
// Ignore
}
}
dates.splice(multiSelect || (rangeSelect ? 2 : 1), dates.length);
if (rangeSelect && dates.length == 1) {
dates[1] = dates[0];
}
return dates;
},
/* Update the datepicker display.
@param target (event) a focus event or
(element) the control to use
@param hidden (boolean) true to initially hide the datepicker */
_update: function(target, hidden) {
target = $(target.target || target);
var inst = $.data(target[0], $.datepick.dataName);
if (inst) {
if (inst.inline || $.datepick.curInst == inst) {
var onChange = inst.get('onChangeMonthYear');
if (onChange && (!inst.prevDate ||
inst.prevDate.getFullYear() != inst.drawDate.getFullYear() ||
inst.prevDate.getMonth() != inst.drawDate.getMonth())) {
onChange.apply(target[0], [inst.drawDate.getFullYear(), inst.drawDate.getMonth() + 1]);
}
}
if (inst.inline) {
target.html(this._generateContent(target[0], inst));
}
else if ($.datepick.curInst == inst) {
if (!inst.div) {
inst.div = $('<div></div>').addClass(this._popupClass).
css({display: (hidden ? 'none' : 'static'), position: 'absolute',
left: target.offset().left,
top: target.offset().top + target.outerHeight()}).
appendTo($(inst.get('popupContainer') || 'body'));
if ($.fn.mousewheel) {
inst.div.mousewheel(this._doMouseWheel);
}
}
inst.div.html(this._generateContent(target[0], inst));
target.focus();
}
}
},
/* Update the input field and any alternate field with the current dates.
@param target (element) the control to use
@param keyUp (boolean, internal) true if coming from keyUp processing */
_updateInput: function(target, keyUp) {
var inst = $.data(target, this.dataName);
if (inst) {
var value = '';
var altValue = '';
var sep = (inst.get('multiSelect') ? inst.get('multiSeparator') :
inst.get('rangeSeparator'));
var dateFormat = inst.get('dateFormat');
var altFormat = inst.get('altFormat') || dateFormat;
for (var i = 0; i < inst.selectedDates.length; i++) {
value += (keyUp ? '' : (i > 0 ? sep : '') + $.datepick.formatDate(
dateFormat, inst.selectedDates[i], inst.getConfig()));
altValue += (i > 0 ? sep : '') + $.datepick.formatDate(
altFormat, inst.selectedDates[i], inst.getConfig());
}
if (!inst.inline && !keyUp) {
$(target).val(value);
}
$(inst.get('altField')).val(altValue);
var onSelect = inst.get('onSelect');
if (onSelect && !keyUp && !inst.inSelect) {
inst.inSelect = true; // Prevent endless loops
onSelect.apply(target, [inst.selectedDates]);
inst.inSelect = false;
}
}
},
/* Retrieve the size of left and top borders for an element.
@param elem (jQuery) the element of interest
@return (number[2]) the left and top borders */
_getBorders: function(elem) {
var convert = function(value) {
var extra = ($.browser.msie ? 1 : 0);
return {thin: 1 + extra, medium: 3 + extra, thick: 5 + extra}[value] || value;
};
return [parseFloat(convert(elem.css('border-left-width'))),
parseFloat(convert(elem.css('border-top-width')))];
},
/* Check positioning to remain on the screen.
@param inst (object) the current instance settings
@return (object) the updated offset for the datepicker */
_checkOffset: function(inst) {
var base = (inst.target.is(':hidden') && inst.trigger ? inst.trigger : inst.target);
var offset = base.offset();
var isFixed = false;
$(inst.target).parents().each(function() {
isFixed |= $(this).css('position') == 'fixed';
return !isFixed;
});
if (isFixed && $.browser.opera) { // Correction for Opera when fixed and scrolled
offset.left -= document.documentElement.scrollLeft;
offset.top -= document.documentElement.scrollTop;
}
var browserWidth = (!$.browser.mozilla || document.doctype ?
document.documentElement.clientWidth : 0) || document.body.clientWidth;
var browserHeight = (!$.browser.mozilla || document.doctype ?
document.documentElement.clientHeight : 0) || document.body.clientHeight;
if (browserWidth == 0) {
return offset;
}
var alignment = inst.get('alignment');
var isRTL = inst.get('isRTL');
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var above = offset.top - inst.div.outerHeight() -
(isFixed && $.browser.opera ? document.documentElement.scrollTop : 0);
var below = offset.top + base.outerHeight();
var alignL = offset.left;
var alignR = offset.left + base.outerWidth() - inst.div.outerWidth() -
(isFixed && $.browser.opera ? document.documentElement.scrollLeft : 0);
var tooWide = (offset.left + inst.div.outerWidth() - scrollX) > browserWidth;
var tooHigh = (offset.top + inst.target.outerHeight() + inst.div.outerHeight() -
scrollY) > browserHeight;
if (alignment == 'topLeft') {
offset = {left: alignL, top: above};
}
else if (alignment == 'topRight') {
offset = {left: alignR, top: above};
}
else if (alignment == 'bottomLeft') {
offset = {left: alignL, top: below};
}
else if (alignment == 'bottomRight') {
offset = {left: alignR, top: below};
}
else if (alignment == 'top') {
offset = {left: (isRTL || tooWide ? alignR : alignL), top: above};
}
else { // bottom
offset = {left: (isRTL || tooWide ? alignR : alignL),
top: (tooHigh ? above : below)};
}
offset.left = Math.max((isFixed ? 0 : scrollX), offset.left - (isFixed ? scrollX : 0));
offset.top = Math.max((isFixed ? 0 : scrollY), offset.top - (isFixed ? scrollY : 0));
return offset;
},
/* Close date picker if clicked elsewhere.
@param event (MouseEvent) the mouse click to check */
_checkExternalClick: function(event) {
if (!$.datepick.curInst) {
return;
}
var target = $(event.target);
if (!target.parents().andSelf().hasClass($.datepick._popupClass) &&
!target.hasClass($.datepick.markerClass) &&
!target.parents().andSelf().hasClass($.datepick._triggerClass)) {
$.datepick.hide($.datepick.curInst);
}
},
/* Hide a popup datepicker.
@param target (element) the control to use or
(object) the current instance settings
@param immediate (boolean) true to close immediately without animation */
hide: function(target, immediate) {
var inst = $.data(target, this.dataName) || target;
if (inst && inst == $.datepick.curInst) {
var showAnim = (immediate ? '' : inst.get('showAnim'));
var showSpeed = inst.get('showSpeed');
showSpeed = (showSpeed == 'normal' && $.ui && $.ui.version >= '1.8' ?
'_default' : showSpeed);
var postProcess = function() {
inst.div.remove();
inst.div = null;
$.datepick.curInst = null;
var onClose = inst.get('onClose');
if (onClose) {
onClose.apply(target, [inst.selectedDates]);
}
};
inst.div.stop();
if ($.effects && $.effects[showAnim]) {
inst.div.hide(showAnim, inst.get('showOptions'), showSpeed, postProcess);
}
else {
var hideAnim = (showAnim == 'slideDown' ? 'slideUp' :
(showAnim == 'fadeIn' ? 'fadeOut' : 'hide'));
inst.div[hideAnim]((showAnim ? showSpeed : ''), postProcess);
}
if (!showAnim) {
postProcess();
}
}
},
/* Handle keystrokes in the datepicker.
@param event (KeyEvent) the keystroke
@return (boolean) true if not handled, false if handled */
_keyDown: function(event) {
var target = event.target;
var inst = $.data(target, $.datepick.dataName);
var handled = false;
if (inst.div) {
if (event.keyCode == 9) { // Tab - close
$.datepick.hide(target);
}
else if (event.keyCode == 13) { // Enter - select
$.datepick.selectDate(target,
$('a.' + inst.get('renderer').highlightedClass, inst.div)[0]);
handled = true;
}
else { // Command keystrokes
var commands = inst.get('commands');
for (var name in commands) {
var command = commands[name];
if (command.keystroke.keyCode == event.keyCode &&
!!command.keystroke.ctrlKey == !!(event.ctrlKey || event.metaKey) &&
!!command.keystroke.altKey == event.altKey &&
!!command.keystroke.shiftKey == event.shiftKey) {
$.datepick.performAction(target, name);
handled = true;
break;
}
}
}
}
else { // Show on 'current' keystroke
var command = inst.get('commands').current;
if (command.keystroke.keyCode == event.keyCode &&
!!command.keystroke.ctrlKey == !!(event.ctrlKey || event.metaKey) &&
!!command.keystroke.altKey == event.altKey &&
!!command.keystroke.shiftKey == event.shiftKey) {
$.datepick.show(target);
handled = true;
}
}
inst.ctrlKey = ((event.keyCode < 48 && event.keyCode != 32) ||
event.ctrlKey || event.metaKey);
if (handled) {
event.preventDefault();
event.stopPropagation();
}
return !handled;
},
/* Filter keystrokes in the datepicker.
@param event (KeyEvent) the keystroke
@return (boolean) true if allowed, false if not allowed */
_keyPress: function(event) {
var target = event.target;
var inst = $.data(target, $.datepick.dataName);
if (inst && inst.get('constrainInput')) {
var ch = String.fromCharCode(event.keyCode || event.charCode);
var allowedChars = $.datepick._allowedChars(inst);
return (event.metaKey || inst.ctrlKey || ch < ' ' ||
!allowedChars || allowedChars.indexOf(ch) > -1);
}
return true;
},
/* Determine the set of characters allowed by the date format.
@param inst (object) the current instance settings
@return (string) the set of allowed characters, or null if anything allowed */
_allowedChars: function(inst) {
var dateFormat = inst.get('dateFormat');
var allowedChars = (inst.get('multiSelect') ? inst.get('multiSeparator') :
(inst.get('rangeSelect') ? inst.get('rangeSeparator') : ''));
var literal = false;
var hasNum = false;
for (var i = 0; i < dateFormat.length; i++) {
var ch = dateFormat.charAt(i);
if (literal) {
if (ch == "'" && dateFormat.charAt(i + 1) != "'") {
literal = false;
}
else {
allowedChars += ch;
}
}
else {
switch (ch) {
case 'd': case 'm': case 'o': case 'w':
allowedChars += (hasNum ? '' : '0123456789'); hasNum = true; break;
case 'y': case '@': case '!':
allowedChars += (hasNum ? '' : '0123456789') + '-'; hasNum = true; break;
case 'J':
allowedChars += (hasNum ? '' : '0123456789') + '-.'; hasNum = true; break;
case 'D': case 'M': case 'Y':
return null; // Accept anything
case "'":
if (dateFormat.charAt(i + 1) == "'") {
allowedChars += "'";
}
else {
literal = true;
}
break;
default:
allowedChars += ch;
}
}
}
return allowedChars;
},
/* Synchronise datepicker with the field.
@param event (KeyEvent) the keystroke
@return (boolean) true if allowed, false if not allowed */
_keyUp: function(event) {
var target = event.target;
var inst = $.data(target, $.datepick.dataName);
if (inst && !inst.ctrlKey && inst.lastVal != inst.target.val()) {
try {
var dates = $.datepick._extractDates(inst, inst.target.val());
if (dates.length > 0) {
$.datepick.setDate(target, dates, null, true);
}
}
catch (event) {
// Ignore
}
}
return true;
},
/* Increment/decrement month/year on mouse wheel activity.
@param event (event) the mouse wheel event
@param delta (number) the amount of change */
_doMouseWheel: function(event, delta) {
var target = ($.datepick.curInst && $.datepick.curInst.target[0]) ||
$(event.target).closest('.' + $.datepick.markerClass)[0];
if ($.datepick.isDisabled(target)) {
return;
}
var inst = $.data(target, $.datepick.dataName);
if (inst.get('useMouseWheel')) {
delta = ($.browser.opera ? -delta : delta);
delta = (delta < 0 ? -1 : +1);
$.datepick.changeMonth(target,
-inst.get(event.ctrlKey ? 'monthsToJump' : 'monthsToStep') * delta);
}
event.preventDefault();
},
/* Clear an input and close a popup datepicker.
@param target (element) the control to use */
clear: function(target) {
var inst = $.data(target, this.dataName);
if (inst) {
inst.selectedDates = [];
this.hide(target);
if (inst.get('selectDefaultDate') && inst.get('defaultDate')) {
this.setDate(target,
$.datepick.newDate(inst.get('defaultDate') ||$.datepick.today()));
}
else {
this._updateInput(target);
}
}
},
/* Retrieve the selected date(s) for a datepicker.
@param target (element) the control to examine
@return (CDate[]) the selected date(s) */
getDate: function(target) {
var inst = $.data(target, this.dataName);
return (inst ? inst.selectedDates : []);
},
/* Set the selected date(s) for a datepicker.
@param target (element) the control to examine
@param dates (CDate or number or string or [] of these) the selected date(s)
@param endDate (CDate or number or string) the ending date for a range (optional)
@param keyUp (boolean, internal) true if coming from keyUp processing
@param setOpt (boolean, internal) true if coming from option processing */
setDate: function(target, dates, endDate, keyUp, setOpt) {
var inst = $.data(target, this.dataName);
if (inst) {
if (!$.isArray(dates)) {
dates = [dates];
if (endDate) {
dates.push(endDate);
}
}
var dateFormat = inst.get('dateFormat');
var minDate = inst.get('minDate');
var maxDate = inst.get('maxDate');
var curDate = inst.selectedDates[0];
inst.selectedDates = [];
for (var i = 0; i < dates.length; i++) {
var date = $.datepick.determineDate(
dates[i], null, curDate, dateFormat, inst.getConfig());
if (date) {
if ((!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime())) {
var found = false;
for (var j = 0; j < inst.selectedDates.length; j++) {
if (inst.selectedDates[j].getTime() == date.getTime()) {
found = true;
break;
}
}
if (!found) {
inst.selectedDates.push(date);
}
}
}
}
var rangeSelect = inst.get('rangeSelect');
inst.selectedDates.splice(inst.get('multiSelect') ||
(rangeSelect ? 2 : 1), inst.selectedDates.length);
if (rangeSelect) {
switch (inst.selectedDates.length) {
case 1: inst.selectedDates[1] = inst.selectedDates[0]; break;
case 2: inst.selectedDates[1] =
(inst.selectedDates[0].getTime() > inst.selectedDates[1].getTime() ?
inst.selectedDates[0] : inst.selectedDates[1]); break;
}
inst.pickingRange = false;
}
inst.prevDate = (inst.drawDate ? $.datepick.newDate(inst.drawDate) : null);
inst.drawDate = this._checkMinMax($.datepick.newDate(inst.selectedDates[0] ||
inst.get('defaultDate') || $.datepick.today()), inst);
if (!setOpt) {
this._update(target);
this._updateInput(target, keyUp);
}
}
},
/* Determine whether a date is selectable for this datepicker.
@param target (element) the control to check
@param date (Date or string or number) the date to check
@return (boolean) true if selectable, false if not */
isSelectable: function(target, date) {
var inst = $.data(target, this.dataName);
if (!inst) {
return false;
}
date = $.datepick.determineDate(date, inst.selectedDates[0] || this.today(), null,
inst.get('dateFormat'), inst.getConfig());
return this._isSelectable(target, date, inst.get('onDate'),
inst.get('minDate'), inst.get('maxDate'));
},
/* Internally determine whether a date is selectable for this datepicker.
@param target (element) the control to check
@param date (Date) the date to check
@param onDate (function or boolean) any onDate callback or callback.selectable
@param mindate (Date) the minimum allowed date
@param maxdate (Date) the maximum allowed date
@return (boolean) true if selectable, false if not */
_isSelectable: function(target, date, onDate, minDate, maxDate) {
var dateInfo = (typeof onDate == 'boolean' ? {selectable: onDate} :
(!onDate ? {} : onDate.apply(target, [date, true])));
return (dateInfo.selectable != false) &&
(!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime());
},
/* Perform a named action for a datepicker.
@param target (element) the control to affect
@param action (string) the name of the action */
performAction: function(target, action) {
var inst = $.data(target, this.dataName);
if (inst && !this.isDisabled(target)) {
var commands = inst.get('commands');
if (commands[action] && commands[action].enabled.apply(target, [inst])) {
commands[action].action.apply(target, [inst]);
}
}
},
/* Set the currently shown month, defaulting to today's.
@param target (element) the control to affect
@param year (number) the year to show (optional)
@param month (number) the month to show (1-12) (optional)
@param day (number) the day to show (optional) */
showMonth: function(target, year, month, day) {
var inst = $.data(target, this.dataName);
if (inst && (day != null ||
(inst.drawDate.getFullYear() != year || inst.drawDate.getMonth() + 1 != month))) {
inst.prevDate = $.datepick.newDate(inst.drawDate);
var show = this._checkMinMax((year != null ?
$.datepick.newDate(year, month, 1) : $.datepick.today()), inst);
inst.drawDate = $.datepick.newDate(show.getFullYear(), show.getMonth() + 1,
(day != null ? day : Math.min(inst.drawDate.getDate(),
$.datepick.daysInMonth(show.getFullYear(), show.getMonth() + 1))));
this._update(target);
}
},
/* Adjust the currently shown month.
@param target (element) the control to affect
@param offset (number) the number of months to change by */
changeMonth: function(target, offset) {
var inst = $.data(target, this.dataName);
if (inst) {
var date = $.datepick.add($.datepick.newDate(inst.drawDate), offset, 'm');
this.showMonth(target, date.getFullYear(), date.getMonth() + 1);
}
},
/* Adjust the currently shown day.
@param target (element) the control to affect
@param offset (number) the number of days to change by */
changeDay: function(target, offset) {
var inst = $.data(target, this.dataName);
if (inst) {
var date = $.datepick.add($.datepick.newDate(inst.drawDate), offset, 'd');
this.showMonth(target, date.getFullYear(), date.getMonth() + 1, date.getDate());
}
},
/* Restrict a date to the minimum/maximum specified.
@param date (CDate) the date to check
@param inst (object) the current instance settings */
_checkMinMax: function(date, inst) {
var minDate = inst.get('minDate');
var maxDate = inst.get('maxDate');
date = (minDate && date.getTime() < minDate.getTime() ? $.datepick.newDate(minDate) : date);
date = (maxDate && date.getTime() > maxDate.getTime() ? $.datepick.newDate(maxDate) : date);
return date;
},
/* Retrieve the date associated with an entry in the datepicker.
@param target (element) the control to examine
@param elem (element) the selected datepicker element
@return (CDate) the corresponding date, or null */
retrieveDate: function(target, elem) {
var inst = $.data(target, this.dataName);
return (!inst ? null : this._normaliseDate(
new Date(parseInt(elem.className.replace(/^.*dp(-?\d+).*$/, '$1'), 10))));
},
/* Select a date for this datepicker.
@param target (element) the control to examine
@param elem (element) the selected datepicker element */
selectDate: function(target, elem) {
var inst = $.data(target, this.dataName);
if (inst && !this.isDisabled(target)) {
var date = this.retrieveDate(target, elem);
var multiSelect = inst.get('multiSelect');
var rangeSelect = inst.get('rangeSelect');
if (multiSelect) {
var found = false;
for (var i = 0; i < inst.selectedDates.length; i++) {
if (date.getTime() == inst.selectedDates[i].getTime()) {
inst.selectedDates.splice(i, 1);
found = true;
break;
}
}
if (!found && inst.selectedDates.length < multiSelect) {
inst.selectedDates.push(date);
}
}
else if (rangeSelect) {
if (inst.pickingRange) {
inst.selectedDates[1] = date;
}
else {
inst.selectedDates = [date, date];
}
inst.pickingRange = !inst.pickingRange;
}
else {
inst.selectedDates = [date];
}
inst.prevDate = $.datepick.newDate(date);
this._updateInput(target);
if (inst.inline || inst.pickingRange || inst.selectedDates.length <
(multiSelect || (rangeSelect ? 2 : 1))) {
this._update(target);
}
else {
this.hide(target);
}
}
},
/* Generate the datepicker content for this control.
@param target (element) the control to affect
@param inst (object) the current instance settings
@return (jQuery) the datepicker content */
_generateContent: function(target, inst) {
var renderer = inst.get('renderer');
var monthsToShow = inst.get('monthsToShow');
monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
inst.drawDate = this._checkMinMax(
inst.drawDate || inst.get('defaultDate') || $.datepick.today(), inst);
var drawDate = $.datepick._applyMonthsOffset($.datepick.newDate(inst.drawDate), inst);
// Generate months
var monthRows = '';
for (var row = 0; row < monthsToShow[0]; row++) {
var months = '';
for (var col = 0; col < monthsToShow[1]; col++) {
months += this._generateMonth(target, inst, drawDate.getFullYear(),
drawDate.getMonth() + 1, renderer, (row == 0 && col == 0));
$.datepick.add(drawDate, 1, 'm');
}
monthRows += this._prepare(renderer.monthRow, inst).replace(/\{months\}/, months);
}
var picker = this._prepare(renderer.picker, inst).replace(/\{months\}/, monthRows).
replace(/\{weekHeader\}/g, this._generateDayHeaders(inst, renderer)) +
($.browser.msie && parseInt($.browser.version, 10) < 7 && !inst.inline ?
'<iframe src="javascript:void(0);" class="' + this._coverClass + '"></iframe>' : '');
// Add commands
var commands = inst.get('commands');
var asDateFormat = inst.get('commandsAsDateFormat');
var addCommand = function(type, open, close, name, classes) {
if (picker.indexOf('{' + type + ':' + name + '}') == -1) {
return;
}
var command = commands[name];
var date = (asDateFormat ? command.date.apply(target, [inst]) : null);
picker = picker.replace(new RegExp('\\{' + type + ':' + name + '\\}', 'g'),
'<' + open +
(command.status ? ' title="' + inst.get(command.status) + '"' : '') +
' class="' + renderer.commandClass + ' ' +
renderer.commandClass + '-' + name + ' ' + classes +
(command.enabled(inst) ? '' : ' ' + renderer.disabledClass) + '">' +
(date ? $.datepick.formatDate(inst.get(command.text), date, inst.getConfig()) :
inst.get(command.text)) + '</' + close + '>');
};
for (var name in commands) {
addCommand('button', 'button type="button"', 'button', name,
renderer.commandButtonClass);
addCommand('link', 'a href="javascript:void(0)"', 'a', name,
renderer.commandLinkClass);
}
picker = $(picker);
if (monthsToShow[1] > 1) {
var count = 0;
$(renderer.monthSelector, picker).each(function() {
var nth = ++count % monthsToShow[1];
$(this).addClass(nth == 1 ? 'first' : (nth == 0 ? 'last' : ''));
});
}
// Add datepicker behaviour
var self = this;
picker.find(renderer.daySelector + ' a').hover(
function() { $(this).addClass(renderer.highlightedClass); },
function() {
(inst.inline ? $(this).parents('.' + self.markerClass) : inst.div).
find(renderer.daySelector + ' a').
removeClass(renderer.highlightedClass);
}).
click(function() {
self.selectDate(target, this);
}).end().
find('select.' + this._monthYearClass + ':not(.' + this._anyYearClass + ')').
change(function() {
var monthYear = $(this).val().split('/');
self.showMonth(target, parseInt(monthYear[1], 10), parseInt(monthYear[0], 10));
}).end().
find('select.' + this._anyYearClass).
click(function() {
$(this).css('visibility', 'hidden').
next('input').css({left: this.offsetLeft, top: this.offsetTop,
width: this.offsetWidth, height: this.offsetHeight}).show().focus();
}).end().
find('input.' + self._monthYearClass).
change(function() {
try {
var year = parseInt($(this).val(), 10);
year = (isNaN(year) ? inst.drawDate.getFullYear() : year);
self.showMonth(target, year, inst.drawDate.getMonth() + 1, inst.drawDate.getDate());
}
catch (e) {
alert(e);
}
}).keydown(function(event) {
if (event.keyCode == 13) { // Enter
$(event.target).change();
}
else if (event.keyCode == 27) { // Escape
$(event.target).hide().prev('select').css('visibility', 'visible');
inst.target.focus();
}
});
// Add command behaviour
picker.find('.' + renderer.commandClass).click(function() {
if (!$(this).hasClass(renderer.disabledClass)) {
var action = this.className.replace(
new RegExp('^.*' + renderer.commandClass + '-([^ ]+).*$'), '$1');
$.datepick.performAction(target, action);
}
});
// Add classes
if (inst.get('isRTL')) {
picker.addClass(renderer.rtlClass);
}
if (monthsToShow[0] * monthsToShow[1] > 1) {
picker.addClass(renderer.multiClass);
}
var pickerClass = inst.get('pickerClass');
if (pickerClass) {
picker.addClass(pickerClass);
}
// Resize
$('body').append(picker);
var width = 0;
picker.find(renderer.monthSelector).each(function() {
width += $(this).outerWidth();
});
picker.width(width / monthsToShow[0]);
// Pre-show customisation
var onShow = inst.get('onShow');
if (onShow) {
onShow.apply(target, [picker, inst]);
}
return picker;
},
/* Generate the content for a single month.
@param target (element) the control to affect
@param inst (object) the current instance settings
@param year (number) the year to generate
@param month (number) the month to generate
@param renderer (object) the rendering templates
@param first (boolean) true if first of multiple months
@return (string) the month content */
_generateMonth: function(target, inst, year, month, renderer, first) {
var daysInMonth = $.datepick.daysInMonth(year, month);
var monthsToShow = inst.get('monthsToShow');
monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
var fixedWeeks = inst.get('fixedWeeks') || (monthsToShow[0] * monthsToShow[1] > 1);
var firstDay = inst.get('firstDay');
var leadDays = ($.datepick.newDate(year, month, 1).getDay() - firstDay + 7) % 7;
var numWeeks = (fixedWeeks ? 6 : Math.ceil((leadDays + daysInMonth) / 7));
var showOtherMonths = inst.get('showOtherMonths');
var selectOtherMonths = inst.get('selectOtherMonths') && showOtherMonths;
var dayStatus = inst.get('dayStatus');
var minDate = (inst.pickingRange ? inst.selectedDates[0] : inst.get('minDate'));
var maxDate = inst.get('maxDate');
var rangeSelect = inst.get('rangeSelect');
var onDate = inst.get('onDate');
var showWeeks = renderer.week.indexOf('{weekOfYear}') > -1;
var calculateWeek = inst.get('calculateWeek');
var today = $.datepick.today();
var drawDate = $.datepick.newDate(year, month, 1);
$.datepick.add(drawDate, -leadDays - (fixedWeeks && (drawDate.getDay() == firstDay) ? 7 : 0), 'd');
var ts = drawDate.getTime();
// Generate weeks
var weeks = '';
for (var week = 0; week < numWeeks; week++) {
var weekOfYear = (!showWeeks ? '' : '<span class="dp' + ts + '">' +
(calculateWeek ? calculateWeek(drawDate) : 0) + '</span>');
var days = '';
for (var day = 0; day < 7; day++) {
var selected = false;
if (rangeSelect && inst.selectedDates.length > 0) {
selected = (drawDate.getTime() >= inst.selectedDates[0] &&
drawDate.getTime() <= inst.selectedDates[1]);
}
else {
for (var i = 0; i < inst.selectedDates.length; i++) {
if (inst.selectedDates[i].getTime() == drawDate.getTime()) {
selected = true;
break;
}
}
}
var dateInfo = (!onDate ? {} :
onDate.apply(target, [drawDate, drawDate.getMonth() + 1 == month]));
var selectable = (selectOtherMonths || drawDate.getMonth() + 1 == month) &&
this._isSelectable(target, drawDate, dateInfo.selectable, minDate, maxDate);
days += this._prepare(renderer.day, inst).replace(/\{day\}/g,
(selectable ? '<a href="javascript:void(0)"' : '<span') +
' class="dp' + ts + ' ' + (dateInfo.dateClass || '') +
(selected && (selectOtherMonths || drawDate.getMonth() + 1 == month) ?
' ' + renderer.selectedClass : '') +
(selectable ? ' ' + renderer.defaultClass : '') +
((drawDate.getDay() || 7) < 6 ? '' : ' ' + renderer.weekendClass) +
(drawDate.getMonth() + 1 == month ? '' : ' ' + renderer.otherMonthClass) +
(drawDate.getTime() == today.getTime() && (drawDate.getMonth() + 1) == month ?
' ' + renderer.todayClass : '') +
(drawDate.getTime() == inst.drawDate.getTime() && (drawDate.getMonth() + 1) == month ?
' ' + renderer.highlightedClass : '') + '"' +
(dateInfo.title || (dayStatus && selectable) ? ' title="' +
(dateInfo.title || $.datepick.formatDate(
dayStatus, drawDate, inst.getConfig())) + '"' : '') + '>' +
(showOtherMonths || (drawDate.getMonth() + 1) == month ?
dateInfo.content || drawDate.getDate() : ' ') +
(selectable ? '</a>' : '</span>'));
$.datepick.add(drawDate, 1, 'd');
ts = drawDate.getTime();
}
weeks += this._prepare(renderer.week, inst).replace(/\{days\}/g, days).
replace(/\{weekOfYear\}/g, weekOfYear);
}
var monthHeader = this._prepare(renderer.month, inst).match(/\{monthHeader(:[^\}]+)?\}/);
monthHeader = (monthHeader[0].length <= 13 ? 'MM yyyy' :
monthHeader[0].substring(13, monthHeader[0].length - 1));
monthHeader = (first ? this._generateMonthSelection(
inst, year, month, minDate, maxDate, monthHeader, renderer) :
$.datepick.formatDate(monthHeader, $.datepick.newDate(year, month, 1), inst.getConfig()));
var weekHeader = this._prepare(renderer.weekHeader, inst).
replace(/\{days\}/g, this._generateDayHeaders(inst, renderer));
return this._prepare(renderer.month, inst).replace(/\{monthHeader(:[^\}]+)?\}/g, monthHeader).
replace(/\{weekHeader\}/g, weekHeader).replace(/\{weeks\}/g, weeks);
},
/* Generate the HTML for the day headers.
@param inst (object) the current instance settings
@param renderer (object) the rendering templates
@return (string) a week's worth of day headers */
_generateDayHeaders: function(inst, renderer) {
var firstDay = inst.get('firstDay');
var dayNames = inst.get('dayNames');
var dayNamesMin = inst.get('dayNamesMin');
var header = '';
for (var day = 0; day < 7; day++) {
var dow = (day + firstDay) % 7;
header += this._prepare(renderer.dayHeader, inst).replace(/\{day\}/g,
'<span class="' + this._curDoWClass + dow + '" title="' +
dayNames[dow] + '">' + dayNamesMin[dow] + '</span>');
}
return header;
},
/* Generate selection controls for month.
@param inst (object) the current instance settings
@param year (number) the year to generate
@param month (number) the month to generate
@param minDate (CDate) the minimum date allowed
@param maxDate (CDate) the maximum date allowed
@param monthHeader (string) the month/year format
@return (string) the month selection content */
_generateMonthSelection: function(inst, year, month, minDate, maxDate, monthHeader) {
if (!inst.get('changeMonth')) {
return $.datepick.formatDate(
monthHeader, $.datepick.newDate(year, month, 1), inst.getConfig());
}
// Months
var monthNames = inst.get('monthNames' + (monthHeader.match(/mm/i) ? '' : 'Short'));
var html = monthHeader.replace(/m+/i, '\\x2E').replace(/y+/i, '\\x2F');
var selector = '<select class="' + this._monthYearClass +
'" title="' + inst.get('monthStatus') + '">';
for (var m = 1; m <= 12; m++) {
if ((!minDate || $.datepick.newDate(year, m, $.datepick.daysInMonth(year, m)).
getTime() >= minDate.getTime()) &&
(!maxDate || $.datepick.newDate(year, m, 1).getTime() <= maxDate.getTime())) {
selector += '<option value="' + m + '/' + year + '"' +
(month == m ? ' selected="selected"' : '') + '>' +
monthNames[m - 1] + '</option>';
}
}
selector += '</select>';
html = html.replace(/\\x2E/, selector);
// Years
var yearRange = inst.get('yearRange');
if (yearRange == 'any') {
selector = '<select class="' + this._monthYearClass + ' ' + this._anyYearClass +
'" title="' + inst.get('yearStatus') + '">' +
'<option>' + year + '</option></select>' +
'<input class="' + this._monthYearClass + ' ' + this._curMonthClass +
month + '" value="' + year + '">';
}
else {
yearRange = yearRange.split(':');
var todayYear = $.datepick.today().getFullYear();
var start = (yearRange[0].match('c[+-].*') ? year + parseInt(yearRange[0].substring(1), 10) :
((yearRange[0].match('[+-].*') ? todayYear : 0) + parseInt(yearRange[0], 10)));
var end = (yearRange[1].match('c[+-].*') ? year + parseInt(yearRange[1].substring(1), 10) :
((yearRange[1].match('[+-].*') ? todayYear : 0) + parseInt(yearRange[1], 10)));
selector = '<select class="' + this._monthYearClass +
'" title="' + inst.get('yearStatus') + '">';
start = $.datepick.add($.datepick.newDate(start + 1, 1, 1), -1, 'd');
end = $.datepick.newDate(end, 1, 1);
var addYear = function(y) {
if (y != 0) {
selector += '<option value="' + month + '/' + y + '"' +
(year == y ? ' selected="selected"' : '') + '>' + y + '</option>';
}
};
if (start.getTime() < end.getTime()) {
start = (minDate && minDate.getTime() > start.getTime() ? minDate : start).getFullYear();
end = (maxDate && maxDate.getTime() < end.getTime() ? maxDate : end).getFullYear();
for (var y = start; y <= end; y++) {
addYear(y);
}
}
else {
start = (maxDate && maxDate.getTime() < start.getTime() ? maxDate : start).getFullYear();
end = (minDate && minDate.getTime() > end.getTime() ? minDate : end).getFullYear();
for (var y = start; y >= end; y--) {
addYear(y);
}
}
selector += '</select>';
}
html = html.replace(/\\x2F/, selector);
return html;
},
/* Prepare a render template for use.
Exclude popup/inline sections that are not applicable.
Localise text of the form: {l10n:name}.
@param text (string) the text to localise
@param inst (object) the current instance settings
@return (string) the localised text */
_prepare: function(text, inst) {
var replaceSection = function(type, retain) {
while (true) {
var start = text.indexOf('{' + type + ':start}');
if (start == -1) {
return;
}
var end = text.substring(start).indexOf('{' + type + ':end}');
if (end > -1) {
text = text.substring(0, start) +
(retain ? text.substr(start + type.length + 8, end - type.length - 8) : '') +
text.substring(start + end + type.length + 6);
}
}
};
replaceSection('inline', inst.inline);
replaceSection('popup', !inst.inline);
var pattern = /\{l10n:([^\}]+)\}/;
var matches = null;
while (matches = pattern.exec(text)) {
text = text.replace(matches[0], inst.get(matches[1]));
}
return text;
}
});
/* jQuery extend now ignores nulls!
@param target (object) the object to extend
@param props (object) the new settings
@return (object) the updated object */
function extendRemove(target, props) {
$.extend(target, props);
for (var name in props)
if (props[name] == null || props[name] == undefined)
target[name] = props[name];
return target;
};
/* Attach the datepicker functionality to a jQuery selection.
@param command (string) the command to run (optional, default 'attach')
@param options (object) the new settings to use for these instances (optional)
@return (jQuery) for chaining further calls */
$.fn.datepick = function(options) {
var otherArgs = Array.prototype.slice.call(arguments, 1);
if ($.inArray(options, ['getDate', 'isDisabled', 'isSelectable', 'options', 'retrieveDate']) > -1) {
return $.datepick[options].apply($.datepick, [this[0]].concat(otherArgs));
}
return this.each(function() {
if (typeof options == 'string') {
$.datepick[options].apply($.datepick, [this].concat(otherArgs));
}
else {
$.datepick._attachPicker(this, options || {});
}
});
};
/* Initialise the datepicker functionality. */
$.datepick = new Datepicker(); // singleton instance
$(function() {
$(document).mousedown($.datepick._checkExternalClick).
resize(function() { $.datepick.hide($.datepick.curInst); });
});
})(jQuery);
 |
| A simple jQuery date picker |
download latest version of jquery.js file from jquery site.
and copy listed below code:
index.html
=========================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>A Simple jQuery Datepicker</title>
<style type="text/css">
@import "css/jquery.datepick.css";
</style>
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
$('#myDate').datepick({dateFormat: 'mm-dd-yyyy'});
});
</script>
</head>
<body>
<p>Select date:<input type="text" id="myDate"></p>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jquery.datepick.css
============================
.datepick {
background-color: #fff;
color: #000;
border: 1px solid #444;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-family: Arial,Helvetica,Sans-serif;
font-size: 90%;
}
.datepick-rtl {
direction: rtl;
}
.datepick-popup {
z-index: 1000;
}
.datepick-disable {
position: absolute;
z-index: 100;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
}
.datepick a {
color: #fff;
text-decoration: none;
}
.datepick a.datepick-disabled {
color: #888;
cursor: auto;
}
.datepick button {
margin: 0.25em;
padding: 0.125em 0em;
background-color: #fcc;
border: none;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
float: left;
width: 100%;
background-color: #000;
color: #fff;
font-size: 90%;
font-weight: bold;
}
.datepick-ctrl {
background-color: #600;
}
.datepick-cmd {
width: 30%;
}
.datepick-cmd:hover {
background-color: #777;
}
.datepick-ctrl .datepick-cmd:hover {
background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
width: 8%;
}
a.datepick-cmd {
height: 1.5em;
}
button.datepick-cmd {
text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
float: left;
padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
float: left;
width: 35%;
text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
float: right;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
float: right;
padding-left: 0%;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today {
float: right;
}
.datepick-rtl .datepick-cmd-next, .datepick-rtl .datepick-cmd-nextJump,
.datepick-rtl .datepick-cmd-close {
float: left;
padding-left: 2%;
padding-right: 0%;
text-align: left;
}
.datepick-month-nav {
float: left;
background-color: #777;
text-align: center;
}
.datepick-month-nav div {
float: left;
width: 12.5%;
margin: 1%;
padding: 1%;
}
.datepick-month-nav span {
color: #888;
}
.datepick-month-row {
clear: left;
}
.datepick-month {
float: left;
width: 15em;
border: 1px solid #444;
text-align: center;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
height: 1.5em;
background-color: #444;
color: #fff;
font-weight: bold;
}
.datepick-month-header select, .datepick-month-header input {
height: 1.4em;
border: none;
}
.datepick-month-header input {
position: absolute;
display: none;
}
.datepick-month table {
width: 100%;
border-collapse: collapse;
}
.datepick-month thead {
border-bottom: 1px solid #aaa;
}
.datepick-month th, .datepick-month td {
margin: 0em;
padding: 0em;
font-weight: normal;
text-align: center;
}
.datepick-month th {
border: 1px solid #777;
}
.datepick-month th, .datepick-month th a {
background-color: #777;
color: #fff;
}
.datepick-month td {
background-color: #eee;
border: 1px solid #aaa;
}
.datepick-month td.datepick-week {
border: 1px solid #777;
}
.datepick-month td.datepick-week * {
background-color: #777;
color: #fff;
border: none;
}
.datepick-month a {
display: block;
width: 100%;
padding: 0.125em 0em;
background-color: #eee;
color: #000;
text-decoration: none;
}
.datepick-month span {
display: block;
width: 100%;
padding: 0.125em 0em;
}
.datepick-month td span {
color: #888;
}
.datepick-month td .datepick-other-month {
background-color: #fff;
}
.datepick-month td .datepick-weekend {
background-color: #ddd;
}
.datepick-month td .datepick-today {
background-color: #f0c0c0;
}
.datepick-month td .datepick-highlight {
background-color: #f08080;
}
.datepick-month td .datepick-selected {
background-color: #777;
color: #fff;
}
.datepick-month th.datepick-week {
background-color: #777;
color: #fff;
}
.datepick-status {
clear: both;
background-color: #ddd;
text-align: center;
}
.datepick-clear-fix {
clear: both;
}
.datepick-cover {
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -1px;
left: -1px;
width: 100px;
height: 100px;
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jquery.datepick.js
============================
// for more see http://keith-wood.name/datepick.html
(function($) { // Hide scope, no $ conflict
/* Datepicker manager. */
function Datepicker() {
this._defaults = {
pickerClass: '', // CSS class to add to this instance of the datepicker
showOnFocus: true, // True for popup on focus, false for not
showTrigger: null, // Element to be cloned for a trigger, null for none
showAnim: 'show', // Name of jQuery animation for popup, '' for no animation
showOptions: {}, // Options for enhanced animations
showSpeed: 'normal', // Duration of display/closure
popupContainer: null, // The element to which a popup calendar is added, null for body
alignment: 'bottom', // Alignment of popup - with nominated corner of input:
// 'top' or 'bottom' aligns depending on language direction,
// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
fixedWeeks: false, // True to always show 6 weeks, false to only show as many as are needed
firstDay: 0, // First day of the week, 0 = Sunday, 1 = Monday, ...
calculateWeek: this.iso8601Week, // Calculate week of the year from a date, null for ISO8601
monthsToShow: 1, // How many months to show, cols or [rows, cols]
monthsOffset: 0, // How many months to offset the primary month by;
// may be a function that takes the date and returns the offset
monthsToStep: 1, // How many months to move when prev/next clicked
monthsToJump: 12, // How many months to move when large prev/next clicked
useMouseWheel: true, // True to use mousewheel if available, false to never use it
changeMonth: true, // True to change month/year via drop-down, false for navigation only
yearRange: 'c-10:c+10', // Range of years to show in drop-down: 'any' for direct text entry
// or 'start:end', where start/end are '+-nn' for relative to today
// or 'c+-nn' for relative to the currently selected date
// or 'nnnn' for an absolute year
shortYearCutoff: '+10', // Cutoff for two-digit year in the current century
showOtherMonths: false, // True to show dates from other months, false to not show them
selectOtherMonths: false, // True to allow selection of dates from other months too
defaultDate: null, // Date to show if no other selected
selectDefaultDate: false, // True to pre-select the default date if no other is chosen
minDate: null, // The minimum selectable date
maxDate: null, // The maximum selectable date
dateFormat: 'mm/dd/yyyy', // Format for dates
autoSize: false, // True to size the input field according to the date format
rangeSelect: false, // Allows for selecting a date range on one date picker
rangeSeparator: ' - ', // Text between two dates in a range
multiSelect: 0, // Maximum number of selectable dates, zero for single select
multiSeparator: ',', // Text between multiple dates
onDate: null, // Callback as a date is added to the datepicker
onShow: null, // Callback just before a datepicker is shown
onChangeMonthYear: null, // Callback when a new month/year is selected
onSelect: null, // Callback when a date is selected
onClose: null, // Callback when a datepicker is closed
altField: null, // Alternate field to update in synch with the datepicker
altFormat: null, // Date format for alternate field, defaults to dateFormat
constrainInput: true, // True to constrain typed input to dateFormat allowed characters
commandsAsDateFormat: false, // True to apply formatDate to the command texts
commands: this.commands // Command actions that may be added to a layout by name
};
this.regional = {
'': { // US/English
monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
dateFormat: 'mm/dd/yyyy', // See options on formatDate
firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
renderer: this.defaultRenderer, // The rendering templates
prevText: '<Prev', // Text for the previous month command
prevStatus: 'Show the previous month', // Status text for the previous month command
prevJumpText: '<<', // Text for the previous year command
prevJumpStatus: 'Show the previous year', // Status text for the previous year command
nextText: 'Next>', // Text for the next month command
nextStatus: 'Show the next month', // Status text for the next month command
nextJumpText: '>>', // Text for the next year command
nextJumpStatus: 'Show the next year', // Status text for the next year command
currentText: 'Current', // Text for the current month command
currentStatus: 'Show the current month', // Status text for the current month command
todayText: 'Today', // Text for the today's month command
todayStatus: 'Show today\'s month', // Status text for the today's month command
clearText: 'Clear', // Text for the clear command
clearStatus: 'Clear all the dates', // Status text for the clear command
closeText: 'Close', // Text for the close command
closeStatus: 'Close the datepicker', // Status text for the close command
yearStatus: 'Change the year', // Status text for year selection
monthStatus: 'Change the month', // Status text for month selection
weekText: 'Wk', // Text for week of the year column header
weekStatus: 'Week of the year', // Status text for week of the year column header
dayStatus: 'Select DD, M d, yyyy', // Status text for selectable days
defaultStatus: 'Select a date', // Status text shown by default
isRTL: false // True if language is right-to-left
}};
$.extend(this._defaults, this.regional['']);
this._disabled = [];
}
$.extend(Datepicker.prototype, {
dataName: 'datepick',
/* Class name added to elements to indicate already configured with datepicker. */
markerClass: 'hasDatepick',
_popupClass: 'datepick-popup', // Marker for popup division
_triggerClass: 'datepick-trigger', // Marker for trigger element
_disableClass: 'datepick-disable', // Marker for disabled element
_coverClass: 'datepick-cover', // Marker for iframe backing element
_monthYearClass: 'datepick-month-year', // Marker for month/year inputs
_curMonthClass: 'datepick-month-', // Marker for current month/year
_anyYearClass: 'datepick-any-year', // Marker for year direct input
_curDoWClass: 'datepick-dow-', // Marker for day of week
commands: { // Command actions that may be added to a layout by name
// name: { // The command name, use '{button:name}' or '{link:name}' in layouts
// text: '', // The field in the regional settings for the displayed text
// status: '', // The field in the regional settings for the status text
// // The keystroke to trigger the action
// keystroke: {keyCode: nn, ctrlKey: boolean, altKey: boolean, shiftKey: boolean},
// enabled: fn, // The function that indicates the command is enabled
// date: fn, // The function to get the date associated with this action
// action: fn} // The function that implements the action
prev: {text: 'prevText', status: 'prevStatus', // Previous month
keystroke: {keyCode: 33}, // Page up
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.day(
$.datepick._applyMonthsOffset($.datepick.add($.datepick.newDate(inst.drawDate),
1 - inst.get('monthsToStep'), 'm'), inst), 1), -1, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), -inst.get('monthsToStep'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, -inst.get('monthsToStep')); }
},
prevJump: {text: 'prevJumpText', status: 'prevJumpStatus', // Previous year
keystroke: {keyCode: 33, ctrlKey: true}, // Ctrl + Page up
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.day(
$.datepick._applyMonthsOffset($.datepick.add($.datepick.newDate(inst.drawDate),
1 - inst.get('monthsToJump'), 'm'), inst), 1), -1, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), -inst.get('monthsToJump'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, -inst.get('monthsToJump')); }
},
next: {text: 'nextText', status: 'nextStatus', // Next month
keystroke: {keyCode: 34}, // Page down
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToStep'), 'm'), inst), 1).
getTime() <= maxDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToStep'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, inst.get('monthsToStep')); }
},
nextJump: {text: 'nextJumpText', status: 'nextJumpStatus', // Next year
keystroke: {keyCode: 34, ctrlKey: true}, // Ctrl + Page down
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToJump'), 'm'), inst), 1).
getTime() <= maxDate.getTime()); },
date: function(inst) {
return $.datepick.day($.datepick._applyMonthsOffset($.datepick.add(
$.datepick.newDate(inst.drawDate), inst.get('monthsToJump'), 'm'), inst), 1); },
action: function(inst) {
$.datepick.changeMonth(this, inst.get('monthsToJump')); }
},
current: {text: 'currentText', status: 'currentStatus', // Current month
keystroke: {keyCode: 36, ctrlKey: true}, // Ctrl + Home
enabled: function(inst) {
var minDate = inst.curMinDate();
var maxDate = inst.get('maxDate');
var curDate = inst.selectedDates[0] || $.datepick.today();
return (!minDate || curDate.getTime() >= minDate.getTime()) &&
(!maxDate || curDate.getTime() <= maxDate.getTime()); },
date: function(inst) {
return inst.selectedDates[0] || $.datepick.today(); },
action: function(inst) {
var curDate = inst.selectedDates[0] || $.datepick.today();
$.datepick.showMonth(this, curDate.getFullYear(), curDate.getMonth() + 1); }
},
today: {text: 'todayText', status: 'todayStatus', // Today's month
keystroke: {keyCode: 36, ctrlKey: true}, // Ctrl + Home
enabled: function(inst) {
var minDate = inst.curMinDate();
var maxDate = inst.get('maxDate');
return (!minDate || $.datepick.today().getTime() >= minDate.getTime()) &&
(!maxDate || $.datepick.today().getTime() <= maxDate.getTime()); },
date: function(inst) { return $.datepick.today(); },
action: function(inst) { $.datepick.showMonth(this); }
},
clear: {text: 'clearText', status: 'clearStatus', // Clear the datepicker
keystroke: {keyCode: 35, ctrlKey: true}, // Ctrl + End
enabled: function(inst) { return true; },
date: function(inst) { return null; },
action: function(inst) { $.datepick.clear(this); }
},
close: {text: 'closeText', status: 'closeStatus', // Close the datepicker
keystroke: {keyCode: 27}, // Escape
enabled: function(inst) { return true; },
date: function(inst) { return null; },
action: function(inst) { $.datepick.hide(this); }
},
prevWeek: {text: 'prevWeekText', status: 'prevWeekStatus', // Previous week
keystroke: {keyCode: 38, ctrlKey: true}, // Ctrl + Up
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.newDate(inst.drawDate), -7, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), -7, 'd'); },
action: function(inst) { $.datepick.changeDay(this, -7); }
},
prevDay: {text: 'prevDayText', status: 'prevDayStatus', // Previous day
keystroke: {keyCode: 37, ctrlKey: true}, // Ctrl + Left
enabled: function(inst) {
var minDate = inst.curMinDate();
return (!minDate || $.datepick.add($.datepick.newDate(inst.drawDate), -1, 'd').
getTime() >= minDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), -1, 'd'); },
action: function(inst) { $.datepick.changeDay(this, -1); }
},
nextDay: {text: 'nextDayText', status: 'nextDayStatus', // Next day
keystroke: {keyCode: 39, ctrlKey: true}, // Ctrl + Right
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.add($.datepick.newDate(inst.drawDate), 1, 'd').
getTime() <= maxDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), 1, 'd'); },
action: function(inst) { $.datepick.changeDay(this, 1); }
},
nextWeek: {text: 'nextWeekText', status: 'nextWeekStatus', // Next week
keystroke: {keyCode: 40, ctrlKey: true}, // Ctrl + Down
enabled: function(inst) {
var maxDate = inst.get('maxDate');
return (!maxDate || $.datepick.add($.datepick.newDate(inst.drawDate), 7, 'd').
getTime() <= maxDate.getTime()); },
date: function(inst) { return $.datepick.add($.datepick.newDate(inst.drawDate), 7, 'd'); },
action: function(inst) { $.datepick.changeDay(this, 7); }
}
},
/* Default template for generating a datepicker. */
defaultRenderer: {
// Anywhere: '{l10n:name}' to insert localised value for name,
// '{link:name}' to insert a link trigger for command name,
// '{button:name}' to insert a button trigger for command name,
// '{popup:start}...{popup:end}' to mark a section for inclusion in a popup datepicker only,
// '{inline:start}...{inline:end}' to mark a section for inclusion in an inline datepicker only
// Overall structure: '{months}' to insert calendar months
picker: '<div class="datepick">' +
'<div class="datepick-nav">{link:prev}{link:today}{link:next}</div>{months}' +
'{popup:start}<div class="datepick-ctrl">{link:clear}{link:close}</div>{popup:end}' +
'<div class="datepick-clear-fix"></div></div>',
// One row of months: '{months}' to insert calendar months
monthRow: '<div class="datepick-month-row">{months}</div>',
// A single month: '{monthHeader:dateFormat}' to insert the month header -
// dateFormat is optional and defaults to 'MM yyyy',
// '{weekHeader}' to insert a week header, '{weeks}' to insert the month's weeks
month: '<div class="datepick-month"><div class="datepick-month-header">{monthHeader}</div>' +
'<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
// A week header: '{days}' to insert individual day names
weekHeader: '<tr>{days}</tr>',
// Individual day header: '{day}' to insert day name
dayHeader: '<th>{day}</th>',
// One week of the month: '{days}' to insert the week's days, '{weekOfYear}' to insert week of year
week: '<tr>{days}</tr>',
// An individual day: '{day}' to insert day value
day: '<td>{day}</td>',
// jQuery selector, relative to picker, for a single month
monthSelector: '.datepick-month',
// jQuery selector, relative to picker, for individual days
daySelector: 'td',
// Class for right-to-left (RTL) languages
rtlClass: 'datepick-rtl',
// Class for multi-month datepickers
multiClass: 'datepick-multi',
// Class for selectable dates
defaultClass: '',
// Class for currently selected dates
selectedClass: 'datepick-selected',
// Class for highlighted dates
highlightedClass: 'datepick-highlight',
// Class for today
todayClass: 'datepick-today',
// Class for days from other months
otherMonthClass: 'datepick-other-month',
// Class for days on weekends
weekendClass: 'datepick-weekend',
// Class prefix for commands
commandClass: 'datepick-cmd',
// Extra class(es) for commands that are buttons
commandButtonClass: '',
// Extra class(es) for commands that are links
commandLinkClass: '',
// Class for disabled commands
disabledClass: 'datepick-disabled'
},
/* Override the default settings for all datepicker instances.
@param settings (object) the new settings to use as defaults
@return (Datepicker) this object */
setDefaults: function(settings) {
$.extend(this._defaults, settings || {});
return this;
},
_ticksTo1970: (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) +
Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000),
_msPerDay: 24 * 60 * 60 * 1000,
ATOM: 'yyyy-mm-dd', // RFC 3339/ISO 8601
COOKIE: 'D, dd M yyyy',
FULL: 'DD, MM d, yyyy',
ISO_8601: 'yyyy-mm-dd',
JULIAN: 'J',
RFC_822: 'D, d M yy',
RFC_850: 'DD, dd-M-yy',
RFC_1036: 'D, d M yy',
RFC_1123: 'D, d M yyyy',
RFC_2822: 'D, d M yyyy',
RSS: 'D, d M yy', // RFC 822
TICKS: '!',
TIMESTAMP: '@',
W3C: 'yyyy-mm-dd', // ISO 8601
/* Format a date object into a string value.
The format can be combinations of the following:
d - day of month (no leading zero)
dd - day of month (two digit)
o - day of year (no leading zeros)
oo - day of year (three digit)
D - day name short
DD - day name long
w - week of year (no leading zero)
ww - week of year (two digit)
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
yy - year (two digit)
yyyy - year (four digit)
@ - Unix timestamp (s since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote
@param format (string) the desired format of the date (optional, default datepicker format)
@param date (Date) the date value to format
@param settings (object) attributes include:
dayNamesShort (string[]) abbreviated names of the days from Sunday (optional)
dayNames (string[]) names of the days from Sunday (optional)
monthNamesShort (string[]) abbreviated names of the months (optional)
monthNames (string[]) names of the months (optional)
calculateWeek (function) function that determines week of the year (optional)
@return (string) the date in the above format */
formatDate: function(format, date, settings) {
if (typeof format != 'string') {
settings = date;
date = format;
format = '';
}
if (!date) {
return '';
}
format = format || this._defaults.dateFormat;
settings = settings || {};
var dayNamesShort = settings.dayNamesShort || this._defaults.dayNamesShort;
var dayNames = settings.dayNames || this._defaults.dayNames;
var monthNamesShort = settings.monthNamesShort || this._defaults.monthNamesShort;
var monthNames = settings.monthNames || this._defaults.monthNames;
var calculateWeek = settings.calculateWeek || this._defaults.calculateWeek;
// Check whether a format character is doubled
var doubled = function(match, step) {
var matches = 1;
while (iFormat + matches < format.length && format.charAt(iFormat + matches) == match) {
matches++;
}
iFormat += matches - 1;
return Math.floor(matches / (step || 1)) > 1;
};
// Format a number, with leading zeroes if necessary
var formatNumber = function(match, value, len, step) {
var num = '' + value;
if (doubled(match, step)) {
while (num.length < len) {
num = '0' + num;
}
}
return num;
};
// Format a name, short or long as requested
var formatName = function(match, value, shortNames, longNames) {
return (doubled(match) ? longNames[value] : shortNames[value]);
};
var output = '';
var literal = false;
for (var iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) == "'" && !doubled("'")) {
literal = false;
}
else {
output += format.charAt(iFormat);
}
}
else {
switch (format.charAt(iFormat)) {
case 'd': output += formatNumber('d', date.getDate(), 2); break;
case 'D': output += formatName('D', date.getDay(),
dayNamesShort, dayNames); break;
case 'o': output += formatNumber('o', this.dayOfYear(date), 3); break;
case 'w': output += formatNumber('w', calculateWeek(date), 2); break;
case 'm': output += formatNumber('m', date.getMonth() + 1, 2); break;
case 'M': output += formatName('M', date.getMonth(),
monthNamesShort, monthNames); break;
case 'y':
output += (doubled('y', 2) ? date.getFullYear() :
(date.getFullYear() % 100 < 10 ? '0' : '') + date.getFullYear() % 100);
break;
case '@': output += Math.floor(date.getTime() / 1000); break;
case '!': output += date.getTime() * 10000 + this._ticksTo1970; break;
case "'":
if (doubled("'")) {
output += "'";
}
else {
literal = true;
}
break;
default:
output += format.charAt(iFormat);
}
}
}
return output;
},
/* Parse a string value into a date object.
See formatDate for the possible formats, plus:
* - ignore rest of string
@param format (string) the expected format of the date ('' for default datepicker format)
@param value (string) the date in the above format
@param settings (object) attributes include:
shortYearCutoff (number) the cutoff year for determining the century (optional)
dayNamesShort (string[]) abbreviated names of the days from Sunday (optional)
dayNames (string[]) names of the days from Sunday (optional)
monthNamesShort (string[]) abbreviated names of the months (optional)
monthNames (string[]) names of the months (optional)
@return (Date) the extracted date value or null if value is blank
@throws errors if the format and/or value are missing,
if the value doesn't match the format,
or if the date is invalid */
parseDate: function(format, value, settings) {
if (value == null) {
throw 'Invalid arguments';
}
value = (typeof value == 'object' ? value.toString() : value + '');
if (value == '') {
return null;
}
format = format || this._defaults.dateFormat;
settings = settings || {};
var shortYearCutoff = settings.shortYearCutoff || this._defaults.shortYearCutoff;
shortYearCutoff = (typeof shortYearCutoff != 'string' ? shortYearCutoff :
this.today().getFullYear() % 100 + parseInt(shortYearCutoff, 10));
var dayNamesShort = settings.dayNamesShort || this._defaults.dayNamesShort;
var dayNames = settings.dayNames || this._defaults.dayNames;
var monthNamesShort = settings.monthNamesShort || this._defaults.monthNamesShort;
var monthNames = settings.monthNames || this._defaults.monthNames;
var year = -1;
var month = -1;
var day = -1;
var doy = -1;
var shortYear = false;
var literal = false;
// Check whether a format character is doubled
var doubled = function(match, step) {
var matches = 1;
while (iFormat + matches < format.length && format.charAt(iFormat + matches) == match) {
matches++;
}
iFormat += matches - 1;
return Math.floor(matches / (step || 1)) > 1;
};
// Extract a number from the string value
var getNumber = function(match, step) {
var isDoubled = doubled(match, step);
var size = [2, 3, isDoubled ? 4 : 2, 11, 20]['oy@!'.indexOf(match) + 1];
var digits = new RegExp('^-?\\d{1,' + size + '}');
var num = value.substring(iValue).match(digits);
if (!num) {
throw 'Missing number at position {0}'.replace(/\{0\}/, iValue);
}
iValue += num[0].length;
return parseInt(num[0], 10);
};
// Extract a name from the string value and convert to an index
var getName = function(match, shortNames, longNames, step) {
var names = (doubled(match, step) ? longNames : shortNames);
for (var i = 0; i < names.length; i++) {
if (value.substr(iValue, names[i].length) == names[i]) {
iValue += names[i].length;
return i + 1;
}
}
throw 'Unknown name at position {0}'.replace(/\{0\}/, iValue);
};
// Confirm that a literal character matches the string value
var checkLiteral = function() {
if (value.charAt(iValue) != format.charAt(iFormat)) {
throw 'Unexpected literal at position {0}'.replace(/\{0\}/, iValue);
}
iValue++;
};
var iValue = 0;
for (var iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) == "'" && !doubled("'")) {
literal = false;
}
else {
checkLiteral();
}
}
else {
switch (format.charAt(iFormat)) {
case 'd': day = getNumber('d'); break;
case 'D': getName('D', dayNamesShort, dayNames); break;
case 'o': doy = getNumber('o'); break;
case 'w': getNumber('w'); break;
case 'm': month = getNumber('m'); break;
case 'M': month = getName('M', monthNamesShort, monthNames); break;
case 'y':
var iSave = iFormat;
shortYear = !doubled('y', 2);
iFormat = iSave;
year = getNumber('y', 2);
break;
case '@':
var date = this._normaliseDate(new Date(getNumber('@') * 1000));
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case '!':
var date = this._normaliseDate(
new Date((getNumber('!') - this._ticksTo1970) / 10000));
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case '*': iValue = value.length; break;
case "'":
if (doubled("'")) {
checkLiteral();
}
else {
literal = true;
}
break;
default: checkLiteral();
}
}
}
if (iValue < value.length) {
throw 'Additional text found at end';
}
if (year == -1) {
year = this.today().getFullYear();
}
else if (year < 100 && shortYear) {
year += (shortYearCutoff == -1 ? 1900 : this.today().getFullYear() -
this.today().getFullYear() % 100 - (year <= shortYearCutoff ? 0 : 100));
}
if (doy > -1) {
month = 1;
day = doy;
for (var dim = this.daysInMonth(year, month); day > dim;
dim = this.daysInMonth(year, month)) {
month++;
day -= dim;
}
}
var date = this.newDate(year, month, day);
if (date.getFullYear() != year || date.getMonth() + 1 != month || date.getDate() != day) {
throw 'Invalid date';
}
return date;
},
/* A date may be specified as an exact value or a relative one.
@param dateSpec (Date or number or string) the date as an object or string
in the given format or an offset - numeric days from today,
or string amounts and periods, e.g. '+1m +2w'
@param defaultDate (Date) the date to use if no other supplied, may be null
@param currentDate (Date) the current date as a possible basis for relative dates,
if null today is used (optional)
@param dateFormat (string) the expected date format - see formatDate above (optional)
@param settings (object) attributes include:
shortYearCutoff (number) the cutoff year for determining the century (optional)
dayNamesShort (string[7]) abbreviated names of the days from Sunday (optional)
dayNames (string[7]) names of the days from Sunday (optional)
monthNamesShort (string[12]) abbreviated names of the months (optional)
monthNames (string[12]) names of the months (optional)
@return (Date) the decoded date */
determineDate: function(dateSpec, defaultDate, currentDate, dateFormat, settings) {
if (currentDate && typeof currentDate != 'object') {
settings = dateFormat;
dateFormat = currentDate;
currentDate = null;
}
if (typeof dateFormat != 'string') {
settings = dateFormat;
dateFormat = '';
}
var offsetString = function(offset) {
try {
return $.datepick.parseDate(dateFormat, offset, settings);
}
catch (e) {
// Ignore
}
offset = offset.toLowerCase();
var date = (offset.match(/^c/) && currentDate ? $.datepick.newDate(currentDate) : null) ||
$.datepick.today();
var pattern = /([+-]?[0-9]+)\s*(d|w|m|y)?/g;
var matches = pattern.exec(offset);
while (matches) {
date = $.datepick.add(date, parseInt(matches[1], 10), matches[2] || 'd');
matches = pattern.exec(offset);
}
return date;
};
defaultDate = (defaultDate ? $.datepick.newDate(defaultDate) : null);
dateSpec = (dateSpec == null ? defaultDate :
(typeof dateSpec == 'string' ? offsetString(dateSpec) : (typeof dateSpec == 'number' ?
(isNaN(dateSpec) || dateSpec == Infinity || dateSpec == -Infinity ? defaultDate :
$.datepick.add($.datepick.today(), dateSpec, 'd')) : $.datepick.newDate(dateSpec))));
return dateSpec;
},
/* Find the number of days in a given month.
@param year (Date) the date to get days for or
(number) the full year
@param month (number) the month (1 to 12)
@return (number) the number of days in this month */
daysInMonth: function(year, month) {
month = (year.getFullYear ? year.getMonth() + 1 : month);
year = (year.getFullYear ? year.getFullYear() : year);
return this.newDate(year, month + 1, 0).getDate();
},
/* Calculate the day of the year for a date.
@param year (Date) the date to get the day-of-year for or
(number) the full year
@param month (number) the month (1-12)
@param day (number) the day
@return (number) the day of the year */
dayOfYear: function(year, month, day) {
var date = (year.getFullYear ? year : this.newDate(year, month, day));
var newYear = this.newDate(date.getFullYear(), 1, 1);
return Math.floor((date.getTime() - newYear.getTime()) / this._msPerDay) + 1;
},
/* Set as calculateWeek to determine the week of the year based on the ISO 8601 definition.
@param year (Date) the date to get the week for or
(number) the full year
@param month (number) the month (1-12)
@param day (number) the day
@return (number) the number of the week within the year that contains this date */
iso8601Week: function(year, month, day) {
var checkDate = (year.getFullYear ?
new Date(year.getTime()) : this.newDate(year, month, day));
// Find Thursday of this week starting on Monday
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
checkDate.setMonth(0, 1); // Compare with Jan 1
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
},
/* Return today's date.
@return (Date) today */
today: function() {
return this._normaliseDate(new Date());
},
/* Return a new date.
@param year (Date) the date to clone or
(number) the year
@param month (number) the month (1-12)
@param day (number) the day
@return (Date) the date */
newDate: function(year, month, day) {
return (!year ? null : (year.getFullYear ? this._normaliseDate(new Date(year.getTime())) :
new Date(year, month - 1, day, 12)));
},
/* Standardise a date into a common format - time portion is 12 noon.
@param date (Date) the date to standardise
@return (Date) the normalised date */
_normaliseDate: function(date) {
if (date) {
date.setHours(12, 0, 0, 0);
}
return date;
},
/* Set the year for a date.
@param date (Date) the original date
@param year (number) the new year
@return the updated date */
year: function(date, year) {
date.setFullYear(year);
return this._normaliseDate(date);
},
/* Set the month for a date.
@param date (Date) the original date
@param month (number) the new month (1-12)
@return the updated date */
month: function(date, month) {
date.setMonth(month - 1);
return this._normaliseDate(date);
},
/* Set the day for a date.
@param date (Date) the original date
@param day (number) the new day of the month
@return the updated date */
day: function(date, day) {
date.setDate(day);
return this._normaliseDate(date);
},
/* Add a number of periods to a date.
@param date (Date) the original date
@param amount (number) the number of periods
@param period (string) the type of period d/w/m/y
@return the updated date */
add: function(date, amount, period) {
if (period == 'd' || period == 'w') {
this._normaliseDate(date);
date.setDate(date.getDate() + amount * (period == 'w' ? 7 : 1));
}
else {
var year = date.getFullYear() + (period == 'y' ? amount : 0);
var month = date.getMonth() + (period == 'm' ? amount : 0);
date.setTime($.datepick.newDate(year, month + 1,
Math.min(date.getDate(), this.daysInMonth(year, month + 1))).getTime());
}
return date;
},
/* Apply the months offset value to a date.
@param date (Date) the original date
@param inst (object) the current instance settings
@return (Date) the updated date */
_applyMonthsOffset: function(date, inst) {
var monthsOffset = inst.get('monthsOffset');
if ($.isFunction(monthsOffset)) {
monthsOffset = monthsOffset.apply(inst.target[0], [date]);
}
return $.datepick.add(date, -monthsOffset, 'm');
},
/* Attach the datepicker functionality to an input field.
@param target (element) the control to affect
@param settings (object) the custom options for this instance */
_attachPicker: function(target, settings) {
target = $(target);
if (target.hasClass(this.markerClass)) {
return;
}
target.addClass(this.markerClass);
var inst = {target: target, selectedDates: [], drawDate: null, pickingRange: false,
inline: ($.inArray(target[0].nodeName.toLowerCase(), ['div', 'span']) > -1),
get: function(name) { // Get a setting value, defaulting if necessary
var value = this.settings[name] !== undefined ?
this.settings[name] : $.datepick._defaults[name];
if ($.inArray(name, ['defaultDate', 'minDate', 'maxDate']) > -1) { // Decode date settings
value = $.datepick.determineDate(
value, null, this.selectedDates[0], this.get('dateFormat'), inst.getConfig());
}
return value;
},
curMinDate: function() {
return (this.pickingRange ? this.selectedDates[0] : this.get('minDate'));
},
getConfig: function() {
return {dayNamesShort: this.get('dayNamesShort'), dayNames: this.get('dayNames'),
monthNamesShort: this.get('monthNamesShort'), monthNames: this.get('monthNames'),
calculateWeek: this.get('calculateWeek'),
shortYearCutoff: this.get('shortYearCutoff')};
}
};
$.data(target[0], this.dataName, inst);
var inlineSettings = ($.fn.metadata ? target.metadata() : {});
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
if (inst.inline) {
inst.drawDate = $.datepick._checkMinMax($.datepick.newDate(inst.selectedDates[0] ||
inst.get('defaultDate') || $.datepick.today()), inst);
inst.prevDate = $.datepick.newDate(inst.drawDate);
this._update(target[0]);
if ($.fn.mousewheel) {
target.mousewheel(this._doMouseWheel);
}
}
else {
this._attachments(target, inst);
target.bind('keydown.' + this.dataName, this._keyDown).
bind('keypress.' + this.dataName, this._keyPress).
bind('keyup.' + this.dataName, this._keyUp);
if (target.attr('disabled')) {
this.disable(target[0]);
}
}
},
/* Retrieve the settings for a datepicker control.
@param target (element) the control to affect
@param name (string) the name of the setting (optional)
@return (object) the current instance settings (name == 'all') or
(object) the default settings (no name) or
(any) the setting value (name supplied) */
options: function(target, name) {
var inst = $.data(target, this.dataName);
return (inst ? (name ? (name == 'all' ?
inst.settings : inst.settings[name]) : $.datepick._defaults) : {});
},
/* Reconfigure the settings for a datepicker control.
@param target (element) the control to affect
@param settings (object) the new options for this instance or
(string) an individual property name
@param value (any) the individual property value (omit if settings is an object) */
option: function(target, settings, value) {
target = $(target);
if (!target.hasClass(this.markerClass)) {
return;
}
settings = settings || {};
if (typeof settings == 'string') {
var name = settings;
settings = {};
settings[name] = value;
}
var inst = $.data(target[0], this.dataName);
var dates = inst.selectedDates;
extendRemove(inst.settings, settings);
this.setDate(target[0], dates, null, false, true);
inst.pickingRange = false;
inst.drawDate = $.datepick.newDate(this._checkMinMax(
(settings.defaultDate ? inst.get('defaultDate') : inst.drawDate) ||
inst.get('defaultDate') || $.datepick.today(), inst));
if (!inst.inline) {
this._attachments(target, inst);
}
if (inst.inline || inst.div) {
this._update(target[0]);
}
},
/* Attach events and trigger, if necessary.
@param target (jQuery) the control to affect
@param inst (object) the current instance settings */
_attachments: function(target, inst) {
target.unbind('focus.' + this.dataName);
if (inst.get('showOnFocus')) {
target.bind('focus.' + this.dataName, this.show);
}
if (inst.trigger) {
inst.trigger.remove();
}
var trigger = inst.get('showTrigger');
inst.trigger = (!trigger ? $([]) :
$(trigger).clone().removeAttr('id').addClass(this._triggerClass)
[inst.get('isRTL') ? 'insertBefore' : 'insertAfter'](target).
click(function() {
if (!$.datepick.isDisabled(target[0])) {
$.datepick[$.datepick.curInst == inst ?
'hide' : 'show'](target[0]);
}
}));
this._autoSize(target, inst);
var dates = this._extractDates(inst, target.val());
if (dates) {
this.setDate(target[0], dates, null, true);
}
if (inst.get('selectDefaultDate') && inst.get('defaultDate') &&
inst.selectedDates.length == 0) {
this.setDate(target[0], $.datepick.newDate(inst.get('defaultDate') || $.datepick.today()));
}
},
/* Apply the maximum length for the date format.
@param inst (object) the current instance settings */
_autoSize: function(target, inst) {
if (inst.get('autoSize') && !inst.inline) {
var date = $.datepick.newDate(2009, 10, 20); // Ensure double digits
var dateFormat = inst.get('dateFormat');
if (dateFormat.match(/[DM]/)) {
var findMax = function(names) {
var max = 0;
var maxI = 0;
for (var i = 0; i < names.length; i++) {
if (names[i].length > max) {
max = names[i].length;
maxI = i;
}
}
return maxI;
};
date.setMonth(findMax(inst.get(dateFormat.match(/MM/) ? // Longest month
'monthNames' : 'monthNamesShort')));
date.setDate(findMax(inst.get(dateFormat.match(/DD/) ? // Longest day
'dayNames' : 'dayNamesShort')) + 20 - date.getDay());
}
inst.target.attr('size', $.datepick.formatDate(dateFormat, date, inst.getConfig()).length);
}
},
/* Remove the datepicker functionality from a control.
@param target (element) the control to affect */
destroy: function(target) {
target = $(target);
if (!target.hasClass(this.markerClass)) {
return;
}
var inst = $.data(target[0], this.dataName);
if (inst.trigger) {
inst.trigger.remove();
}
target.removeClass(this.markerClass).empty().unbind('.' + this.dataName);
if (inst.inline && $.fn.mousewheel) {
target.unmousewheel();
}
if (!inst.inline && inst.get('autoSize')) {
target.removeAttr('size');
}
$.removeData(target[0], this.dataName);
},
/* Apply multiple event functions.
Usage, for example: onShow: multipleEvents(fn1, fn2, ...)
@param fns (function...) the functions to apply */
multipleEvents: function(fns) {
var funcs = arguments;
return function(args) {
for (var i = 0; i < funcs.length; i++) {
funcs[i].apply(this, arguments);
}
};
},
/* Enable the datepicker and any associated trigger.
@param target (element) the control to use */
enable: function(target) {
var $target = $(target);
if (!$target.hasClass(this.markerClass)) {
return;
}
var inst = $.data(target, this.dataName);
if (inst.inline)
$target.children('.' + this._disableClass).remove().end().
find('button,select').attr('disabled', '').end().
find('a').attr('href', 'javascript:void(0)');
else {
target.disabled = false;
inst.trigger.filter('button.' + this._triggerClass).
attr('disabled', '').end().
filter('img.' + this._triggerClass).
css({opacity: '1.0', cursor: ''});
}
this._disabled = $.map(this._disabled,
function(value) { return (value == target ? null : value); }); // Delete entry
},
/* Disable the datepicker and any associated trigger.
@param target (element) the control to use */
disable: function(target) {
var $target = $(target);
if (!$target.hasClass(this.markerClass))
return;
var inst = $.data(target, this.dataName);
if (inst.inline) {
var inline = $target.children(':last');
var offset = inline.offset();
var relOffset = {left: 0, top: 0};
inline.parents().each(function() {
if ($(this).css('position') == 'relative') {
relOffset = $(this).offset();
return false;
}
});
var zIndex = $target.css('zIndex');
zIndex = (zIndex == 'auto' ? 0 : parseInt(zIndex, 10)) + 1;
$target.prepend('<div class="' + this._disableClass + '" style="' +
'width: ' + inline.outerWidth() + 'px; height: ' + inline.outerHeight() +
'px; left: ' + (offset.left - relOffset.left) + 'px; top: ' +
(offset.top - relOffset.top) + 'px; z-index: ' + zIndex + '"></div>').
find('button,select').attr('disabled', 'disabled').end().
find('a').removeAttr('href');
}
else {
target.disabled = true;
inst.trigger.filter('button.' + this._triggerClass).
attr('disabled', 'disabled').end().
filter('img.' + this._triggerClass).
css({opacity: '0.5', cursor: 'default'});
}
this._disabled = $.map(this._disabled,
function(value) { return (value == target ? null : value); }); // Delete entry
this._disabled.push(target);
},
/* Is the first field in a jQuery collection disabled as a datepicker?
@param target (element) the control to examine
@return (boolean) true if disabled, false if enabled */
isDisabled: function(target) {
return (target && $.inArray(target, this._disabled) > -1);
},
/* Show a popup datepicker.
@param target (event) a focus event or
(element) the control to use */
show: function(target) {
target = target.target || target;
var inst = $.data(target, $.datepick.dataName);
if ($.datepick.curInst == inst) {
return;
}
if ($.datepick.curInst) {
$.datepick.hide($.datepick.curInst, true);
}
if (inst) {
// Retrieve existing date(s)
inst.lastVal = null;
inst.selectedDates = $.datepick._extractDates(inst, $(target).val());
inst.pickingRange = false;
inst.drawDate = $.datepick._checkMinMax($.datepick.newDate(inst.selectedDates[0] ||
inst.get('defaultDate') || $.datepick.today()), inst);
inst.prevDate = $.datepick.newDate(inst.drawDate);
$.datepick.curInst = inst;
// Generate content
$.datepick._update(target, true);
// Adjust position before showing
var offset = $.datepick._checkOffset(inst);
inst.div.css({left: offset.left, top: offset.top});
// And display
var showAnim = inst.get('showAnim');
var showSpeed = inst.get('showSpeed');
showSpeed = (showSpeed == 'normal' && $.ui && $.ui.version >= '1.8' ?
'_default' : showSpeed);
var postProcess = function() {
var cover = inst.div.find('.' + $.datepick._coverClass);
if (cover.length) {
var borders = $.datepick._getBorders(inst.div);
cover.css({left: -borders[0], top: -borders[1], // IE6- only
width: inst.div.outerWidth() + borders[0],
height: inst.div.outerHeight() + borders[1]});
}
};
if ($.effects && $.effects[showAnim]) {
var data = inst.div.data(); // Update old effects data
for (var key in data) {
if (key.match(/^ec\.storage\./)) {
data[key] = inst._mainDiv.css(key.replace(/ec\.storage\./, ''));
}
}
inst.div.data(data).show(showAnim, inst.get('showOptions'), showSpeed, postProcess);
}
else {
inst.div[showAnim || 'show']((showAnim ? showSpeed : ''), postProcess);
}
if (!showAnim) {
postProcess();
}
}
},
/* Extract possible dates from a string.
@param inst (object) the current instance settings
@param text (string) the text to extract from
@return (CDate[]) the extracted dates */
_extractDates: function(inst, datesText) {
if (datesText == inst.lastVal) {
return;
}
inst.lastVal = datesText;
var dateFormat = inst.get('dateFormat');
var multiSelect = inst.get('multiSelect');
var rangeSelect = inst.get('rangeSelect');
datesText = datesText.split(multiSelect ? inst.get('multiSeparator') :
(rangeSelect ? inst.get('rangeSeparator') : '\x00'));
var dates = [];
for (var i = 0; i < datesText.length; i++) {
try {
var date = $.datepick.parseDate(dateFormat, datesText[i], inst.getConfig());
if (date) {
var found = false;
for (var j = 0; j < dates.length; j++) {
if (dates[j].getTime() == date.getTime()) {
found = true;
break;
}
}
if (!found) {
dates.push(date);
}
}
}
catch (e) {
// Ignore
}
}
dates.splice(multiSelect || (rangeSelect ? 2 : 1), dates.length);
if (rangeSelect && dates.length == 1) {
dates[1] = dates[0];
}
return dates;
},
/* Update the datepicker display.
@param target (event) a focus event or
(element) the control to use
@param hidden (boolean) true to initially hide the datepicker */
_update: function(target, hidden) {
target = $(target.target || target);
var inst = $.data(target[0], $.datepick.dataName);
if (inst) {
if (inst.inline || $.datepick.curInst == inst) {
var onChange = inst.get('onChangeMonthYear');
if (onChange && (!inst.prevDate ||
inst.prevDate.getFullYear() != inst.drawDate.getFullYear() ||
inst.prevDate.getMonth() != inst.drawDate.getMonth())) {
onChange.apply(target[0], [inst.drawDate.getFullYear(), inst.drawDate.getMonth() + 1]);
}
}
if (inst.inline) {
target.html(this._generateContent(target[0], inst));
}
else if ($.datepick.curInst == inst) {
if (!inst.div) {
inst.div = $('<div></div>').addClass(this._popupClass).
css({display: (hidden ? 'none' : 'static'), position: 'absolute',
left: target.offset().left,
top: target.offset().top + target.outerHeight()}).
appendTo($(inst.get('popupContainer') || 'body'));
if ($.fn.mousewheel) {
inst.div.mousewheel(this._doMouseWheel);
}
}
inst.div.html(this._generateContent(target[0], inst));
target.focus();
}
}
},
/* Update the input field and any alternate field with the current dates.
@param target (element) the control to use
@param keyUp (boolean, internal) true if coming from keyUp processing */
_updateInput: function(target, keyUp) {
var inst = $.data(target, this.dataName);
if (inst) {
var value = '';
var altValue = '';
var sep = (inst.get('multiSelect') ? inst.get('multiSeparator') :
inst.get('rangeSeparator'));
var dateFormat = inst.get('dateFormat');
var altFormat = inst.get('altFormat') || dateFormat;
for (var i = 0; i < inst.selectedDates.length; i++) {
value += (keyUp ? '' : (i > 0 ? sep : '') + $.datepick.formatDate(
dateFormat, inst.selectedDates[i], inst.getConfig()));
altValue += (i > 0 ? sep : '') + $.datepick.formatDate(
altFormat, inst.selectedDates[i], inst.getConfig());
}
if (!inst.inline && !keyUp) {
$(target).val(value);
}
$(inst.get('altField')).val(altValue);
var onSelect = inst.get('onSelect');
if (onSelect && !keyUp && !inst.inSelect) {
inst.inSelect = true; // Prevent endless loops
onSelect.apply(target, [inst.selectedDates]);
inst.inSelect = false;
}
}
},
/* Retrieve the size of left and top borders for an element.
@param elem (jQuery) the element of interest
@return (number[2]) the left and top borders */
_getBorders: function(elem) {
var convert = function(value) {
var extra = ($.browser.msie ? 1 : 0);
return {thin: 1 + extra, medium: 3 + extra, thick: 5 + extra}[value] || value;
};
return [parseFloat(convert(elem.css('border-left-width'))),
parseFloat(convert(elem.css('border-top-width')))];
},
/* Check positioning to remain on the screen.
@param inst (object) the current instance settings
@return (object) the updated offset for the datepicker */
_checkOffset: function(inst) {
var base = (inst.target.is(':hidden') && inst.trigger ? inst.trigger : inst.target);
var offset = base.offset();
var isFixed = false;
$(inst.target).parents().each(function() {
isFixed |= $(this).css('position') == 'fixed';
return !isFixed;
});
if (isFixed && $.browser.opera) { // Correction for Opera when fixed and scrolled
offset.left -= document.documentElement.scrollLeft;
offset.top -= document.documentElement.scrollTop;
}
var browserWidth = (!$.browser.mozilla || document.doctype ?
document.documentElement.clientWidth : 0) || document.body.clientWidth;
var browserHeight = (!$.browser.mozilla || document.doctype ?
document.documentElement.clientHeight : 0) || document.body.clientHeight;
if (browserWidth == 0) {
return offset;
}
var alignment = inst.get('alignment');
var isRTL = inst.get('isRTL');
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var above = offset.top - inst.div.outerHeight() -
(isFixed && $.browser.opera ? document.documentElement.scrollTop : 0);
var below = offset.top + base.outerHeight();
var alignL = offset.left;
var alignR = offset.left + base.outerWidth() - inst.div.outerWidth() -
(isFixed && $.browser.opera ? document.documentElement.scrollLeft : 0);
var tooWide = (offset.left + inst.div.outerWidth() - scrollX) > browserWidth;
var tooHigh = (offset.top + inst.target.outerHeight() + inst.div.outerHeight() -
scrollY) > browserHeight;
if (alignment == 'topLeft') {
offset = {left: alignL, top: above};
}
else if (alignment == 'topRight') {
offset = {left: alignR, top: above};
}
else if (alignment == 'bottomLeft') {
offset = {left: alignL, top: below};
}
else if (alignment == 'bottomRight') {
offset = {left: alignR, top: below};
}
else if (alignment == 'top') {
offset = {left: (isRTL || tooWide ? alignR : alignL), top: above};
}
else { // bottom
offset = {left: (isRTL || tooWide ? alignR : alignL),
top: (tooHigh ? above : below)};
}
offset.left = Math.max((isFixed ? 0 : scrollX), offset.left - (isFixed ? scrollX : 0));
offset.top = Math.max((isFixed ? 0 : scrollY), offset.top - (isFixed ? scrollY : 0));
return offset;
},
/* Close date picker if clicked elsewhere.
@param event (MouseEvent) the mouse click to check */
_checkExternalClick: function(event) {
if (!$.datepick.curInst) {
return;
}
var target = $(event.target);
if (!target.parents().andSelf().hasClass($.datepick._popupClass) &&
!target.hasClass($.datepick.markerClass) &&
!target.parents().andSelf().hasClass($.datepick._triggerClass)) {
$.datepick.hide($.datepick.curInst);
}
},
/* Hide a popup datepicker.
@param target (element) the control to use or
(object) the current instance settings
@param immediate (boolean) true to close immediately without animation */
hide: function(target, immediate) {
var inst = $.data(target, this.dataName) || target;
if (inst && inst == $.datepick.curInst) {
var showAnim = (immediate ? '' : inst.get('showAnim'));
var showSpeed = inst.get('showSpeed');
showSpeed = (showSpeed == 'normal' && $.ui && $.ui.version >= '1.8' ?
'_default' : showSpeed);
var postProcess = function() {
inst.div.remove();
inst.div = null;
$.datepick.curInst = null;
var onClose = inst.get('onClose');
if (onClose) {
onClose.apply(target, [inst.selectedDates]);
}
};
inst.div.stop();
if ($.effects && $.effects[showAnim]) {
inst.div.hide(showAnim, inst.get('showOptions'), showSpeed, postProcess);
}
else {
var hideAnim = (showAnim == 'slideDown' ? 'slideUp' :
(showAnim == 'fadeIn' ? 'fadeOut' : 'hide'));
inst.div[hideAnim]((showAnim ? showSpeed : ''), postProcess);
}
if (!showAnim) {
postProcess();
}
}
},
/* Handle keystrokes in the datepicker.
@param event (KeyEvent) the keystroke
@return (boolean) true if not handled, false if handled */
_keyDown: function(event) {
var target = event.target;
var inst = $.data(target, $.datepick.dataName);
var handled = false;
if (inst.div) {
if (event.keyCode == 9) { // Tab - close
$.datepick.hide(target);
}
else if (event.keyCode == 13) { // Enter - select
$.datepick.selectDate(target,
$('a.' + inst.get('renderer').highlightedClass, inst.div)[0]);
handled = true;
}
else { // Command keystrokes
var commands = inst.get('commands');
for (var name in commands) {
var command = commands[name];
if (command.keystroke.keyCode == event.keyCode &&
!!command.keystroke.ctrlKey == !!(event.ctrlKey || event.metaKey) &&
!!command.keystroke.altKey == event.altKey &&
!!command.keystroke.shiftKey == event.shiftKey) {
$.datepick.performAction(target, name);
handled = true;
break;
}
}
}
}
else { // Show on 'current' keystroke
var command = inst.get('commands').current;
if (command.keystroke.keyCode == event.keyCode &&
!!command.keystroke.ctrlKey == !!(event.ctrlKey || event.metaKey) &&
!!command.keystroke.altKey == event.altKey &&
!!command.keystroke.shiftKey == event.shiftKey) {
$.datepick.show(target);
handled = true;
}
}
inst.ctrlKey = ((event.keyCode < 48 && event.keyCode != 32) ||
event.ctrlKey || event.metaKey);
if (handled) {
event.preventDefault();
event.stopPropagation();
}
return !handled;
},
/* Filter keystrokes in the datepicker.
@param event (KeyEvent) the keystroke
@return (boolean) true if allowed, false if not allowed */
_keyPress: function(event) {
var target = event.target;
var inst = $.data(target, $.datepick.dataName);
if (inst && inst.get('constrainInput')) {
var ch = String.fromCharCode(event.keyCode || event.charCode);
var allowedChars = $.datepick._allowedChars(inst);
return (event.metaKey || inst.ctrlKey || ch < ' ' ||
!allowedChars || allowedChars.indexOf(ch) > -1);
}
return true;
},
/* Determine the set of characters allowed by the date format.
@param inst (object) the current instance settings
@return (string) the set of allowed characters, or null if anything allowed */
_allowedChars: function(inst) {
var dateFormat = inst.get('dateFormat');
var allowedChars = (inst.get('multiSelect') ? inst.get('multiSeparator') :
(inst.get('rangeSelect') ? inst.get('rangeSeparator') : ''));
var literal = false;
var hasNum = false;
for (var i = 0; i < dateFormat.length; i++) {
var ch = dateFormat.charAt(i);
if (literal) {
if (ch == "'" && dateFormat.charAt(i + 1) != "'") {
literal = false;
}
else {
allowedChars += ch;
}
}
else {
switch (ch) {
case 'd': case 'm': case 'o': case 'w':
allowedChars += (hasNum ? '' : '0123456789'); hasNum = true; break;
case 'y': case '@': case '!':
allowedChars += (hasNum ? '' : '0123456789') + '-'; hasNum = true; break;
case 'J':
allowedChars += (hasNum ? '' : '0123456789') + '-.'; hasNum = true; break;
case 'D': case 'M': case 'Y':
return null; // Accept anything
case "'":
if (dateFormat.charAt(i + 1) == "'") {
allowedChars += "'";
}
else {
literal = true;
}
break;
default:
allowedChars += ch;
}
}
}
return allowedChars;
},
/* Synchronise datepicker with the field.
@param event (KeyEvent) the keystroke
@return (boolean) true if allowed, false if not allowed */
_keyUp: function(event) {
var target = event.target;
var inst = $.data(target, $.datepick.dataName);
if (inst && !inst.ctrlKey && inst.lastVal != inst.target.val()) {
try {
var dates = $.datepick._extractDates(inst, inst.target.val());
if (dates.length > 0) {
$.datepick.setDate(target, dates, null, true);
}
}
catch (event) {
// Ignore
}
}
return true;
},
/* Increment/decrement month/year on mouse wheel activity.
@param event (event) the mouse wheel event
@param delta (number) the amount of change */
_doMouseWheel: function(event, delta) {
var target = ($.datepick.curInst && $.datepick.curInst.target[0]) ||
$(event.target).closest('.' + $.datepick.markerClass)[0];
if ($.datepick.isDisabled(target)) {
return;
}
var inst = $.data(target, $.datepick.dataName);
if (inst.get('useMouseWheel')) {
delta = ($.browser.opera ? -delta : delta);
delta = (delta < 0 ? -1 : +1);
$.datepick.changeMonth(target,
-inst.get(event.ctrlKey ? 'monthsToJump' : 'monthsToStep') * delta);
}
event.preventDefault();
},
/* Clear an input and close a popup datepicker.
@param target (element) the control to use */
clear: function(target) {
var inst = $.data(target, this.dataName);
if (inst) {
inst.selectedDates = [];
this.hide(target);
if (inst.get('selectDefaultDate') && inst.get('defaultDate')) {
this.setDate(target,
$.datepick.newDate(inst.get('defaultDate') ||$.datepick.today()));
}
else {
this._updateInput(target);
}
}
},
/* Retrieve the selected date(s) for a datepicker.
@param target (element) the control to examine
@return (CDate[]) the selected date(s) */
getDate: function(target) {
var inst = $.data(target, this.dataName);
return (inst ? inst.selectedDates : []);
},
/* Set the selected date(s) for a datepicker.
@param target (element) the control to examine
@param dates (CDate or number or string or [] of these) the selected date(s)
@param endDate (CDate or number or string) the ending date for a range (optional)
@param keyUp (boolean, internal) true if coming from keyUp processing
@param setOpt (boolean, internal) true if coming from option processing */
setDate: function(target, dates, endDate, keyUp, setOpt) {
var inst = $.data(target, this.dataName);
if (inst) {
if (!$.isArray(dates)) {
dates = [dates];
if (endDate) {
dates.push(endDate);
}
}
var dateFormat = inst.get('dateFormat');
var minDate = inst.get('minDate');
var maxDate = inst.get('maxDate');
var curDate = inst.selectedDates[0];
inst.selectedDates = [];
for (var i = 0; i < dates.length; i++) {
var date = $.datepick.determineDate(
dates[i], null, curDate, dateFormat, inst.getConfig());
if (date) {
if ((!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime())) {
var found = false;
for (var j = 0; j < inst.selectedDates.length; j++) {
if (inst.selectedDates[j].getTime() == date.getTime()) {
found = true;
break;
}
}
if (!found) {
inst.selectedDates.push(date);
}
}
}
}
var rangeSelect = inst.get('rangeSelect');
inst.selectedDates.splice(inst.get('multiSelect') ||
(rangeSelect ? 2 : 1), inst.selectedDates.length);
if (rangeSelect) {
switch (inst.selectedDates.length) {
case 1: inst.selectedDates[1] = inst.selectedDates[0]; break;
case 2: inst.selectedDates[1] =
(inst.selectedDates[0].getTime() > inst.selectedDates[1].getTime() ?
inst.selectedDates[0] : inst.selectedDates[1]); break;
}
inst.pickingRange = false;
}
inst.prevDate = (inst.drawDate ? $.datepick.newDate(inst.drawDate) : null);
inst.drawDate = this._checkMinMax($.datepick.newDate(inst.selectedDates[0] ||
inst.get('defaultDate') || $.datepick.today()), inst);
if (!setOpt) {
this._update(target);
this._updateInput(target, keyUp);
}
}
},
/* Determine whether a date is selectable for this datepicker.
@param target (element) the control to check
@param date (Date or string or number) the date to check
@return (boolean) true if selectable, false if not */
isSelectable: function(target, date) {
var inst = $.data(target, this.dataName);
if (!inst) {
return false;
}
date = $.datepick.determineDate(date, inst.selectedDates[0] || this.today(), null,
inst.get('dateFormat'), inst.getConfig());
return this._isSelectable(target, date, inst.get('onDate'),
inst.get('minDate'), inst.get('maxDate'));
},
/* Internally determine whether a date is selectable for this datepicker.
@param target (element) the control to check
@param date (Date) the date to check
@param onDate (function or boolean) any onDate callback or callback.selectable
@param mindate (Date) the minimum allowed date
@param maxdate (Date) the maximum allowed date
@return (boolean) true if selectable, false if not */
_isSelectable: function(target, date, onDate, minDate, maxDate) {
var dateInfo = (typeof onDate == 'boolean' ? {selectable: onDate} :
(!onDate ? {} : onDate.apply(target, [date, true])));
return (dateInfo.selectable != false) &&
(!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime());
},
/* Perform a named action for a datepicker.
@param target (element) the control to affect
@param action (string) the name of the action */
performAction: function(target, action) {
var inst = $.data(target, this.dataName);
if (inst && !this.isDisabled(target)) {
var commands = inst.get('commands');
if (commands[action] && commands[action].enabled.apply(target, [inst])) {
commands[action].action.apply(target, [inst]);
}
}
},
/* Set the currently shown month, defaulting to today's.
@param target (element) the control to affect
@param year (number) the year to show (optional)
@param month (number) the month to show (1-12) (optional)
@param day (number) the day to show (optional) */
showMonth: function(target, year, month, day) {
var inst = $.data(target, this.dataName);
if (inst && (day != null ||
(inst.drawDate.getFullYear() != year || inst.drawDate.getMonth() + 1 != month))) {
inst.prevDate = $.datepick.newDate(inst.drawDate);
var show = this._checkMinMax((year != null ?
$.datepick.newDate(year, month, 1) : $.datepick.today()), inst);
inst.drawDate = $.datepick.newDate(show.getFullYear(), show.getMonth() + 1,
(day != null ? day : Math.min(inst.drawDate.getDate(),
$.datepick.daysInMonth(show.getFullYear(), show.getMonth() + 1))));
this._update(target);
}
},
/* Adjust the currently shown month.
@param target (element) the control to affect
@param offset (number) the number of months to change by */
changeMonth: function(target, offset) {
var inst = $.data(target, this.dataName);
if (inst) {
var date = $.datepick.add($.datepick.newDate(inst.drawDate), offset, 'm');
this.showMonth(target, date.getFullYear(), date.getMonth() + 1);
}
},
/* Adjust the currently shown day.
@param target (element) the control to affect
@param offset (number) the number of days to change by */
changeDay: function(target, offset) {
var inst = $.data(target, this.dataName);
if (inst) {
var date = $.datepick.add($.datepick.newDate(inst.drawDate), offset, 'd');
this.showMonth(target, date.getFullYear(), date.getMonth() + 1, date.getDate());
}
},
/* Restrict a date to the minimum/maximum specified.
@param date (CDate) the date to check
@param inst (object) the current instance settings */
_checkMinMax: function(date, inst) {
var minDate = inst.get('minDate');
var maxDate = inst.get('maxDate');
date = (minDate && date.getTime() < minDate.getTime() ? $.datepick.newDate(minDate) : date);
date = (maxDate && date.getTime() > maxDate.getTime() ? $.datepick.newDate(maxDate) : date);
return date;
},
/* Retrieve the date associated with an entry in the datepicker.
@param target (element) the control to examine
@param elem (element) the selected datepicker element
@return (CDate) the corresponding date, or null */
retrieveDate: function(target, elem) {
var inst = $.data(target, this.dataName);
return (!inst ? null : this._normaliseDate(
new Date(parseInt(elem.className.replace(/^.*dp(-?\d+).*$/, '$1'), 10))));
},
/* Select a date for this datepicker.
@param target (element) the control to examine
@param elem (element) the selected datepicker element */
selectDate: function(target, elem) {
var inst = $.data(target, this.dataName);
if (inst && !this.isDisabled(target)) {
var date = this.retrieveDate(target, elem);
var multiSelect = inst.get('multiSelect');
var rangeSelect = inst.get('rangeSelect');
if (multiSelect) {
var found = false;
for (var i = 0; i < inst.selectedDates.length; i++) {
if (date.getTime() == inst.selectedDates[i].getTime()) {
inst.selectedDates.splice(i, 1);
found = true;
break;
}
}
if (!found && inst.selectedDates.length < multiSelect) {
inst.selectedDates.push(date);
}
}
else if (rangeSelect) {
if (inst.pickingRange) {
inst.selectedDates[1] = date;
}
else {
inst.selectedDates = [date, date];
}
inst.pickingRange = !inst.pickingRange;
}
else {
inst.selectedDates = [date];
}
inst.prevDate = $.datepick.newDate(date);
this._updateInput(target);
if (inst.inline || inst.pickingRange || inst.selectedDates.length <
(multiSelect || (rangeSelect ? 2 : 1))) {
this._update(target);
}
else {
this.hide(target);
}
}
},
/* Generate the datepicker content for this control.
@param target (element) the control to affect
@param inst (object) the current instance settings
@return (jQuery) the datepicker content */
_generateContent: function(target, inst) {
var renderer = inst.get('renderer');
var monthsToShow = inst.get('monthsToShow');
monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
inst.drawDate = this._checkMinMax(
inst.drawDate || inst.get('defaultDate') || $.datepick.today(), inst);
var drawDate = $.datepick._applyMonthsOffset($.datepick.newDate(inst.drawDate), inst);
// Generate months
var monthRows = '';
for (var row = 0; row < monthsToShow[0]; row++) {
var months = '';
for (var col = 0; col < monthsToShow[1]; col++) {
months += this._generateMonth(target, inst, drawDate.getFullYear(),
drawDate.getMonth() + 1, renderer, (row == 0 && col == 0));
$.datepick.add(drawDate, 1, 'm');
}
monthRows += this._prepare(renderer.monthRow, inst).replace(/\{months\}/, months);
}
var picker = this._prepare(renderer.picker, inst).replace(/\{months\}/, monthRows).
replace(/\{weekHeader\}/g, this._generateDayHeaders(inst, renderer)) +
($.browser.msie && parseInt($.browser.version, 10) < 7 && !inst.inline ?
'<iframe src="javascript:void(0);" class="' + this._coverClass + '"></iframe>' : '');
// Add commands
var commands = inst.get('commands');
var asDateFormat = inst.get('commandsAsDateFormat');
var addCommand = function(type, open, close, name, classes) {
if (picker.indexOf('{' + type + ':' + name + '}') == -1) {
return;
}
var command = commands[name];
var date = (asDateFormat ? command.date.apply(target, [inst]) : null);
picker = picker.replace(new RegExp('\\{' + type + ':' + name + '\\}', 'g'),
'<' + open +
(command.status ? ' title="' + inst.get(command.status) + '"' : '') +
' class="' + renderer.commandClass + ' ' +
renderer.commandClass + '-' + name + ' ' + classes +
(command.enabled(inst) ? '' : ' ' + renderer.disabledClass) + '">' +
(date ? $.datepick.formatDate(inst.get(command.text), date, inst.getConfig()) :
inst.get(command.text)) + '</' + close + '>');
};
for (var name in commands) {
addCommand('button', 'button type="button"', 'button', name,
renderer.commandButtonClass);
addCommand('link', 'a href="javascript:void(0)"', 'a', name,
renderer.commandLinkClass);
}
picker = $(picker);
if (monthsToShow[1] > 1) {
var count = 0;
$(renderer.monthSelector, picker).each(function() {
var nth = ++count % monthsToShow[1];
$(this).addClass(nth == 1 ? 'first' : (nth == 0 ? 'last' : ''));
});
}
// Add datepicker behaviour
var self = this;
picker.find(renderer.daySelector + ' a').hover(
function() { $(this).addClass(renderer.highlightedClass); },
function() {
(inst.inline ? $(this).parents('.' + self.markerClass) : inst.div).
find(renderer.daySelector + ' a').
removeClass(renderer.highlightedClass);
}).
click(function() {
self.selectDate(target, this);
}).end().
find('select.' + this._monthYearClass + ':not(.' + this._anyYearClass + ')').
change(function() {
var monthYear = $(this).val().split('/');
self.showMonth(target, parseInt(monthYear[1], 10), parseInt(monthYear[0], 10));
}).end().
find('select.' + this._anyYearClass).
click(function() {
$(this).css('visibility', 'hidden').
next('input').css({left: this.offsetLeft, top: this.offsetTop,
width: this.offsetWidth, height: this.offsetHeight}).show().focus();
}).end().
find('input.' + self._monthYearClass).
change(function() {
try {
var year = parseInt($(this).val(), 10);
year = (isNaN(year) ? inst.drawDate.getFullYear() : year);
self.showMonth(target, year, inst.drawDate.getMonth() + 1, inst.drawDate.getDate());
}
catch (e) {
alert(e);
}
}).keydown(function(event) {
if (event.keyCode == 13) { // Enter
$(event.target).change();
}
else if (event.keyCode == 27) { // Escape
$(event.target).hide().prev('select').css('visibility', 'visible');
inst.target.focus();
}
});
// Add command behaviour
picker.find('.' + renderer.commandClass).click(function() {
if (!$(this).hasClass(renderer.disabledClass)) {
var action = this.className.replace(
new RegExp('^.*' + renderer.commandClass + '-([^ ]+).*$'), '$1');
$.datepick.performAction(target, action);
}
});
// Add classes
if (inst.get('isRTL')) {
picker.addClass(renderer.rtlClass);
}
if (monthsToShow[0] * monthsToShow[1] > 1) {
picker.addClass(renderer.multiClass);
}
var pickerClass = inst.get('pickerClass');
if (pickerClass) {
picker.addClass(pickerClass);
}
// Resize
$('body').append(picker);
var width = 0;
picker.find(renderer.monthSelector).each(function() {
width += $(this).outerWidth();
});
picker.width(width / monthsToShow[0]);
// Pre-show customisation
var onShow = inst.get('onShow');
if (onShow) {
onShow.apply(target, [picker, inst]);
}
return picker;
},
/* Generate the content for a single month.
@param target (element) the control to affect
@param inst (object) the current instance settings
@param year (number) the year to generate
@param month (number) the month to generate
@param renderer (object) the rendering templates
@param first (boolean) true if first of multiple months
@return (string) the month content */
_generateMonth: function(target, inst, year, month, renderer, first) {
var daysInMonth = $.datepick.daysInMonth(year, month);
var monthsToShow = inst.get('monthsToShow');
monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
var fixedWeeks = inst.get('fixedWeeks') || (monthsToShow[0] * monthsToShow[1] > 1);
var firstDay = inst.get('firstDay');
var leadDays = ($.datepick.newDate(year, month, 1).getDay() - firstDay + 7) % 7;
var numWeeks = (fixedWeeks ? 6 : Math.ceil((leadDays + daysInMonth) / 7));
var showOtherMonths = inst.get('showOtherMonths');
var selectOtherMonths = inst.get('selectOtherMonths') && showOtherMonths;
var dayStatus = inst.get('dayStatus');
var minDate = (inst.pickingRange ? inst.selectedDates[0] : inst.get('minDate'));
var maxDate = inst.get('maxDate');
var rangeSelect = inst.get('rangeSelect');
var onDate = inst.get('onDate');
var showWeeks = renderer.week.indexOf('{weekOfYear}') > -1;
var calculateWeek = inst.get('calculateWeek');
var today = $.datepick.today();
var drawDate = $.datepick.newDate(year, month, 1);
$.datepick.add(drawDate, -leadDays - (fixedWeeks && (drawDate.getDay() == firstDay) ? 7 : 0), 'd');
var ts = drawDate.getTime();
// Generate weeks
var weeks = '';
for (var week = 0; week < numWeeks; week++) {
var weekOfYear = (!showWeeks ? '' : '<span class="dp' + ts + '">' +
(calculateWeek ? calculateWeek(drawDate) : 0) + '</span>');
var days = '';
for (var day = 0; day < 7; day++) {
var selected = false;
if (rangeSelect && inst.selectedDates.length > 0) {
selected = (drawDate.getTime() >= inst.selectedDates[0] &&
drawDate.getTime() <= inst.selectedDates[1]);
}
else {
for (var i = 0; i < inst.selectedDates.length; i++) {
if (inst.selectedDates[i].getTime() == drawDate.getTime()) {
selected = true;
break;
}
}
}
var dateInfo = (!onDate ? {} :
onDate.apply(target, [drawDate, drawDate.getMonth() + 1 == month]));
var selectable = (selectOtherMonths || drawDate.getMonth() + 1 == month) &&
this._isSelectable(target, drawDate, dateInfo.selectable, minDate, maxDate);
days += this._prepare(renderer.day, inst).replace(/\{day\}/g,
(selectable ? '<a href="javascript:void(0)"' : '<span') +
' class="dp' + ts + ' ' + (dateInfo.dateClass || '') +
(selected && (selectOtherMonths || drawDate.getMonth() + 1 == month) ?
' ' + renderer.selectedClass : '') +
(selectable ? ' ' + renderer.defaultClass : '') +
((drawDate.getDay() || 7) < 6 ? '' : ' ' + renderer.weekendClass) +
(drawDate.getMonth() + 1 == month ? '' : ' ' + renderer.otherMonthClass) +
(drawDate.getTime() == today.getTime() && (drawDate.getMonth() + 1) == month ?
' ' + renderer.todayClass : '') +
(drawDate.getTime() == inst.drawDate.getTime() && (drawDate.getMonth() + 1) == month ?
' ' + renderer.highlightedClass : '') + '"' +
(dateInfo.title || (dayStatus && selectable) ? ' title="' +
(dateInfo.title || $.datepick.formatDate(
dayStatus, drawDate, inst.getConfig())) + '"' : '') + '>' +
(showOtherMonths || (drawDate.getMonth() + 1) == month ?
dateInfo.content || drawDate.getDate() : ' ') +
(selectable ? '</a>' : '</span>'));
$.datepick.add(drawDate, 1, 'd');
ts = drawDate.getTime();
}
weeks += this._prepare(renderer.week, inst).replace(/\{days\}/g, days).
replace(/\{weekOfYear\}/g, weekOfYear);
}
var monthHeader = this._prepare(renderer.month, inst).match(/\{monthHeader(:[^\}]+)?\}/);
monthHeader = (monthHeader[0].length <= 13 ? 'MM yyyy' :
monthHeader[0].substring(13, monthHeader[0].length - 1));
monthHeader = (first ? this._generateMonthSelection(
inst, year, month, minDate, maxDate, monthHeader, renderer) :
$.datepick.formatDate(monthHeader, $.datepick.newDate(year, month, 1), inst.getConfig()));
var weekHeader = this._prepare(renderer.weekHeader, inst).
replace(/\{days\}/g, this._generateDayHeaders(inst, renderer));
return this._prepare(renderer.month, inst).replace(/\{monthHeader(:[^\}]+)?\}/g, monthHeader).
replace(/\{weekHeader\}/g, weekHeader).replace(/\{weeks\}/g, weeks);
},
/* Generate the HTML for the day headers.
@param inst (object) the current instance settings
@param renderer (object) the rendering templates
@return (string) a week's worth of day headers */
_generateDayHeaders: function(inst, renderer) {
var firstDay = inst.get('firstDay');
var dayNames = inst.get('dayNames');
var dayNamesMin = inst.get('dayNamesMin');
var header = '';
for (var day = 0; day < 7; day++) {
var dow = (day + firstDay) % 7;
header += this._prepare(renderer.dayHeader, inst).replace(/\{day\}/g,
'<span class="' + this._curDoWClass + dow + '" title="' +
dayNames[dow] + '">' + dayNamesMin[dow] + '</span>');
}
return header;
},
/* Generate selection controls for month.
@param inst (object) the current instance settings
@param year (number) the year to generate
@param month (number) the month to generate
@param minDate (CDate) the minimum date allowed
@param maxDate (CDate) the maximum date allowed
@param monthHeader (string) the month/year format
@return (string) the month selection content */
_generateMonthSelection: function(inst, year, month, minDate, maxDate, monthHeader) {
if (!inst.get('changeMonth')) {
return $.datepick.formatDate(
monthHeader, $.datepick.newDate(year, month, 1), inst.getConfig());
}
// Months
var monthNames = inst.get('monthNames' + (monthHeader.match(/mm/i) ? '' : 'Short'));
var html = monthHeader.replace(/m+/i, '\\x2E').replace(/y+/i, '\\x2F');
var selector = '<select class="' + this._monthYearClass +
'" title="' + inst.get('monthStatus') + '">';
for (var m = 1; m <= 12; m++) {
if ((!minDate || $.datepick.newDate(year, m, $.datepick.daysInMonth(year, m)).
getTime() >= minDate.getTime()) &&
(!maxDate || $.datepick.newDate(year, m, 1).getTime() <= maxDate.getTime())) {
selector += '<option value="' + m + '/' + year + '"' +
(month == m ? ' selected="selected"' : '') + '>' +
monthNames[m - 1] + '</option>';
}
}
selector += '</select>';
html = html.replace(/\\x2E/, selector);
// Years
var yearRange = inst.get('yearRange');
if (yearRange == 'any') {
selector = '<select class="' + this._monthYearClass + ' ' + this._anyYearClass +
'" title="' + inst.get('yearStatus') + '">' +
'<option>' + year + '</option></select>' +
'<input class="' + this._monthYearClass + ' ' + this._curMonthClass +
month + '" value="' + year + '">';
}
else {
yearRange = yearRange.split(':');
var todayYear = $.datepick.today().getFullYear();
var start = (yearRange[0].match('c[+-].*') ? year + parseInt(yearRange[0].substring(1), 10) :
((yearRange[0].match('[+-].*') ? todayYear : 0) + parseInt(yearRange[0], 10)));
var end = (yearRange[1].match('c[+-].*') ? year + parseInt(yearRange[1].substring(1), 10) :
((yearRange[1].match('[+-].*') ? todayYear : 0) + parseInt(yearRange[1], 10)));
selector = '<select class="' + this._monthYearClass +
'" title="' + inst.get('yearStatus') + '">';
start = $.datepick.add($.datepick.newDate(start + 1, 1, 1), -1, 'd');
end = $.datepick.newDate(end, 1, 1);
var addYear = function(y) {
if (y != 0) {
selector += '<option value="' + month + '/' + y + '"' +
(year == y ? ' selected="selected"' : '') + '>' + y + '</option>';
}
};
if (start.getTime() < end.getTime()) {
start = (minDate && minDate.getTime() > start.getTime() ? minDate : start).getFullYear();
end = (maxDate && maxDate.getTime() < end.getTime() ? maxDate : end).getFullYear();
for (var y = start; y <= end; y++) {
addYear(y);
}
}
else {
start = (maxDate && maxDate.getTime() < start.getTime() ? maxDate : start).getFullYear();
end = (minDate && minDate.getTime() > end.getTime() ? minDate : end).getFullYear();
for (var y = start; y >= end; y--) {
addYear(y);
}
}
selector += '</select>';
}
html = html.replace(/\\x2F/, selector);
return html;
},
/* Prepare a render template for use.
Exclude popup/inline sections that are not applicable.
Localise text of the form: {l10n:name}.
@param text (string) the text to localise
@param inst (object) the current instance settings
@return (string) the localised text */
_prepare: function(text, inst) {
var replaceSection = function(type, retain) {
while (true) {
var start = text.indexOf('{' + type + ':start}');
if (start == -1) {
return;
}
var end = text.substring(start).indexOf('{' + type + ':end}');
if (end > -1) {
text = text.substring(0, start) +
(retain ? text.substr(start + type.length + 8, end - type.length - 8) : '') +
text.substring(start + end + type.length + 6);
}
}
};
replaceSection('inline', inst.inline);
replaceSection('popup', !inst.inline);
var pattern = /\{l10n:([^\}]+)\}/;
var matches = null;
while (matches = pattern.exec(text)) {
text = text.replace(matches[0], inst.get(matches[1]));
}
return text;
}
});
/* jQuery extend now ignores nulls!
@param target (object) the object to extend
@param props (object) the new settings
@return (object) the updated object */
function extendRemove(target, props) {
$.extend(target, props);
for (var name in props)
if (props[name] == null || props[name] == undefined)
target[name] = props[name];
return target;
};
/* Attach the datepicker functionality to a jQuery selection.
@param command (string) the command to run (optional, default 'attach')
@param options (object) the new settings to use for these instances (optional)
@return (jQuery) for chaining further calls */
$.fn.datepick = function(options) {
var otherArgs = Array.prototype.slice.call(arguments, 1);
if ($.inArray(options, ['getDate', 'isDisabled', 'isSelectable', 'options', 'retrieveDate']) > -1) {
return $.datepick[options].apply($.datepick, [this[0]].concat(otherArgs));
}
return this.each(function() {
if (typeof options == 'string') {
$.datepick[options].apply($.datepick, [this].concat(otherArgs));
}
else {
$.datepick._attachPicker(this, options || {});
}
});
};
/* Initialise the datepicker functionality. */
$.datepick = new Datepicker(); // singleton instance
$(function() {
$(document).mousedown($.datepick._checkExternalClick).
resize(function() { $.datepick.hide($.datepick.curInst); });
});
})(jQuery);
Subscribe to:
Posts (Atom)