media/jquery.datePicker.js

   1 /**\r
   2  * Copyright (c) 2008 Kelvin Luck (http://www.kelvinluck.com/)\r
   3  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) \r
   4  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.\r
   5  * .\r
   6  * $Id: jquery.datePicker.js 94 2010-01-25 02:25:27Z kelvin.luck $\r
   7  **/\r
   8 \r
   9 (function($){\r
  10     \r
  11         $.fn.extend({\r
  12 /**\r
  13  * Render a calendar table into any matched elements.\r
  14  * \r
  15  * @param Object s (optional) Customize your calendars.\r
  16  * @option Number month The month to render (NOTE that months are zero based). Default is today's month.\r
  17  * @option Number year The year to render. Default is today's year.\r
  18  * @option Function renderCallback A reference to a function that is called as each cell is rendered and which can add classes and event listeners to the created nodes. Default is no callback.\r
  19  * @option Number showHeader Whether or not to show the header row, possible values are: $.dpConst.SHOW_HEADER_NONE (no header), $.dpConst.SHOW_HEADER_SHORT (first letter of each day) and $.dpConst.SHOW_HEADER_LONG (full name of each day). Default is $.dpConst.SHOW_HEADER_SHORT.\r
  20  * @option String hoverClass The class to attach to each cell when you hover over it (to allow you to use hover effects in IE6 which doesn't support the :hover pseudo-class on elements other than links). Default is dp-hover. Pass false if you don't want a hover class.\r
  21  * @type jQuery\r
  22  * @name renderCalendar\r
  23  * @cat plugins/datePicker\r
  24  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
  25  *\r
  26  * @example $('#calendar-me').renderCalendar({month:0, year:2007});\r
  27  * @desc Renders a calendar displaying January 2007 into the element with an id of calendar-me.\r
  28  *\r
  29  * @example\r
  30  * var testCallback = function($td, thisDate, month, year)\r
  31  * {\r
  32  * if ($td.is('.current-month') && thisDate.getDay() == 4) {\r
  33  *              var d = thisDate.getDate();\r
  34  *              $td.bind(\r
  35  *                      'click',\r
  36  *                      function()\r
  37  *                      {\r
  38  *                              alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year);\r
  39  *                      }\r
  40  *              ).addClass('thursday');\r
  41  *      } else if (thisDate.getDay() == 5) {\r
  42  *              $td.html('Friday the ' + $td.html() + 'th');\r
  43  *      }\r
  44  * }\r
  45  * $('#calendar-me').renderCalendar({month:0, year:2007, renderCallback:testCallback});\r
  46  * \r
  47  * @desc Renders a calendar displaying January 2007 into the element with an id of calendar-me. Every Thursday in the current month has a class of "thursday" applied to it, is clickable and shows an alert when clicked. Every Friday on the calendar has the number inside replaced with text.\r
  48  **/\r
  49                 renderCalendar  :   function(s)\r
  50                 {\r
  51                         var dc = function(a)\r
  52                         {\r
  53                                 return document.createElement(a);\r
  54                         };\r
  55 \r
  56                         s = $.extend({}, $.fn.datePicker.defaults, s);\r
  57                         \r
  58                         if (s.showHeader != $.dpConst.SHOW_HEADER_NONE) {\r
  59                                 var headRow = $(dc('tr'));\r
  60                                 for (var i=Date.firstDayOfWeek; i<Date.firstDayOfWeek+7; i++) {\r
  61                                         var weekday = i%7;\r
  62                                         var day = Date.dayNames[weekday];\r
  63                                         headRow.append(\r
  64                                                 jQuery(dc('th')).attr({'scope':'col', 'abbr':day, 'title':day, 'class':(weekday == 0 || weekday == 6 ? 'weekend' : 'weekday')}).html(s.showHeader == $.dpConst.SHOW_HEADER_SHORT ? day.substr(0, 1) : day)\r
  65                                         );\r
  66                                 }\r
  67                         };\r
  68                         \r
  69                         var calendarTable = $(dc('table'))\r
  70                                                                         .attr(\r
  71                                                                                 {\r
  72                                                                                         'cellspacing':2\r
  73                                                                                 }\r
  74                                                                         )\r
  75                                                                         .addClass('jCalendar')\r
  76                                                                         .append(\r
  77                                                                                 (s.showHeader != $.dpConst.SHOW_HEADER_NONE ? \r
  78                                                                                         $(dc('thead'))\r
  79                                                                                                 .append(headRow)\r
  80                                                                                         :\r
  81                                                                                         dc('thead')\r
  82                                                                                 )\r
  83                                                                         );\r
  84                         var tbody = $(dc('tbody'));\r
  85                         \r
  86                         var today = (new Date()).zeroTime();
  87                         today.setHours(12);\r
  88                         \r
  89                         var month = s.month == undefined ? today.getMonth() : s.month;\r
  90                         var year = s.year || today.getFullYear();\r
  91                         \r
  92                         var currentDate = (new Date(year, month, 1, 12, 0, 0));\r
  93                         \r
  94                         \r
  95                         var firstDayOffset = Date.firstDayOfWeek - currentDate.getDay() + 1;\r
  96                         if (firstDayOffset > 1) firstDayOffset -= 7;\r
  97                         var weeksToDraw = Math.ceil(( (-1*firstDayOffset+1) + currentDate.getDaysInMonth() ) /7);\r
  98                         currentDate.addDays(firstDayOffset-1);\r
  99                         \r
 100                         var doHover = function(firstDayInBounds)\r
 101                         {\r
 102                                 return function()\r
 103                                 {\r
 104                                         if (s.hoverClass) {\r
 105                                                 var $this = $(this);\r
 106                                                 if (!s.selectWeek) {\r
 107                                                         $this.addClass(s.hoverClass);\r
 108                                                 } else if (firstDayInBounds && !$this.is('.disabled')) {\r
 109                                                         $this.parent().addClass('activeWeekHover');\r
 110                                                 }\r
 111                                         }\r
 112                                 }\r
 113                         };\r
 114                         var unHover = function()\r
 115                         {\r
 116                                 if (s.hoverClass) {\r
 117                                         var $this = $(this);\r
 118                                         $this.removeClass(s.hoverClass);\r
 119                                         $this.parent().removeClass('activeWeekHover');\r
 120                                 }\r
 121                         };\r
 122 \r
 123                         var w = 0;\r
 124                         while (w++<weeksToDraw) {\r
 125                                 var r = jQuery(dc('tr'));\r
 126                                 var firstDayInBounds = s.dpController ? currentDate > s.dpController.startDate : false;\r
 127                                 for (var i=0; i<7; i++) {\r
 128                                         var thisMonth = currentDate.getMonth() == month;\r
 129                                         var d = $(dc('td'))\r
 130                                                                 .text(currentDate.getDate() + '')\r
 131                                                                 .addClass((thisMonth ? 'current-month ' : 'other-month ') +\r
 132                                                                                                         (currentDate.isWeekend() ? 'weekend ' : 'weekday ') +\r
 133                                                                                                         (thisMonth && currentDate.getTime() == today.getTime() ? 'today ' : '')\r
 134                                                                 )\r
 135                                                                 .data('datePickerDate', currentDate.asString())\r
 136                                                                 .hover(doHover(firstDayInBounds), unHover)\r
 137                                                         ;\r
 138                                         r.append(d);\r
 139                                         if (s.renderCallback) {\r
 140                                                 s.renderCallback(d, currentDate, month, year);\r
 141                                         }\r
 142                                         // addDays(1) fails in some locales due to daylight savings. See issue 39.\r
 143                                         //currentDate.addDays(1);
 144                                         // set the time to midday to avoid any weird timezone issues??\r
 145                                         currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()+1, 12, 0, 0);\r
 146                                 }\r
 147                                 tbody.append(r);\r
 148                         }\r
 149                         calendarTable.append(tbody);\r
 150                         \r
 151                         return this.each(\r
 152                                 function()\r
 153                                 {\r
 154                                         $(this).empty().append(calendarTable);\r
 155                                 }\r
 156                         );\r
 157                 },\r
 158 /**\r
 159  * Create a datePicker associated with each of the matched elements.\r
 160  *\r
 161  * The matched element will receive a few custom events with the following signatures:\r
 162  *\r
 163  * dateSelected(event, date, $td, status)\r
 164  * Triggered when a date is selected. event is a reference to the event, date is the Date selected, $td is a jquery object wrapped around the TD that was clicked on and status is whether the date was selected (true) or deselected (false)\r
 165  * \r
 166  * dpClosed(event, selected)\r
 167  * Triggered when the date picker is closed. event is a reference to the event and selected is an Array containing Date objects.\r
 168  *\r
 169  * dpMonthChanged(event, displayedMonth, displayedYear)\r
 170  * Triggered when the month of the popped up calendar is changed. event is a reference to the event, displayedMonth is the number of the month now displayed (zero based) and displayedYear is the year of the month.\r
 171  *\r
 172  * dpDisplayed(event, $datePickerDiv)\r
 173  * Triggered when the date picker is created. $datePickerDiv is the div containing the date picker. Use this event to add custom content/ listeners to the popped up date picker.\r
 174  *\r
 175  * @param Object s (optional) Customize your date pickers.\r
 176  * @option Number month The month to render when the date picker is opened (NOTE that months are zero based). Default is today's month.\r
 177  * @option Number year The year to render when the date picker is opened. Default is today's year.\r
 178  * @option String startDate The first date date can be selected.\r
 179  * @option String endDate The last date that can be selected.\r
 180  * @option Boolean inline Whether to create the datePicker as inline (e.g. always on the page) or as a model popup. Default is false (== modal popup)\r
 181  * @option Boolean createButton Whether to create a .dp-choose-date anchor directly after the matched element which when clicked will trigger the showing of the date picker. Default is true.\r
 182  * @option Boolean showYearNavigation Whether to display buttons which allow the user to navigate through the months a year at a time. Default is true.\r
 183  * @option Boolean closeOnSelect Whether to close the date picker when a date is selected. Default is true.\r
 184  * @option Boolean displayClose Whether to create a "Close" button within the date picker popup. Default is false.\r
 185  * @option Boolean selectMultiple Whether a user should be able to select multiple dates with this date picker. Default is false.\r
 186  * @option Number numSelectable The maximum number of dates that can be selected where selectMultiple is true. Default is a very high number.\r
 187  * @option Boolean clickInput If the matched element is an input type="text" and this option is true then clicking on the input will cause the date picker to appear.\r
 188  * @option Boolean rememberViewedMonth Whether the datePicker should remember the last viewed month and open on it. If false then the date picker will always open with the month for the first selected date visible.\r
 189  * @option Boolean selectWeek Whether to select a complete week at a time...\r
 190  * @option Number verticalPosition The vertical alignment of the popped up date picker to the matched element. One of $.dpConst.POS_TOP and $.dpConst.POS_BOTTOM. Default is $.dpConst.POS_TOP.\r
 191  * @option Number horizontalPosition The horizontal alignment of the popped up date picker to the matched element. One of $.dpConst.POS_LEFT and $.dpConst.POS_RIGHT.\r
 192  * @option Number verticalOffset The number of pixels offset from the defined verticalPosition of this date picker that it should pop up in. Default in 0.\r
 193  * @option Number horizontalOffset The number of pixels offset from the defined horizontalPosition of this date picker that it should pop up in. Default in 0.\r
 194  * @option (Function|Array) renderCallback A reference to a function (or an array of seperate functions) that is called as each cell is rendered and which can add classes and event listeners to the created nodes. Each callback function will receive four arguments; a jquery object wrapping the created TD, a Date object containing the date this TD represents, a number giving the currently rendered month and a number giving the currently rendered year. Default is no callback.\r
 195  * @option String hoverClass The class to attach to each cell when you hover over it (to allow you to use hover effects in IE6 which doesn't support the :hover pseudo-class on elements other than links). Default is dp-hover. Pass false if you don't want a hover class.\r
 196  * @type jQuery\r
 197  * @name datePicker\r
 198  * @cat plugins/datePicker\r
 199  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 200  *\r
 201  * @example $('input.date-picker').datePicker();\r
 202  * @desc Creates a date picker button next to all matched input elements. When the button is clicked on the value of the selected date will be placed in the corresponding input (formatted according to Date.format).\r
 203  *\r
 204  * @example demo/index.html\r
 205  * @desc See the projects homepage for many more complex examples...\r
 206  **/\r
 207                 datePicker : function(s)\r
 208                 {                       \r
 209                         if (!$.event._dpCache) $.event._dpCache = [];\r
 210                         \r
 211                         // initialise the date picker controller with the relevant settings...\r
 212                         s = $.extend({}, $.fn.datePicker.defaults, s);\r
 213                         \r
 214                         return this.each(\r
 215                                 function()\r
 216                                 {\r
 217                                         var $this = $(this);\r
 218                                         var alreadyExists = true;\r
 219                                         \r
 220                                         if (!this._dpId) {\r
 221                                                 this._dpId = $.event.guid++;\r
 222                                                 $.event._dpCache[this._dpId] = new DatePicker(this);\r
 223                                                 alreadyExists = false;\r
 224                                         }\r
 225                                         \r
 226                                         if (s.inline) {\r
 227                                                 s.createButton = false;\r
 228                                                 s.displayClose = false;\r
 229                                                 s.closeOnSelect = false;\r
 230                                                 $this.empty();\r
 231                                         }\r
 232                                         \r
 233                                         var controller = $.event._dpCache[this._dpId];\r
 234                                         \r
 235                                         controller.init(s);\r
 236                                         \r
 237                                         if (!alreadyExists && s.createButton) {\r
 238                                                 // create it!\r
 239                                                 controller.button = $('<a href="#" class="dp-choose-date" title="' + $.dpText.TEXT_CHOOSE_DATE + '">' + $.dpText.TEXT_CHOOSE_DATE + '</a>')\r
 240                                                                 .bind(\r
 241                                                                         'click',\r
 242                                                                         function()\r
 243                                                                         {\r
 244                                                                                 $this.dpDisplay(this);\r
 245                                                                                 this.blur();\r
 246                                                                                 return false;\r
 247                                                                         }\r
 248                                                                 );\r
 249                                                 $this.after(controller.button);\r
 250                                         }\r
 251                                         \r
 252                                         if (!alreadyExists && $this.is(':text')) {\r
 253                                                 $this\r
 254                                                         .bind(\r
 255                                                                 'dateSelected',\r
 256                                                                 function(e, selectedDate, $td)\r
 257                                                                 {\r
 258                                                                         this.value = selectedDate.asString();\r
 259                                                                 }\r
 260                                                         ).bind(\r
 261                                                                 'change',\r
 262                                                                 function()\r
 263                                                                 {\r
 264                                                                         if (this.value == '') {\r
 265                                                                                 controller.clearSelected();\r
 266                                                                         } else {\r
 267                                                                                 var d = Date.fromString(this.value);\r
 268                                                                                 if (d) {\r
 269                                                                                         controller.setSelected(d, true, true);\r
 270                                                                                 }\r
 271                                                                         }\r
 272                                                                 }\r
 273                                                         );\r
 274                                                 if (s.clickInput) {\r
 275                                                         $this.bind(\r
 276                                                                 'click',\r
 277                                                                 function()\r
 278                                                                 {\r
 279                                                                         // The change event doesn't happen until the input loses focus so we need to manually trigger it...\r
 280                                                                         $this.trigger('change');\r
 281                                                                         $this.dpDisplay();\r
 282                                                                 }\r
 283                                                         );\r
 284                                                 }\r
 285                                                 var d = Date.fromString(this.value);\r
 286                                                 if (this.value != '' && d) {\r
 287                                                         controller.setSelected(d, true, true);\r
 288                                                 }\r
 289                                         }\r
 290                                         \r
 291                                         $this.addClass('dp-applied');\r
 292                                         \r
 293                                 }\r
 294                         )\r
 295                 },\r
 296 /**\r
 297  * Disables or enables this date picker\r
 298  *\r
 299  * @param Boolean s Whether to disable (true) or enable (false) this datePicker\r
 300  * @type jQuery\r
 301  * @name dpSetDisabled\r
 302  * @cat plugins/datePicker\r
 303  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 304  *\r
 305  * @example $('.date-picker').datePicker();\r
 306  * $('.date-picker').dpSetDisabled(true);\r
 307  * @desc Prevents this date picker from displaying and adds a class of dp-disabled to it (and it's associated button if it has one) for styling purposes. If the matched element is an input field then it will also set the disabled attribute to stop people directly editing the field.\r
 308  **/\r
 309                 dpSetDisabled : function(s)\r
 310                 {\r
 311                         return _w.call(this, 'setDisabled', s);\r
 312                 },\r
 313 /**\r
 314  * Updates the first selectable date for any date pickers on any matched elements.\r
 315  *\r
 316  * @param String d A string representing the first selectable date (formatted according to Date.format).\r
 317  * @type jQuery\r
 318  * @name dpSetStartDate\r
 319  * @cat plugins/datePicker\r
 320  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 321  *\r
 322  * @example $('.date-picker').datePicker();\r
 323  * $('.date-picker').dpSetStartDate('01/01/2000');\r
 324  * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the first selectable date for each of these to the first day of the millenium.\r
 325  **/\r
 326                 dpSetStartDate : function(d)\r
 327                 {\r
 328                         return _w.call(this, 'setStartDate', d);\r
 329                 },\r
 330 /**\r
 331  * Updates the last selectable date for any date pickers on any matched elements.\r
 332  *\r
 333  * @param String d A string representing the last selectable date (formatted according to Date.format).\r
 334  * @type jQuery\r
 335  * @name dpSetEndDate\r
 336  * @cat plugins/datePicker\r
 337  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 338  *\r
 339  * @example $('.date-picker').datePicker();\r
 340  * $('.date-picker').dpSetEndDate('01/01/2010');\r
 341  * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the last selectable date for each of these to the first Janurary 2010.\r
 342  **/\r
 343                 dpSetEndDate : function(d)\r
 344                 {\r
 345                         return _w.call(this, 'setEndDate', d);\r
 346                 },\r
 347 /**\r
 348  * Gets a list of Dates currently selected by this datePicker. This will be an empty array if no dates are currently selected or NULL if there is no datePicker associated with the matched element.\r
 349  *\r
 350  * @type Array\r
 351  * @name dpGetSelected\r
 352  * @cat plugins/datePicker\r
 353  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 354  *\r
 355  * @example $('.date-picker').datePicker();\r
 356  * alert($('.date-picker').dpGetSelected());\r
 357  * @desc Will alert an empty array (as nothing is selected yet)\r
 358  **/\r
 359                 dpGetSelected : function()\r
 360                 {\r
 361                         var c = _getController(this[0]);\r
 362                         if (c) {\r
 363                                 return c.getSelected();\r
 364                         }\r
 365                         return null;\r
 366                 },\r
 367 /**\r
 368  * Selects or deselects a date on any matched element's date pickers. Deselcting is only useful on date pickers where selectMultiple==true. Selecting will only work if the passed date is within the startDate and endDate boundries for a given date picker.\r
 369  *\r
 370  * @param String d A string representing the date you want to select (formatted according to Date.format).\r
 371  * @param Boolean v Whether you want to select (true) or deselect (false) this date. Optional - default = true.\r
 372  * @param Boolean m Whether you want the date picker to open up on the month of this date when it is next opened. Optional - default = true.\r
 373  * @param Boolean e Whether you want the date picker to dispatch events related to this change of selection. Optional - default = true.\r
 374  * @type jQuery\r
 375  * @name dpSetSelected\r
 376  * @cat plugins/datePicker\r
 377  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 378  *\r
 379  * @example $('.date-picker').datePicker();\r
 380  * $('.date-picker').dpSetSelected('01/01/2010');\r
 381  * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the selected date on these date pickers to the first Janurary 2010. When the date picker is next opened it will display Janurary 2010.\r
 382  **/\r
 383                 dpSetSelected : function(d, v, m, e)\r
 384                 {\r
 385                         if (v == undefined) v=true;\r
 386                         if (m == undefined) m=true;\r
 387                         if (e == undefined) e=true;\r
 388                         return _w.call(this, 'setSelected', Date.fromString(d), v, m, e);\r
 389                 },\r
 390 /**\r
 391  * Sets the month that will be displayed when the date picker is next opened. If the passed month is before startDate then the month containing startDate will be displayed instead. If the passed month is after endDate then the month containing the endDate will be displayed instead.\r
 392  *\r
 393  * @param Number m The month you want the date picker to display. Optional - defaults to the currently displayed month.\r
 394  * @param Number y The year you want the date picker to display. Optional - defaults to the currently displayed year.\r
 395  * @type jQuery\r
 396  * @name dpSetDisplayedMonth\r
 397  * @cat plugins/datePicker\r
 398  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 399  *\r
 400  * @example $('.date-picker').datePicker();\r
 401  * $('.date-picker').dpSetDisplayedMonth(10, 2008);\r
 402  * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the selected date on these date pickers to the first Janurary 2010. When the date picker is next opened it will display Janurary 2010.\r
 403  **/\r
 404                 dpSetDisplayedMonth : function(m, y)\r
 405                 {\r
 406                         return _w.call(this, 'setDisplayedMonth', Number(m), Number(y), true);\r
 407                 },\r
 408 /**\r
 409  * Displays the date picker associated with the matched elements. Since only one date picker can be displayed at once then the date picker associated with the last matched element will be the one that is displayed.\r
 410  *\r
 411  * @param HTMLElement e An element that you want the date picker to pop up relative in position to. Optional - default behaviour is to pop up next to the element associated with this date picker.\r
 412  * @type jQuery\r
 413  * @name dpDisplay\r
 414  * @cat plugins/datePicker\r
 415  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 416  *\r
 417  * @example $('#date-picker').datePicker();\r
 418  * $('#date-picker').dpDisplay();\r
 419  * @desc Creates a date picker associated with the element with an id of date-picker and then causes it to pop up.\r
 420  **/\r
 421                 dpDisplay : function(e)\r
 422                 {\r
 423                         return _w.call(this, 'display', e);\r
 424                 },\r
 425 /**\r
 426  * Sets a function or array of functions that is called when each TD of the date picker popup is rendered to the page\r
 427  *\r
 428  * @param (Function|Array) a A function or an array of functions that are called when each td is rendered. Each function will receive four arguments; a jquery object wrapping the created TD, a Date object containing the date this TD represents, a number giving the currently rendered month and a number giving the currently rendered year.\r
 429  * @type jQuery\r
 430  * @name dpSetRenderCallback\r
 431  * @cat plugins/datePicker\r
 432  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 433  *\r
 434  * @example $('#date-picker').datePicker();\r
 435  * $('#date-picker').dpSetRenderCallback(function($td, thisDate, month, year)\r
 436  * {\r
 437  *      // do stuff as each td is rendered dependant on the date in the td and the displayed month and year\r
 438  * });\r
 439  * @desc Creates a date picker associated with the element with an id of date-picker and then creates a function which is called as each td is rendered when this date picker is displayed.\r
 440  **/\r
 441                 dpSetRenderCallback : function(a)\r
 442                 {\r
 443                         return _w.call(this, 'setRenderCallback', a);\r
 444                 },\r
 445 /**\r
 446  * Sets the position that the datePicker will pop up (relative to it's associated element)\r
 447  *\r
 448  * @param Number v The vertical alignment of the created date picker to it's associated element. Possible values are $.dpConst.POS_TOP and $.dpConst.POS_BOTTOM\r
 449  * @param Number h The horizontal alignment of the created date picker to it's associated element. Possible values are $.dpConst.POS_LEFT and $.dpConst.POS_RIGHT\r
 450  * @type jQuery\r
 451  * @name dpSetPosition\r
 452  * @cat plugins/datePicker\r
 453  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 454  *\r
 455  * @example $('#date-picker').datePicker();\r
 456  * $('#date-picker').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT);\r
 457  * @desc Creates a date picker associated with the element with an id of date-picker and makes it so that when this date picker pops up it will be bottom and right aligned to the #date-picker element.\r
 458  **/\r
 459                 dpSetPosition : function(v, h)\r
 460                 {\r
 461                         return _w.call(this, 'setPosition', v, h);\r
 462                 },\r
 463 /**\r
 464  * Sets the offset that the popped up date picker will have from it's default position relative to it's associated element (as set by dpSetPosition)\r
 465  *\r
 466  * @param Number v The vertical offset of the created date picker.\r
 467  * @param Number h The horizontal offset of the created date picker.\r
 468  * @type jQuery\r
 469  * @name dpSetOffset\r
 470  * @cat plugins/datePicker\r
 471  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 472  *\r
 473  * @example $('#date-picker').datePicker();\r
 474  * $('#date-picker').dpSetOffset(-20, 200);\r
 475  * @desc Creates a date picker associated with the element with an id of date-picker and makes it so that when this date picker pops up it will be 20 pixels above and 200 pixels to the right of it's default position.\r
 476  **/\r
 477                 dpSetOffset : function(v, h)\r
 478                 {\r
 479                         return _w.call(this, 'setOffset', v, h);\r
 480                 },\r
 481 /**\r
 482  * Closes the open date picker associated with this element.\r
 483  *\r
 484  * @type jQuery\r
 485  * @name dpClose\r
 486  * @cat plugins/datePicker\r
 487  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 488  *\r
 489  * @example $('.date-pick')\r
 490  *              .datePicker()\r
 491  *              .bind(\r
 492  *                      'focus',\r
 493  *                      function()\r
 494  *                      {\r
 495  *                              $(this).dpDisplay();\r
 496  *                      }\r
 497  *              ).bind(\r
 498  *                      'blur',\r
 499  *                      function()\r
 500  *                      {\r
 501  *                              $(this).dpClose();\r
 502  *                      }\r
 503  *              );\r
 504  **/\r
 505                 dpClose : function()\r
 506                 {\r
 507                         return _w.call(this, '_closeCalendar', false, this[0]);\r
 508                 },\r
 509 /**\r
 510  * Rerenders the date picker's current month (for use with inline calendars and renderCallbacks).\r
 511  *\r
 512  * @type jQuery\r
 513  * @name dpRerenderCalendar\r
 514  * @cat plugins/datePicker\r
 515  * @author Kelvin Luck (http://www.kelvinluck.com/)\r
 516  *\r
 517  **/\r
 518                 dpRerenderCalendar : function()\r
 519                 {\r
 520                         return _w.call(this, '_rerenderCalendar');\r
 521                 },\r
 522                 // private function called on unload to clean up any expandos etc and prevent memory links...\r
 523                 _dpDestroy : function()\r
 524                 {\r
 525                         // TODO - implement this?\r
 526                 }\r
 527         });\r
 528         \r
 529         // private internal function to cut down on the amount of code needed where we forward\r
 530         // dp* methods on the jQuery object on to the relevant DatePicker controllers...\r
 531         var _w = function(f, a1, a2, a3, a4)\r
 532         {\r
 533                 return this.each(\r
 534                         function()\r
 535                         {\r
 536                                 var c = _getController(this);\r
 537                                 if (c) {\r
 538                                         c[f](a1, a2, a3, a4);\r
 539                                 }\r
 540                         }\r
 541                 );\r
 542         };\r
 543         \r
 544         function DatePicker(ele)\r
 545         {\r
 546                 this.ele = ele;\r
 547                 \r
 548                 // initial values...\r
 549                 this.displayedMonth             =       null;\r
 550                 this.displayedYear              =       null;\r
 551                 this.startDate                  =       null;\r
 552                 this.endDate                    =       null;\r
 553                 this.showYearNavigation =       null;\r
 554                 this.closeOnSelect              =       null;\r
 555                 this.displayClose               =       null;\r
 556                 this.rememberViewedMonth=       null;\r
 557                 this.selectMultiple             =       null;\r
 558                 this.numSelectable              =       null;\r
 559                 this.numSelected                =       null;\r
 560                 this.verticalPosition   =       null;\r
 561                 this.horizontalPosition =       null;\r
 562                 this.verticalOffset             =       null;\r
 563                 this.horizontalOffset   =       null;\r
 564                 this.button                             =       null;\r
 565                 this.renderCallback             =       [];\r
 566                 this.selectedDates              =       {};\r
 567                 this.inline                             =       null;\r
 568                 this.context                    =       '#dp-popup';\r
 569                 this.settings                   =       {};\r
 570         };\r
 571         $.extend(\r
 572                 DatePicker.prototype,\r
 573                 {       \r
 574                         init : function(s)\r
 575                         {\r
 576                                 this.setStartDate(s.startDate);\r
 577                                 this.setEndDate(s.endDate);\r
 578                                 this.setDisplayedMonth(Number(s.month), Number(s.year));\r
 579                                 this.setRenderCallback(s.renderCallback);\r
 580                                 this.showYearNavigation = s.showYearNavigation;\r
 581                                 this.closeOnSelect = s.closeOnSelect;\r
 582                                 this.displayClose = s.displayClose;\r
 583                                 this.rememberViewedMonth =      s.rememberViewedMonth;\r
 584                                 this.selectMultiple = s.selectMultiple;\r
 585                                 this.numSelectable = s.selectMultiple ? s.numSelectable : 1;\r
 586                                 this.numSelected = 0;\r
 587                                 this.verticalPosition = s.verticalPosition;\r
 588                                 this.horizontalPosition = s.horizontalPosition;\r
 589                                 this.hoverClass = s.hoverClass;\r
 590                                 this.setOffset(s.verticalOffset, s.horizontalOffset);\r
 591                                 this.inline = s.inline;\r
 592                                 this.settings = s;\r
 593                                 if (this.inline) {\r
 594                                         this.context = this.ele;\r
 595                                         this.display();\r
 596                                 }\r
 597                         },\r
 598                         setStartDate : function(d)\r
 599                         {\r
 600                                 if (d) {\r
 601                                         this.startDate = Date.fromString(d);\r
 602                                 }\r
 603                                 if (!this.startDate) {\r
 604                                         this.startDate = (new Date()).zeroTime();\r
 605                                 }\r
 606                                 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);\r
 607                         },\r
 608                         setEndDate : function(d)\r
 609                         {\r
 610                                 if (d) {\r
 611                                         this.endDate = Date.fromString(d);\r
 612                                 }\r
 613                                 if (!this.endDate) {\r
 614                                         this.endDate = (new Date('12/31/2999')); // using the JS Date.parse function which expects mm/dd/yyyy\r
 615                                 }\r
 616                                 if (this.endDate.getTime() < this.startDate.getTime()) {\r
 617                                         this.endDate = this.startDate;\r
 618                                 }\r
 619                                 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);\r
 620                         },\r
 621                         setPosition : function(v, h)\r
 622                         {\r
 623                                 this.verticalPosition = v;\r
 624                                 this.horizontalPosition = h;\r
 625                         },\r
 626                         setOffset : function(v, h)\r
 627                         {\r
 628                                 this.verticalOffset = parseInt(v) || 0;\r
 629                                 this.horizontalOffset = parseInt(h) || 0;\r
 630                         },\r
 631                         setDisabled : function(s)\r
 632                         {\r
 633                                 $e = $(this.ele);\r
 634                                 $e[s ? 'addClass' : 'removeClass']('dp-disabled');\r
 635                                 if (this.button) {\r
 636                                         $but = $(this.button);\r
 637                                         $but[s ? 'addClass' : 'removeClass']('dp-disabled');\r
 638                                         $but.attr('title', s ? '' : $.dpText.TEXT_CHOOSE_DATE);\r
 639                                 }\r
 640                                 if ($e.is(':text')) {\r
 641                                         $e.attr('disabled', s ? 'disabled' : '');\r
 642                                 }\r
 643                         },\r
 644                         setDisplayedMonth : function(m, y, rerender)\r
 645                         {\r
 646                                 if (this.startDate == undefined || this.endDate == undefined) {\r
 647                                         return;\r
 648                                 }\r
 649                                 var s = new Date(this.startDate.getTime());\r
 650                                 s.setDate(1);\r
 651                                 var e = new Date(this.endDate.getTime());\r
 652                                 e.setDate(1);\r
 653                                 \r
 654                                 var t;\r
 655                                 if ((!m && !y) || (isNaN(m) && isNaN(y))) {\r
 656                                         // no month or year passed - default to current month\r
 657                                         t = new Date().zeroTime();\r
 658                                         t.setDate(1);\r
 659                                 } else if (isNaN(m)) {\r
 660                                         // just year passed in - presume we want the displayedMonth\r
 661                                         t = new Date(y, this.displayedMonth, 1);\r
 662                                 } else if (isNaN(y)) {\r
 663                                         // just month passed in - presume we want the displayedYear\r
 664                                         t = new Date(this.displayedYear, m, 1);\r
 665                                 } else {\r
 666                                         // year and month passed in - that's the date we want!\r
 667                                         t = new Date(y, m, 1)\r
 668                                 }\r
 669                                 // check if the desired date is within the range of our defined startDate and endDate\r
 670                                 if (t.getTime() < s.getTime()) {\r
 671                                         t = s;\r
 672                                 } else if (t.getTime() > e.getTime()) {\r
 673                                         t = e;\r
 674                                 }\r
 675                                 var oldMonth = this.displayedMonth;\r
 676                                 var oldYear = this.displayedYear;\r
 677                                 this.displayedMonth = t.getMonth();\r
 678                                 this.displayedYear = t.getFullYear();\r
 679 \r
 680                                 if (rerender && (this.displayedMonth != oldMonth || this.displayedYear != oldYear))\r
 681                                 {\r
 682                                         this._rerenderCalendar();\r
 683                                         $(this.ele).trigger('dpMonthChanged', [this.displayedMonth, this.displayedYear]);\r
 684                                 }\r
 685                         },\r
 686                         setSelected : function(d, v, moveToMonth, dispatchEvents)\r
 687                         {\r
 688                                 if (d < this.startDate || d > this.endDate) {\r
 689                                         // Don't allow people to select dates outside range...\r
 690                                         return;\r
 691                                 }\r
 692                                 var s = this.settings;\r
 693                                 if (s.selectWeek)\r
 694                                 {\r
 695                                         d = d.addDays(- (d.getDay() - Date.firstDayOfWeek + 7) % 7);\r
 696                                         if (d < this.startDate) // The first day of this week is before the start date so is unselectable...\r
 697                                         {\r
 698                                                 return;\r
 699                                         }\r
 700                                 }\r
 701                                 if (v == this.isSelected(d)) // this date is already un/selected\r
 702                                 {\r
 703                                         return;\r
 704                                 }\r
 705                                 if (this.selectMultiple == false) {\r
 706                                         this.clearSelected();\r
 707                                 } else if (v && this.numSelected == this.numSelectable) {\r
 708                                         // can't select any more dates...\r
 709                                         return;\r
 710                                 }\r
 711                                 if (moveToMonth && (this.displayedMonth != d.getMonth() || this.displayedYear != d.getFullYear())) {\r
 712                                         this.setDisplayedMonth(d.getMonth(), d.getFullYear(), true);\r
 713                                 }\r
 714                                 this.selectedDates[d.asString()] = v;\r
 715                                 this.numSelected += v ? 1 : -1;\r
 716                                 var selectorString = 'td.' + (d.getMonth() == this.displayedMonth ? 'current-month' : 'other-month');\r
 717                                 var $td;\r
 718                                 $(selectorString, this.context).each(\r
 719                                         function()\r
 720                                         {\r
 721                                                 if ($(this).data('datePickerDate') == d.asString()) {\r
 722                                                         $td = $(this);\r
 723                                                         if (s.selectWeek)\r
 724                                                         {\r
 725                                                                 $td.parent()[v ? 'addClass' : 'removeClass']('selectedWeek');\r
 726                                                         }\r
 727                                                         $td[v ? 'addClass' : 'removeClass']('selected'); \r
 728                                                 }\r
 729                                         }\r
 730                                 );\r
 731                                 $('td', this.context).not('.selected')[this.selectMultiple &&  this.numSelected == this.numSelectable ? 'addClass' : 'removeClass']('unselectable');\r
 732                                 \r
 733                                 if (dispatchEvents)\r
 734                                 {\r
 735                                         var s = this.isSelected(d);\r
 736                                         $e = $(this.ele);\r
 737                                         var dClone = Date.fromString(d.asString());\r
 738                                         $e.trigger('dateSelected', [dClone, $td, s]);\r
 739                                         $e.trigger('change');\r
 740                                 }\r
 741                         },\r
 742                         isSelected : function(d)\r
 743                         {\r
 744                                 return this.selectedDates[d.asString()];\r
 745                         },\r
 746                         getSelected : function()\r
 747                         {\r
 748                                 var r = [];\r
 749                                 for(s in this.selectedDates) {\r
 750                                         if (this.selectedDates[s] == true) {\r
 751                                                 r.push(Date.fromString(s));\r
 752                                         }\r
 753                                 }\r
 754                                 return r;\r
 755                         },\r
 756                         clearSelected : function()\r
 757                         {\r
 758                                 this.selectedDates = {};\r
 759                                 this.numSelected = 0;\r
 760                                 $('td.selected', this.context).removeClass('selected').parent().removeClass('selectedWeek');\r
 761                         },\r
 762                         display : function(eleAlignTo)\r
 763                         {\r
 764                                 if ($(this.ele).is('.dp-disabled')) return;\r
 765                                 \r
 766                                 eleAlignTo = eleAlignTo || this.ele;\r
 767                                 var c = this;\r
 768                                 var $ele = $(eleAlignTo);\r
 769                                 var eleOffset = $ele.offset();\r
 770                                 \r
 771                                 var $createIn;\r
 772                                 var attrs;\r
 773                                 var attrsCalendarHolder;\r
 774                                 var cssRules;\r
 775                                 \r
 776                                 if (c.inline) {\r
 777                                         $createIn = $(this.ele);\r
 778                                         attrs = {\r
 779                                                 'id'            :       'calendar-' + this.ele._dpId,\r
 780                                                 'class' :       'dp-popup dp-popup-inline'\r
 781                                         };\r
 782 \r
 783                                         $('.dp-popup', $createIn).remove();\r
 784                                         cssRules = {\r
 785                                         };\r
 786                                 } else {\r
 787                                         $createIn = $('body');\r
 788                                         attrs = {\r
 789                                                 'id'            :       'dp-popup',\r
 790                                                 'class' :       'dp-popup'\r
 791                                         };\r
 792                                         cssRules = {\r
 793                                                 'top'   :       eleOffset.top + c.verticalOffset,\r
 794                                                 'left'  :       eleOffset.left + c.horizontalOffset\r
 795                                         };\r
 796                                         \r
 797                                         var _checkMouse = function(e)\r
 798                                         {\r
 799                                                 var el = e.target;\r
 800                                                 var cal = $('#dp-popup')[0];\r
 801                                                 \r
 802                                                 while (true){\r
 803                                                         if (el == cal) {\r
 804                                                                 return true;\r
 805                                                         } else if (el == document) {\r
 806                                                                 c._closeCalendar();\r
 807                                                                 return false;\r
 808                                                         } else {\r
 809                                                                 el = $(el).parent()[0];\r
 810                                                         }\r
 811                                                 }\r
 812                                         };\r
 813                                         this._checkMouse = _checkMouse;\r
 814                                         \r
 815                                         c._closeCalendar(true);\r
 816                                         $(document).bind(\r
 817                                                 'keydown.datepicker', \r
 818                                                 function(event)\r
 819                                                 {\r
 820                                                         if (event.keyCode == 27) {\r
 821                                                                 c._closeCalendar();\r
 822                                                         }\r
 823                                                 }\r
 824                                         );\r
 825                                 }\r
 826                                 \r
 827                                 if (!c.rememberViewedMonth)\r
 828                                 {\r
 829                                         var selectedDate = this.getSelected()[0];\r
 830                                         if (selectedDate) {\r
 831                                                 selectedDate = new Date(selectedDate);\r
 832                                                 this.setDisplayedMonth(selectedDate.getMonth(), selectedDate.getFullYear(), false);\r
 833                                         }\r
 834                                 }\r
 835                                 \r
 836                                 $createIn\r
 837                                         .append(\r
 838                                                 $('<div></div>')\r
 839                                                         .attr(attrs)\r
 840                                                         .css(cssRules)\r
 841                                                         .append(\r
 842 //                                                              $('<a href="#" class="selecteee">aaa</a>'),\r
 843                                                                 $('<h2></h2>'),\r
 844                                                                 $('<div class="dp-nav-prev"></div>')\r
 845                                                                         .append(\r
 846                                                                                 $('<a class="dp-nav-prev-year" href="#" title="' + $.dpText.TEXT_PREV_YEAR + '">&lt;&lt;</a>')\r
 847                                                                                         .bind(\r
 848                                                                                                 'click',\r
 849                                                                                                 function()\r
 850                                                                                                 {\r
 851                                                                                                         return c._displayNewMonth.call(c, this, 0, -1);\r
 852                                                                                                 }\r
 853                                                                                         ),\r
 854                                                                                 $('<a class="dp-nav-prev-month" href="#" title="' + $.dpText.TEXT_PREV_MONTH + '">&lt;</a>')\r
 855                                                                                         .bind(\r
 856                                                                                                 'click',\r
 857                                                                                                 function()\r
 858                                                                                                 {\r
 859                                                                                                         return c._displayNewMonth.call(c, this, -1, 0);\r
 860                                                                                                 }\r
 861                                                                                         )\r
 862                                                                         ),\r
 863                                                                 $('<div class="dp-nav-next"></div>')\r
 864                                                                         .append(\r
 865                                                                                 $('<a class="dp-nav-next-year" href="#" title="' + $.dpText.TEXT_NEXT_YEAR + '">&gt;&gt;</a>')\r
 866                                                                                         .bind(\r
 867                                                                                                 'click',\r
 868                                                                                                 function()\r
 869                                                                                                 {\r
 870                                                                                                         return c._displayNewMonth.call(c, this, 0, 1);\r
 871                                                                                                 }\r
 872                                                                                         ),\r
 873                                                                                 $('<a class="dp-nav-next-month" href="#" title="' + $.dpText.TEXT_NEXT_MONTH + '">&gt;</a>')\r
 874                                                                                         .bind(\r
 875                                                                                                 'click',\r
 876                                                                                                 function()\r
 877                                                                                                 {\r
 878                                                                                                         return c._displayNewMonth.call(c, this, 1, 0);\r
 879                                                                                                 }\r
 880                                                                                         )\r
 881                                                                         ),\r
 882                                                                 $('<div class="dp-calendar"></div>')\r
 883                                                         )\r
 884                                                         .bgIframe()\r
 885                                                 );\r
 886                                         \r
 887                                 var $pop = this.inline ? $('.dp-popup', this.context) : $('#dp-popup');\r
 888                                 \r
 889                                 if (this.showYearNavigation == false) {\r
 890                                         $('.dp-nav-prev-year, .dp-nav-next-year', c.context).css('display', 'none');\r
 891                                 }\r
 892                                 if (this.displayClose) {\r
 893                                         $pop.append(\r
 894                                                 $('<a href="#" id="dp-close">' + $.dpText.TEXT_CLOSE + '</a>')\r
 895                                                         .bind(\r
 896                                                                 'click',\r
 897                                                                 function()\r
 898                                                                 {\r
 899                                                                         c._closeCalendar();\r
 900                                                                         return false;\r
 901                                                                 }\r
 902                                                         )\r
 903                                         );\r
 904                                 }\r
 905                                 c._renderCalendar();\r
 906 \r
 907                                 $(this.ele).trigger('dpDisplayed', $pop);\r
 908                                 \r
 909                                 if (!c.inline) {\r
 910                                         if (this.verticalPosition == $.dpConst.POS_BOTTOM) {\r
 911                                                 $pop.css('top', eleOffset.top + $ele.height() - $pop.height() + c.verticalOffset);\r
 912                                         }\r
 913                                         if (this.horizontalPosition == $.dpConst.POS_RIGHT) {\r
 914                                                 $pop.css('left', eleOffset.left + $ele.width() - $pop.width() + c.horizontalOffset);\r
 915                                         }\r
 916 //                                      $('.selectee', this.context).focus();\r
 917                                         $(document).bind('mousedown.datepicker', this._checkMouse);\r
 918                                 }\r
 919                                 \r
 920                         },\r
 921                         setRenderCallback : function(a)\r
 922                         {\r
 923                                 if (a == null) return;\r
 924                                 if (a && typeof(a) == 'function') {\r
 925                                         a = [a];\r
 926                                 }\r
 927                                 this.renderCallback = this.renderCallback.concat(a);\r
 928                         },\r
 929                         cellRender : function ($td, thisDate, month, year) {\r
 930                                 var c = this.dpController;\r
 931                                 var d = new Date(thisDate.getTime());\r
 932                                 \r
 933                                 // add our click handlers to deal with it when the days are clicked...\r
 934                                 \r
 935                                 $td.bind(\r
 936                                         'click',\r
 937                                         function()\r
 938                                         {\r
 939                                                 var $this = $(this);\r
 940                                                 if (!$this.is('.disabled')) {\r
 941                                                         c.setSelected(d, !$this.is('.selected') || !c.selectMultiple, false, true);\r
 942                                                         if (c.closeOnSelect) {\r
 943                                                                 c._closeCalendar();\r
 944                                                         }\r
 945                                                         // TODO: Instead of this which doesn't work in IE anyway we should find the next focusable element in the document\r
 946                                                         // and pass the focus onto that. That would allow the user to continue on the form as expected...\r
 947                                                         if (!$.browser.msie)\r
 948                                                         {\r
 949                                                                 $(c.ele).trigger('focus', [$.dpConst.DP_INTERNAL_FOCUS]);\r
 950                                                         }\r
 951                                                 }\r
 952                                         }\r
 953                                 );\r
 954                                 if (c.isSelected(d)) {\r
 955                                         $td.addClass('selected');\r
 956                                         if (c.settings.selectWeek)\r
 957                                         {\r
 958                                                 $td.parent().addClass('selectedWeek');\r
 959                                         }\r
 960                                 } else  if (c.selectMultiple && c.numSelected == c.numSelectable) {\r
 961                                         $td.addClass('unselectable');\r
 962                                 }\r
 963                                 \r
 964                         },\r
 965                         _applyRenderCallbacks : function()\r
 966                         {\r
 967                                 var c = this;\r
 968                                 $('td', this.context).each(\r
 969                                         function()\r
 970                                         {\r
 971                                                 for (var i=0; i<c.renderCallback.length; i++) {\r
 972                                                         $td = $(this);\r
 973                                                         c.renderCallback[i].apply(this, [$td, Date.fromString($td.data('datePickerDate')), c.displayedMonth, c.displayedYear]);\r
 974                                                 }\r
 975                                         }\r
 976                                 );\r
 977                                 return;\r
 978                         },\r
 979                         // ele is the clicked button - only proceed if it doesn't have the class disabled...\r
 980                         // m and y are -1, 0 or 1 depending which direction we want to go in...\r
 981                         _displayNewMonth : function(ele, m, y) \r
 982                         {\r
 983                                 if (!$(ele).is('.disabled')) {\r
 984                                         this.setDisplayedMonth(this.displayedMonth + m, this.displayedYear + y, true);\r
 985                                 }\r
 986                                 ele.blur();\r
 987                                 return false;\r
 988                         },\r
 989                         _rerenderCalendar : function()\r
 990                         {\r
 991                                 this._clearCalendar();\r
 992                                 this._renderCalendar();\r
 993                         },\r
 994                         _renderCalendar : function()\r
 995                         {\r
 996                                 // set the title...\r
 997                                 $('h2', this.context).html((new Date(this.displayedYear, this.displayedMonth, 1)).asString($.dpText.HEADER_FORMAT));\r
 998                                 \r
 999                                 // render the calendar...\r
1000                                 $('.dp-calendar', this.context).renderCalendar(\r
1001                                         $.extend(\r
1002                                                 {},\r
1003                                                 this.settings, \r
1004                                                 {\r
1005                                                         month                   : this.displayedMonth,\r
1006                                                         year                    : this.displayedYear,\r
1007                                                         renderCallback  : this.cellRender,\r
1008                                                         dpController    : this,\r
1009                                                         hoverClass              : this.hoverClass\r
1010                                                 })\r
1011                                 );\r
1012                                 \r
1013                                 // update the status of the control buttons and disable dates before startDate or after endDate...\r
1014                                 // 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?\r
1015                                 if (this.displayedYear == this.startDate.getFullYear() && this.displayedMonth == this.startDate.getMonth()) {\r
1016                                         $('.dp-nav-prev-year', this.context).addClass('disabled');\r
1017                                         $('.dp-nav-prev-month', this.context).addClass('disabled');\r
1018                                         $('.dp-calendar td.other-month', this.context).each(\r
1019                                                 function()\r
1020                                                 {\r
1021                                                         var $this = $(this);\r
1022                                                         if (Number($this.text()) > 20) {\r
1023                                                                 $this.addClass('disabled');\r
1024                                                         }\r
1025                                                 }\r
1026                                         );\r
1027                                         var d = this.startDate.getDate();\r
1028                                         $('.dp-calendar td.current-month', this.context).each(\r
1029                                                 function()\r
1030                                                 {\r
1031                                                         var $this = $(this);\r
1032                                                         if (Number($this.text()) < d) {\r
1033                                                                 $this.addClass('disabled');\r
1034                                                         }\r
1035                                                 }\r
1036                                         );\r
1037                                 } else {\r
1038                                         $('.dp-nav-prev-year', this.context).removeClass('disabled');\r
1039                                         $('.dp-nav-prev-month', this.context).removeClass('disabled');\r
1040                                         var d = this.startDate.getDate();\r
1041                                         if (d > 20) {\r
1042                                                 // check if the startDate is last month as we might need to add some disabled classes...\r
1043                                                 var st = this.startDate.getTime();\r
1044                                                 var sd = new Date(st);\r
1045                                                 sd.addMonths(1);\r
1046                                                 if (this.displayedYear == sd.getFullYear() && this.displayedMonth == sd.getMonth()) {\r
1047                                                         $('.dp-calendar td.other-month', this.context).each(\r
1048                                                                 function()\r
1049                                                                 {\r
1050                                                                         var $this = $(this);\r
1051                                                                         if (Date.fromString($this.data('datePickerDate')).getTime() < st) {\r
1052                                                                                 $this.addClass('disabled');\r
1053                                                                         }\r
1054                                                                 }\r
1055                                                         );\r
1056                                                 }\r
1057                                         }\r
1058                                 }\r
1059                                 if (this.displayedYear == this.endDate.getFullYear() && this.displayedMonth == this.endDate.getMonth()) {\r
1060                                         $('.dp-nav-next-year', this.context).addClass('disabled');\r
1061                                         $('.dp-nav-next-month', this.context).addClass('disabled');\r
1062                                         $('.dp-calendar td.other-month', this.context).each(\r
1063                                                 function()\r
1064                                                 {\r
1065                                                         var $this = $(this);\r
1066                                                         if (Number($this.text()) < 14) {\r
1067                                                                 $this.addClass('disabled');\r
1068                                                         }\r
1069                                                 }\r
1070                                         );\r
1071                                         var d = this.endDate.getDate();\r
1072                                         $('.dp-calendar td.current-month', this.context).each(\r
1073                                                 function()\r
1074                                                 {\r
1075                                                         var $this = $(this);\r
1076                                                         if (Number($this.text()) > d) {\r
1077                                                                 $this.addClass('disabled');\r
1078                                                         }\r
1079                                                 }\r
1080                                         );\r
1081                                 } else {\r
1082                                         $('.dp-nav-next-year', this.context).removeClass('disabled');\r
1083                                         $('.dp-nav-next-month', this.context).removeClass('disabled');\r
1084                                         var d = this.endDate.getDate();\r
1085                                         if (d < 13) {\r
1086                                                 // check if the endDate is next month as we might need to add some disabled classes...\r
1087                                                 var ed = new Date(this.endDate.getTime());\r
1088                                                 ed.addMonths(-1);\r
1089                                                 if (this.displayedYear == ed.getFullYear() && this.displayedMonth == ed.getMonth()) {\r
1090                                                         $('.dp-calendar td.other-month', this.context).each(\r
1091                                                                 function()\r
1092                                                                 {\r
1093                                                                         var $this = $(this);
1094                                                                         var cellDay = Number($this.text());\r
1095                                                                         if (cellDay < 13 && cellDay > d) {\r
1096                                                                                 $this.addClass('disabled');\r
1097                                                                         }\r
1098                                                                 }\r
1099                                                         );\r
1100                                                 }\r
1101                                         }\r
1102                                 }\r
1103                                 this._applyRenderCallbacks();\r
1104                         },\r
1105                         _closeCalendar : function(programatic, ele)\r
1106                         {\r
1107                                 if (!ele || ele == this.ele)\r
1108                                 {\r
1109                                         $(document).unbind('mousedown.datepicker');\r
1110                                         $(document).unbind('keydown.datepicker');\r
1111                                         this._clearCalendar();\r
1112                                         $('#dp-popup a').unbind();\r
1113                                         $('#dp-popup').empty().remove();\r
1114                                         if (!programatic) {\r
1115                                                 $(this.ele).trigger('dpClosed', [this.getSelected()]);\r
1116                                         }\r
1117                                 }\r
1118                         },\r
1119                         // empties the current dp-calendar div and makes sure that all events are unbound\r
1120                         // and expandos removed to avoid memory leaks...\r
1121                         _clearCalendar : function()\r
1122                         {\r
1123                                 // TODO.\r
1124                                 $('.dp-calendar td', this.context).unbind();\r
1125                                 $('.dp-calendar', this.context).empty();\r
1126                         }\r
1127                 }\r
1128         );\r
1129         \r
1130         // static constants\r
1131         $.dpConst = {\r
1132                 SHOW_HEADER_NONE        :       0,\r
1133                 SHOW_HEADER_SHORT       :       1,\r
1134                 SHOW_HEADER_LONG        :       2,\r
1135                 POS_TOP                         :       0,\r
1136                 POS_BOTTOM                      :       1,\r
1137                 POS_LEFT                        :       0,\r
1138                 POS_RIGHT                       :       1,\r
1139                 DP_INTERNAL_FOCUS       :       'dpInternalFocusTrigger'\r
1140         };\r
1141         // localisable text\r
1142         $.dpText = {\r
1143                 TEXT_PREV_YEAR          :       'Previous year',\r
1144                 TEXT_PREV_MONTH         :       'Previous month',\r
1145                 TEXT_NEXT_YEAR          :       'Next year',\r
1146                 TEXT_NEXT_MONTH         :       'Next month',\r
1147                 TEXT_CLOSE                      :       'Close',\r
1148                 TEXT_CHOOSE_DATE        :       'Choose date',\r
1149                 HEADER_FORMAT           :       'mmmm yyyy'\r
1150         };\r
1151         // version\r
1152         $.dpVersion = '$Id: jquery.datePicker.js 94 2010-01-25 02:25:27Z kelvin.luck $';\r
1153 \r
1154         $.fn.datePicker.defaults = {\r
1155                 month                           : undefined,\r
1156                 year                            : undefined,\r
1157                 showHeader                      : $.dpConst.SHOW_HEADER_SHORT,\r
1158                 startDate                       : undefined,\r
1159                 endDate                         : undefined,\r
1160                 inline                          : false,\r
1161                 renderCallback          : null,\r
1162                 createButton            : true,\r
1163                 showYearNavigation      : true,\r
1164                 closeOnSelect           : true,\r
1165                 displayClose            : false,\r
1166                 selectMultiple          : false,\r
1167                 numSelectable           : Number.MAX_VALUE,\r
1168                 clickInput                      : false,\r
1169                 rememberViewedMonth     : true,\r
1170                 selectWeek                      : false,\r
1171                 verticalPosition        : $.dpConst.POS_TOP,\r
1172                 horizontalPosition      : $.dpConst.POS_LEFT,\r
1173                 verticalOffset          : 0,\r
1174                 horizontalOffset        : 0,\r
1175                 hoverClass                      : 'dp-hover'\r
1176         };\r
1177 \r
1178         function _getController(ele)\r
1179         {\r
1180                 if (ele._dpId) return $.event._dpCache[ele._dpId];\r
1181                 return false;\r
1182         };\r
1183         \r
1184         // make it so that no error is thrown if bgIframe plugin isn't included (allows you to use conditional\r
1185         // comments to only include bgIframe where it is needed in IE without breaking this plugin).\r
1186         if ($.fn.bgIframe == undefined) {\r
1187                 $.fn.bgIframe = function() {return this; };\r
1188         };\r
1189 \r
1190 \r
1191         // clean-up\r
1192         $(window)\r
1193                 .bind('unload', function() {\r
1194                         var els = $.event._dpCache || [];\r
1195                         for (var i in els) {\r
1196                                 $(els[i].ele)._dpDestroy();\r
1197                         }\r
1198                 });\r
1199                 \r
1200         \r
1201 })(jQuery);\r