[jQuery] Click on Today link does not display "Current Date" inside the text box
Hi,
I am using jquery calendar, I have a problem, when I click on "Today"
link, it is not displaying the current date inside the text box.
I am pasting ui.datepicker.js
/*
* jQuery UI Datepicker
*
* Copyright (c) 2006, 2007, 2008 Marc Grabanski
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Datepicker
*
* Depends:
* ui.core.js
*
* Marc Grabanski (m@marcgrabanski.com) and Keith Wood
(kbwood@virginbroadband.com.au).
*/
(function($) { // hide the namespace
var PROP_NAME = 'datepicker';
/* Date picker manager.
Use the singleton instance of this class, $.datepicker, to interact
with the date picker.
Settings for (groups of) date pickers are maintained in an instance
object,
allowing multiple different settings on the same page. */
function Datepicker() {
this.debug = false; // Change this to true to start debugging
this._curInst = null; // The current instance in use
this._disabledInputs = []; // List of date picker inputs that have
been disabled
this._datepickerShowing = false; // True if the popup picker is
showing , false if not
this._inDialog = false; // True if showing within a "dialog", false
if not
this._mainDivId = 'ui-datepicker-div'; // The ID of the main
datepicker division
this._appendClass = 'ui-datepicker-append'; // The name of the append
marker class
this._triggerClass = 'ui-datepicker-trigger'; // The name of the
trigger marker class
this._dialogClass = 'ui-datepicker-dialog'; // The name of the dialog
marker class
this._promptClass = 'ui-datepicker-prompt'; // The name of the dialog
prompt marker class
this._unselectableClass = 'ui-datepicker-unselectable'; // The name
of the unselectable cell marker class
this._currentClass = 'ui-datepicker-current-day'; // The name of the
current day marker class
this.regional = []; // Available regional settings, indexed by
language code
this.regional[''] = { // Default regional settings
clearText: 'Clear', // Display text for clear link
clearStatus: 'Erase the current date', // Status text for clear link
closeText: 'Close', // Display text for close link
closeStatus: 'Close without change', // Status text for close link
prevText: '<Prev', // Display text for previous month link
prevStatus: 'Show the previous month', // Status text for previous
month link
nextText: 'Next>', // Display text for next month link
nextStatus: 'Show the next month', // Status text for next month
link
currentText: 'Today', // Display text for current month link
currentStatus: 'Show the current month', // Status text for current
month link
monthNames: ['January','February','March','April','May','June',
'July','August','September','October','November','December'], //
Names of months for drop-down and formatting
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
monthStatus: 'Show a different month', // Status text for selecting
a month
yearStatus: 'Show a different year', // Status text for selecting a
year
weekHeader: 'Wk', // Header for the week of the year column
weekStatus: 'Week of the year', // Status text for the week of the
year column
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'], // For formatting
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], //
For formatting
dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'], // Column
headings for days starting at Sunday
dayStatus: 'Set DD as first week day', // Status text for the day of
the week selection
dateStatus: 'Select DD, M d', // Status text for the date selection
dateFormat: 'mm/dd/yy', // See format options on parseDate
firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
initStatus: 'Select a date', // Initial Status text on opening
isRTL: false // True if right-to-left language, false if left-to-
right
};
this._defaults = { // Global defaults for all the date picker
instances
showOn: 'focus', // 'focus' for popup on focus,
// 'button' for trigger button, or 'both' for either
showAnim: 'show', // Name of jQuery animation for popup
showOptions: {}, // Options for enhanced animations
defaultDate: null, // Used when field is blank: actual date,
// +/-number for offset from today, null for today
appendText: '', // Display text following the input box, e.g.
showing the format
buttonText: '...', // Text for trigger button
buttonImage: '', // URL for trigger button image
buttonImageOnly: false, // True if the image appears alone, false if
it appears on a button
closeAtTop: true, // True to have the clear/close at the top,
// false to have them at the bottom
mandatory: false, // True to hide the Clear link, false to include
it
hideIfNoPrevNext: false, // True to hide next/previous month links
// if not applicable, false to just disable them
navigationAsDateFormat: false, // True if date formatting applied to
prev/today/next links
gotoCurrent: false, // True if today link goes back to current
selection instead
changeMonth: true, // True if month can be selected directly, false
if only prev/next
changeYear: true, // True if year can be selected directly, false if
only prev/next
yearRange: '-30:+30', // Range of years to display in drop-down,
// either relative to current year (-nn:+nn) or absolute
(nnnn:nnnn)
changeFirstDay: true, // True to click on day name to change, false
to remain as set
highlightWeek: false, // True to highlight the selected week
showOtherMonths: false, // True to show dates in other months, false
to leave blank
showWeeks: false, // True to show week of the year, false to omit
calculateWeek: this.iso8601Week, // How to calculate the week of the
year,
// takes a Date and returns the number of the week for it
shortYearCutoff: '+10', // Short year values < this are in the
current century,
// > this are in the previous century,
// string value starting with '+' for current year + value
showStatus: false, // True to show status bar at bottom, false to
not show it
statusForDate: this.dateStatus, // Function to provide status text
for a date -
// takes date and instance as parameters, returns display text
minDate: null, // The earliest selectable date, or null for no limit
maxDate: null, // The latest selectable date, or null for no limit
duration: 'normal', // Duration of display/closure
beforeShowDay: null, // Function that takes a date and returns an
array with
// [0] = true if selectable, false if not, [1] = custom CSS class
name(s) or '',
// [2] = cell title (optional), e.g. $.datepicker.noWeekends
beforeShow: null, // Function that takes an input field and
// returns a set of custom settings for the date picker
onSelect: null, // Define a callback function when a date is
selected
onChangeMonthYear: null, // Define a callback function when the
month or year is changed
onClose: null, // Define a callback function when the datepicker is
closed
numberOfMonths: 1, // Number of months to show at a time
stepMonths: 1, // Number of months to step back/forward
rangeSelect: false, // Allows for selecting a date range on one date
picker
rangeSeparator: ' - ', // Text between two dates in a range
altField: '', // Selector for an alternate field to store selected
dates into
altFormat: '' // The date format to use for the alternate field
};
$.extend(this._defaults, this.regional['']);
this.dpDiv = $('<div id="' + this._mainDivId + '" style="display:
none;"></div>');
}
$.extend(Datepicker.prototype, {
/* Class name added to elements to indicate already configured with a
date picker. */
markerClassName: 'hasDatepicker',
/* Debug logging (if enabled). */
log: function () {
if (this.debug)
console.log.apply('', arguments);
},
/* Override the default settings for all instances of the date
picker.
@param settings object - the new settings to use as defaults
(anonymous object)
@return the manager object */
setDefaults: function(settings) {
extendRemove(this._defaults, settings || {});
return this;
},
/* Attach the date picker to a jQuery selection.
@param target element - the target input field or division or
span
@param settings object - the new settings to use for this date
picker instance (anonymous) */
_attachDatepicker: function(target, settings) {
// check for settings on the control itself - in namespace 'date:'
var inlineSettings = null;
for (attrName in this._defaults) {
var attrValue = target.getAttribute('date:' + attrName);
if (attrValue) {
inlineSettings = inlineSettings || {};
try {
inlineSettings[attrName] = eval(attrValue);
} catch (err) {
inlineSettings[attrName] = attrValue;
}
}
}
var nodeName = target.nodeName.toLowerCase();
var inline = (nodeName == 'div' || nodeName == 'span');
if (!target.id)
target.id = 'dp' + new Date().getTime();
var inst = this._newInst($(target), inline);
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
if (nodeName == 'input') {
this._connectDatepicker(target, inst);
} else if (inline) {
this._inlineDatepicker(target, inst);
}
},
/* Create a new instance object. */
_newInst: function(target, inline) {
return {id: target[0].id, input: target, // associated target
selectedDay: 0, selectedMonth: 0, selectedYear: 0, // current
selection
drawMonth: 0, drawYear: 0, // month being drawn
inline: inline, // is datepicker inline or not
dpDiv: (!inline ? this.dpDiv : // presentation div
$('<div class="ui-datepicker-inline"></div>'))};
},
/* Attach the date picker to an input field. */
_connectDatepicker: function(target, inst) {
var input = $(target);
if (input.hasClass(this.markerClassName))
return;
var appendText = this._get(inst, 'appendText');
var isRTL = this._get(inst, 'isRTL');
if (appendText)
input[isRTL ? 'before' : 'after']('<span class="' +
this._appendClass + '">' + appendText + '</span>');
var showOn = this._get(inst, 'showOn');
if (showOn == 'focus' || showOn == 'both') // pop-up date picker
when in the marked field
input.focus(this._showDatepicker);
if (showOn == 'button' || showOn == 'both') { // pop-up date picker
when button clicked
var buttonText = this._get(inst, 'buttonText');
var buttonImage = this._get(inst, 'buttonImage');
var trigger = $(this._get(inst, 'buttonImageOnly') ?
$('<img/>').addClass(this._triggerClass).
attr({ src: buttonImage, alt: buttonText, title: buttonText }) :
$('<button type="button"></button>').addClass(this._triggerClass).
html(buttonImage == '' ? buttonText : $('<img/>').attr(
{ src:buttonImage, alt:buttonText, title:buttonText })));
input[isRTL ? 'before' : 'after'](trigger);
trigger.click(function() {
if ($.datepicker._datepickerShowing && $.datepicker._lastInput ==
target)
$.datepicker._hideDatepicker();
else
$.datepicker._showDatepicker(target);
return false;
});
}
input.addClass(this.markerClassName).keydown
(this._doKeyDown).keypress(this._doKeyPress).
bind("setData.datepicker", function(event, key, value) {
inst.settings[key] = value;
}).bind("getData.datepicker", function(event, key) {
return this._get(inst, key);
});
$.data(target, PROP_NAME, inst);
},
/* Attach an inline date picker to a div. */
_inlineDatepicker: function(target, inst) {
var input = $(target);
if (input.hasClass(this.markerClassName))
return;
input.addClass(this.markerClassName).append(inst.dpDiv).
bind("setData.datepicker", function(event, key, value){
inst.settings[key] = value;
}).bind("getData.datepicker", function(event, key){
return this._get(inst, key);
});
$.data(target, PROP_NAME, inst);
this._setDate(inst, this._getDefaultDate(inst));
this._updateDatepicker(inst);
},
/* Tidy up after displaying the date picker. */
_inlineShow: function(inst) {
var numMonths = this._getNumberOfMonths(inst); // fix width for
dynamic number of date pickers
inst.dpDiv.width(numMonths[1] * $('.ui-datepicker', inst.dpDiv
[0]).width());
},
/* Pop-up the date picker in a "dialog" box.
@param input element - ignored
@param dateText string - the initial date to display (in the
current format)
@param onSelect function - the function(dateText) to call when a
date is selected
@param settings object - update the dialog date picker
instance's settings (anonymous object)
@param pos int[2] - coordinates for the dialog's position
within the screen or
event - with x/y coordinates or
leave empty for default (screen centre)
@return the manager object */
_dialogDatepicker: function(input, dateText, onSelect, settings, pos)
{
var inst = this._dialogInst; // internal instance
if (!inst) {
var id = 'dp' + new Date().getTime();
this._dialogInput = $('<input type="text" id="' + id +
'" size="1" style="position: absolute; top: -100px;"/>');
this._dialogInput.keydown(this._doKeyDown);
$('body').append(this._dialogInput);
inst = this._dialogInst = this._newInst(this._dialogInput, false);
inst.settings = {};
$.data(this._dialogInput[0], PROP_NAME, inst);
}
extendRemove(inst.settings, settings || {});
this._dialogInput.val(dateText);
this._pos = (pos ? (pos.length ? pos : [pos.pageX, pos.pageY]) :
null);
if (!this._pos) {
var browserWidth = window.innerWidth ||
document.documentElement.clientWidth || document.body.clientWidth;
var browserHeight = window.innerHeight ||
document.documentElement.clientHeight || document.body.clientHeight;
var scrollX = document.documentElement.scrollLeft ||
document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop ||
document.body.scrollTop;
this._pos = // should use actual width/height below
[(browserWidth / 2) - 100 + scrollX, (browserHeight / 2) - 150 +
scrollY];
}
// move input on screen for focus, but hidden behind dialog
this._dialogInput.css('left', this._pos[0] + 'px').css('top',
this._pos[1] + 'px');
inst.settings.onSelect = onSelect;
this._inDialog = true;
this.dpDiv.addClass(this._dialogClass);
this._showDatepicker(this._dialogInput[0]);
if ($.blockUI)
$.blockUI(this.dpDiv);
$.data(this._dialogInput[0], PROP_NAME, inst);
return this;
},
/* Detach a datepicker from its control.
@param target element - the target input field or division or
span */
_destroyDatepicker: function(target) {
var nodeName = target.nodeName.toLowerCase();
var $target = $(target);
$.removeData(target, PROP_NAME);
if (nodeName == 'input') {
$target.siblings('.' + this._appendClass).remove().end().
siblings('.' + this._triggerClass).remove().end().
removeClass(this.markerClassName).
unbind('focus', this._showDatepicker).
unbind('keydown', this._doKeyDown).
unbind('keypress', this._doKeyPress);
} else if (nodeName == 'div' || nodeName == 'span')
$target.removeClass(this.markerClassName).empty();
},
/* Enable the date picker to a jQuery selection.
@param target element - the target input field or division or
span */
_enableDatepicker: function(target) {
target.disabled = false;
$(target).siblings('button.' + this._triggerClass).each(function()
{ this.disabled = false; }).end().
siblings('img.' + this._triggerClass).css({opacity: '1.0', cursor:
''});
this._disabledInputs = $.map(this._disabledInputs,
function(value) { return (value == target ? null : value); }); //
delete entry
},
/* Disable the date picker to a jQuery selection.
@param target element - the target input field or division or
span */
_disableDatepicker: function(target) {
target.disabled = true;
$(target).siblings('button.' + this._triggerClass).each(function()
{ this.disabled = true; }).end().
siblings('img.' + this._triggerClass).css({opacity: '0.5', cursor:
'default'});
this._disabledInputs = $.map(this._disabledInputs,
function(value) { return (value == target ? null : value); }); //
delete entry
this._disabledInputs[this._disabledInputs.length] = target;
},
/* Is the first field in a jQuery collection disabled as a
datepicker?
@param target element - the target input field or division or
span
@return boolean - true if disabled, false if enabled */
_isDisabledDatepicker: function(target) {
if (!target)
return false;
for (var i = 0; i < this._disabledInputs.length; i++) {
if (this._disabledInputs[i] == target)
return true;
}
return false;
},
/* Update the settings for a date picker attached to an input field
or division.
@param target element - the target input field or division or
span
@param name object - the new settings to update or
string - the name of the setting to change or
@param value any - the new value for the setting (omit if above
is an object) */
_changeDatepicker: function(target, name, value) {
var settings = name || {};
if (typeof name == 'string') {
settings = {};
settings[name] = value;
}
if (inst = $.data(target, PROP_NAME)) {
extendRemove(inst.settings, settings);
this._updateDatepicker(inst);
}
},
/* Set the dates for a jQuery selection.
@param target element - the target input field or division or
span
@param date Date - the new date
@param endDate Date - the new end date for a range (optional) */
_setDateDatepicker: function(target, date, endDate) {
var inst = $.data(target, PROP_NAME);
if (inst) {
this._setDate(inst, date, endDate);
this._updateDatepicker(inst);
}
},
/* Get the date(s) for the first entry in a jQuery selection.
@param target element - the target input field or division or
span
@return Date - the current date or
Date[2] - the current dates for a range */
_getDateDatepicker: function(target) {
var inst = $.data(target, PROP_NAME);
if (inst)
this._setDateFromField(inst);
return (inst ? this._getDate(inst) : null);
},
/* Handle keystrokes. */
_doKeyDown: function(e) {
var inst = $.data(e.target, PROP_NAME);
var handled = true;
if ($.datepicker._datepickerShowing)
switch (e.keyCode) {
case 9: $.datepicker._hideDatepicker(null, '');
break; // hide on tab out
case 13: $.datepicker._selectDay(e.target, inst.selectedMonth,
inst.selectedYear,
$('td.ui-datepicker-days-cell-over', inst.dpDiv)[0]);
return false; // don't submit the form
break; // select the value on enter
case 27: $.datepicker._hideDatepicker(null, $.datepicker._get
(inst, 'duration'));
break; // hide on escape
case 33: $.datepicker._adjustDate(e.target, (e.ctrlKey ? -1 :
-$.datepicker._get(inst, 'stepMonths')), (e.ctrlKey ? 'Y' :
'M'));
break; // previous month/year on page up/+ ctrl
case 34: $.datepicker._adjustDate(e.target, (e.ctrlKey ? +1 :