display : function(eleAlignTo)
{
if ($(this.ele).is('.dp-disabled')) return;
eleAlignTo = eleAlignTo || this.ele;
var c = this;
var $ele = $(eleAlignTo);
var eleOffset = $ele.offset();
var $createIn;
var attrs;
var attrsCalendarHolder;
var cssRules;
if (c.inline) {
$createIn = $(this.ele);
attrs = {
'id' : 'calendar-' + this.ele._dpId,
'class' : 'dp-popup dp-popup-inline'
};
$('.dp-popup', $createIn).remove();
cssRules = {
};
} else {
$createIn = $('body');
attrs = {
'id' : 'dp-popup',
'class' : 'dp-popup'
};
cssRules = {
'top' : eleOffset.top + c.verticalOffset,
'left' : eleOffset.left + c.horizontalOffset
};
var _checkMouse = function(e)
{
var el = e.target;
var cal = $('#dp-popup')[0];
while (true){
if (el == cal) {
return true;
} else if (el == document) {
c._closeCalendar();
return false;
} else {
el = $(el).parent()[0];
}
}
};
this._checkMouse = _checkMouse;
c._closeCalendar(true);
$(document).bind(
'keydown.datepicker',
function(event)
{
if (event.keyCode == 27) {
c._closeCalendar();
}
}
);
}
if (!c.rememberViewedMonth)
{
var selectedDate = this.getSelected()[0];
if (selectedDate) {
selectedDate = new Date(selectedDate);
this.setDisplayedMonth(selectedDate.getMonth(),
selectedDate.getFullYear(), false);
}
}
$createIn
.append(
$('<div></div>')
.attr(attrs)
.css(cssRules)
.append(
// $('<a href="#" class="selecteee">aaa</a>'),
$('<h2></h2>'),
$('<div class="dp-nav-prev"></div>')
.append(
$('<a class="dp-nav-prev-year" href="#" title="' + $.dpText.TEXT_PREV_YEAR + '"><<</a>')
.bind(
'click',
function()
{
return c._displayNewMonth.call(c, this, 0, -1);
}
),
$('<a class="dp-nav-prev-month" href="#" title="' + $.dpText.TEXT_PREV_MONTH + '"><</a>')
.bind(
'click',
function()
{
return c._displayNewMonth.call(c, this, -1, 0);
}
)
),
$('<div class="dp-nav-next"></div>')
.append(
$('<a class="dp-nav-next-year" href="#" title="' + $.dpText.TEXT_NEXT_YEAR + '">>></a>')
.bind(
'click',
function()
{
return c._displayNewMonth.call(c, this, 0, 1);
}
),
$('<a class="dp-nav-next-month" href="#" title="' + $.dpText.TEXT_NEXT_MONTH + '">></a>')
.bind(
'click',
function()
{
return c._displayNewMonth.call(c, this, 1, 0);
}
)
),
$('<div class="dp-calendar"></div>')
)
.bgIframe()
);
var $pop = this.inline ? $('.dp-popup', this.context) : $('#dp-popup');
if (this.showYearNavigation == false) {
$('.dp-nav-prev-year, .dp-nav-next-year', c.context).css('display', 'none');
}
if (this.displayClose) {
$pop.append(
$('<a href="#" id="dp-close">' + $.dpText.TEXT_CLOSE + '</a>')
.bind(
'click',
function()
{
c._closeCalendar();
return false;
}
)
);
}
c._renderCalendar();
$(this.ele).trigger('dpDisplayed', $pop);
if (!c.inline) {
if (this.verticalPosition == $.dpConst.POS_BOTTOM) {
$pop.css('top', eleOffset.top + $ele.height() - $pop.height() + c.verticalOffset);
}
if (this.horizontalPosition == $.dpConst.POS_RIGHT) {
$pop.css('left', eleOffset.left + $ele.width() - $pop.width() + c.horizontalOffset);
}
// $('.selectee', this.context).focus();
$(document).bind('mousedown.datepicker', this._checkMouse);
}
},
setRenderCallback : function(a)
{
if (a == null) return;
if (a && typeof(a) == 'function') {
a = [a];
}
this.renderCallback = this.renderCallback.concat(a);
},
cellRender : function ($td, thisDate, month, year) {
var c = this.dpController;
var d = new Date(thisDate.getTime());
// add our click handlers to deal with it when the days are clicked...
$td.bind(
'click',
function()
{
var $this = $(this);
if (!$this.is('.disabled')) {
c.setSelected(d, !$this.is('.selected') || !c.selectMultiple, false, true);
if (c.closeOnSelect) {
// Focus the next input in the form…
if (c.settings.autoFocusNextInput) {
var ele = c.ele;
var found = false;
$(':input', ele.form).each(
function()
{
if (found) {
$(this).focus();
return false;
}
if (this == ele) {
found = true;
}
}
);
} else {
c.ele.focus();
}
c._closeCalendar();
}
}
}
);
if (c.isSelected(d)) {
$td.addClass('selected');
if (c.settings.selectWeek)
{
$td.parent().addClass('selectedWeek');
}
} else if (c.selectMultiple && c.numSelected == c.numSelectable) {
$td.addClass('unselectable');
}
},
_applyRenderCallbacks : function()
{
var c = this;
$('td', this.context).each(
function()
{
for (var i=0; i<c.renderCallback.length; i++) {
$td = $(this);
c.renderCallback[i].apply(this, [$td, Date.fromString($td.data('datePickerDate')), c.displayedMonth, c.displayedYear]);
}
}
);
return;
},
// ele is the clicked button - only proceed if it doesn't have the class disabled...
// m and y are -1, 0 or 1 depending which direction we want to go in...
_displayNewMonth : function(ele, m, y)
{
if (!$(ele).is('.disabled')) {
this.setDisplayedMonth(this.displayedMonth + m, this.displayedYear + y, true);
}
ele.blur();
return false;
},
_rerenderCalendar : function()
{
this._clearCalendar();
this._renderCalendar();
},
_renderCalendar : function()
{
// set the title...
$('h2', this.context).html((new Date(this.displayedYear, this.displayedMonth, 1)).asString($.dpText.HEADER_FORMAT));
// render the calendar...
$('.dp-calendar', this.context).renderCalendar(
$.extend(
{},
this.settings,
{
month : this.displayedMonth,
year : this.displayedYear,
renderCallback : this.cellRender,
dpController : this,
hoverClass : this.hoverClass
})
);
// update the status of the control buttons and disable dates before startDate or after endDate...
// TODO: When should the year buttons be disabled? When you can't go forward a whole year from where you are or is that annoying?
if (this.displayedYear == this.startDate.getFullYear() && this.displayedMonth == this.startDate.getMonth()) {
$('.dp-nav-prev-year', this.context).addClass('disabled');
$('.dp-nav-prev-month', this.context).addClass('disabled');
$('.dp-calendar td.other-month', this.context).each(
function()
{
var $this = $(this);
if (Number($this.text()) > 20) {
$this.addClass('disabled');
}
}
);
var d = this.startDate.getDate();
$('.dp-calendar td.current-month', this.context).each(
function()
{
var $this = $(this);
if (Number($this.text()) < d) {
$this.addClass('disabled');
}
}
);
} else {
$('.dp-nav-prev-year', this.context).removeClass('disabled');
$('.dp-nav-prev-month', this.context).removeClass('disabled');
var d = this.startDate.getDate();
if (d > 20) {
// check if the startDate is last month as we might need to add some disabled classes...
var st = this.startDate.getTime();
var sd = new Date(st);
sd.addMonths(1);
if (this.displayedYear == sd.getFullYear() && this.displayedMonth == sd.getMonth()) {
$('.dp-calendar td.other-month', this.context).each(
function()
{
var $this = $(this);
if (Date.fromString($this.data('datePickerDate')).getTime() < st) {
$this.addClass('disabled');
}
}
);
}
}
}