1/** 2 * Copyright (c) 2007 Kelvin Luck (http://www.kelvinluck.com/) 3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 5 * 6 * $Id: jquery.datePicker.js 3739 2007-10-25 13:55:30Z kelvin.luck $ 7 8 * Amends by Mike Lehan http://m1ke.me 9 * Fixes issues with running under jQuery >= 1.7 10 ** Corrects "className" attribute to "class" 11 ** Uses $.guid for numbering instead of deprecated $.event.guid 12 ** We can import the date js file using JSPP 13 **/ 14 15/*@include date.js */ 16 17(function($){ 18 $.fn.extend({ 19/** 20 * Render a calendar table into any matched elements. 21 * 22 * @param Object s (optional) Customize your calendars. 23 * @option Number month The month to render (NOTE that months are zero based). Default is today's month. 24 * @option Number year The year to render. Default is today's year. 25 * @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. 26 * @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. 27 * @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. 28 * @type jQuery 29 * @name renderCalendar 30 * @cat plugins/datePicker 31 * @author Kelvin Luck (http://www.kelvinluck.com/) 32 * 33 * @example $('#calendar-me').renderCalendar({month:0, year:2007}); 34 * @desc Renders a calendar displaying January 2007 into the element with an id of calendar-me. 35 * 36 * @example 37 * var testCallback = function($td, thisDate, month, year) 38 * { 39 * if ($td.is('.current-month') && thisDate.getDay() == 4){ 40 * var d = thisDate.getDate(); 41 * $td.bind( 42 * 'click', 43 * function() 44 * { 45 * alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year); 46 * } 47 * ).addClass('thursday'); 48 * } else if (thisDate.getDay() == 5){ 49 * $td.html('Friday the ' + $td.html() + 'th'); 50 * } 51 * } 52 * $('#calendar-me').renderCalendar({month:0, year:2007, renderCallback:testCallback}); 53 * 54 * @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. 55 **/ 56 renderCalendar:function(s){ 57 var dc = function(a){ 58 return document.createElement(a); 59 }; 60 s = $.extend({ 61 month : null, 62 year : null, 63 renderCallback : null, 64 showHeader : $.dpConst.SHOW_HEADER_SHORT, 65 dpController : null, 66 hoverClass : 'dp-hover' 67 }, s); 68 69 if (s.showHeader != $.dpConst.SHOW_HEADER_NONE){ 70 var headRow = $(dc('tr')); 71 for (var i=Date.firstDayOfWeek; i<Date.firstDayOfWeek+7; i++){ 72 var weekday = i%7; 73 var day = Date.dayNames[weekday]; 74 headRow.append( 75 jQuery(dc('th')).attr({ 76 'scope':'col', 77 'abbr':day, 78 'title':day, 79 'class': (weekday == 0 || weekday == 6 ? 'weekend' : 'weekday') 80 }).html(s.showHeader == $.dpConst.SHOW_HEADER_SHORT ? day.substr(0, 1) : day) 81 ); 82 } 83 }; 84 85 var calendarTable = $(dc('table')).attr({ 86 'cellspacing':2, 87 'class':'jCalendar' 88 }).append((s.showHeader != $.dpConst.SHOW_HEADER_NONE ? $(dc('thead')).append(headRow) : dc('thead') ) ); 89 var tbody = $(dc('tbody')); 90 91 var today = (new Date()).zeroTime(); 92 93 var month = s.month == undefined ? today.getMonth() : s.month; 94 var year = s.year || today.getFullYear(); 95 96 97 // var currentDate = new Date(year, month, 1); 98 // to prevent a problem with daylight savings time we need to set the hour to somewhere in the middle of the day 99 100 var currentDate = new Date(year, month, 1, 12); 101 102 // we previously tried to set to UTC but it conflicted in other areas 103 // var currentDate = new Date(Date.UTC(year, month, 1)); 104 105 106 var firstDayOffset = Date.firstDayOfWeek - currentDate.getDay() + 1; 107 if (firstDayOffset > 1){ 108 firstDayOffset -= 7; 109 } 110 var weeksToDraw = Math.ceil(( (-1*firstDayOffset+1) + currentDate.getDaysInMonth() ) /7); 111 currentDate.addDays(firstDayOffset-1); 112 113 var doHover = function(){ 114 if (s.hoverClass){ 115 $(this).addClass(s.hoverClass); 116 } 117 }; 118 var unHover = function(){ 119 if (s.hoverClass){ 120 $(this).removeClass(s.hoverClass); 121 } 122 }; 123 124 var w = 0; 125 while (w++<weeksToDraw){ 126 var r = jQuery(dc('tr')); 127 for (var i=0; i<7; i++){ 128 var thisMonth = currentDate.getMonth() == month; 129 var d = $(dc('td')) 130 .text(currentDate.getDate() + '') 131 .attr('class', currentDate.asString('yyyy-mm-dd')+' ' + 132 (thisMonth ? 'current-month ' : 'other-month ') + 133 (currentDate.isWeekend() ? 'weekend ' : 'weekday ') + 134 (thisMonth && currentDate.getTime() == today.getTime() ? 'today ' : '') 135 ) 136 .hover(doHover, unHover) 137 .data('date',currentDate.asString('yyyy-mm-dd')) 138 ; 139 if (s.renderCallback){ 140 s.renderCallback(d, currentDate, month, year); 141 } 142 r.append(d); 143 currentDate.addDays(1); 144 } 145 tbody.append(r); 146 } 147 calendarTable.append(tbody); 148 149 return this.each(function(){ 150 $(this).empty().append(calendarTable); 151 }); 152 }, 153/** 154 * Create a datePicker associated with each of the matched elements. 155 * 156 * The matched element will receive a few custom events with the following signatures: 157 * 158 * dateSelected(event, date, $td, status) 159 * 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) 160 * 161 * dpClosed(event, selected) 162 * Triggered when the date picker is closed. event is a reference to the event and selected is an Array containing Date objects. 163 * 164 * dpMonthChanged(event, displayedMonth, displayedYear) 165 * 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. 166 * 167 * dpDisplayed(event, $datePickerDiv) 168 * 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. 169 * 170 * @param Object s (optional) Customize your date pickers. 171 * @option Number month The month to render when the date picker is opened (NOTE that months are zero based). Default is today's month. 172 * @option Number year The year to render when the date picker is opened. Default is today's year. 173 * @option String startDate The first date date can be selected. 174 * @option String endDate The last date that can be selected. 175 * @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) 176 * @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. 177 * @option Boolean showYearNavigation Whether to display buttons which allow the user to navigate through the months a year at a time. Default is true. 178 * @option Boolean closeOnSelect Whether to close the date picker when a date is selected. Default is true. 179 * @option Boolean displayClose Whether to create a "Close" button within the date picker popup. Default is false. 180 * @option Boolean selectMultiple Whether a user should be able to select multiple dates with this date picker. Default is false. 181 * @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. 182 * @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. 183 * @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. 184 * @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. 185 * @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. 186 * @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;
186 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. 187 * @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. 188 * @type jQuery 189 * @name datePicker 190 * @cat plugins/datePicker 191 * @author Kelvin Luck (http://www.kelvinluck.com/) 192 * 193 * @example $('input.date-picker').datePicker(); 194 * @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). 195 * 196 * @example demo/index.html 197 * @desc See the projects homepage for many more complex examples... 198 **/ 199 datePicker : function(s){ 200 if (!$.event._dpCache){ 201 $.event._dpCache = []; 202 } 203 204 // initialise the date picker controller with the relevant settings... 205 s = $.extend({ 206 month : undefined, 207 year : undefined, 208 startDate : undefined, 209 endDate : undefined, 210 inline : false, 211 renderCallback : [], 212 createButton : true, 213 showYearNavigation : true, 214 closeOnSelect : true, 215 displayClose : false, 216 selectMultiple : false, 217 clickInput : false, 218 verticalPosition : $.dpConst.POS_TOP, 219 horizontalPosition : $.dpConst.POS_LEFT, 220 verticalOffset : 0, 221 horizontalOffset : 0, 222 hoverClass : 'dp-hover', 223 format : Date.format 224 }, s); 225 226 return this.each(function(){ 227 var $this = $(this); 228 229 if (this._dpId){ 230 return; 231 // too many issues with closures when trying to recreate; just return and add a destroy option 232 } 233 this._dpId = $.guid++; 234 $.event._dpCache[this._dpId] = new DatePicker(this); 235 $(this).data('_dpId',this._dpId); 236 237 if (s.inline){ 238 s.createButton = false; 239 s.displayClose = false; 240 s.closeOnSelect = false; 241 $this.empty(); 242 } 243 244 var controller = $.event._dpCache[this._dpId]; 245 controller.init(s); 246 247 if (s.createButton){ 248 // create it! 249 controller.button = $('<a href="#" class="dp-choose-date" title="' + $.dpText.TEXT_CHOOSE_DATE + '">' + $.dpText.TEXT_CHOOSE_DATE + '</a>').bind('click',function(){ 250 $this.dpDisplay(this); 251 this.blur(); 252 return false; 253 }); 254 $this.after(controller.button); 255 } 256 257 if ($this.is(':text')){ 258 $this.bind('dateSelected',function(e, selectedDate, $td){ 259 this.value = selectedDate.asString(s.format); 260 }).bind('change',function(){ 261 var d = Date.fromString(this.value,s.format); 262 if (d){ 263 controller.setSelected(d, true, true); 264 } 265 }); 266 if (s.clickInput){ 267 $this.bind('click',function(){ 268 $this.dpDisplay(); 269 }); 270 } 271 var d = Date.fromString(this.value); 272 if (this.value != '' && d){ 273 controller.setSelected(d, true, true); 274 } 275 } 276 $this.addClass('dp-applied'); 277 }); 278 }, 279/** 280 * Disables or enables this date picker 281 * 282 * @param Boolean s Whether to disable (true) or enable (false) this datePicker 283 * @type jQuery 284 * @name dpSetDisabled 285 * @cat plugins/datePicker 286 * @author Kelvin Luck (http://www.kelvinluck.com/) 287 * 288 * @example $('.date-picker').datePicker(); 289 * $('.date-picker').dpSetDisabled(true); 290 * @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. 291 **/ 292 dpSetDisabled : function(s){ 293 return _w.call(this, 'setDisabled', s); 294 }, 295/** 296 * Updates the first selectable date for any date pickers on any matched elements. 297 * 298 * @param String d A string representing the first selectable date (formatted according to Date.format). 299 * @type jQuery 300 * @name dpSetStartDate 301 * @cat plugins/datePicker 302 * @author Kelvin Luck (http://www.kelvinluck.com/) 303 * 304 * @example $('.date-picker').datePicker(); 305 * $('.date-picker').dpSetStartDate('01/01/2000'); 306 * @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. 307 **/ 308 dpSetStartDate : function(d){ 309 return _w.call(this, 'setStartDate', d); 310 }, 311/** 312 * Updates the last selectable date for any date pickers on any matched elements. 313 * 314 * @param String d A string representing the last selectable date (formatted according to Date.format). 315 * @type jQuery 316 * @name dpSetEndDate 317 * @cat plugins/datePicker 318 * @author Kelvin Luck (http://www.kelvinluck.com/) 319 * 320 * @example $('.date-picker').datePicker(); 321 * $('.date-picker').dpSetEndDate('01/01/2010'); 322 * @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. 323 **/ 324 dpSetEndDate : function(d){ 325 return _w.call(this, 'setEndDate', d); 326 }, 327/** 328 * 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. 329 * 330 * @type Array 331 * @name dpGetSelected 332 * @cat plugins/datePicker 333 * @author Kelvin Luck (http://www.kelvinluck.com/) 334 * 335 * @example $('.date-picker').datePicker(); 336 * alert($('.date-picker').dpGetSelected()); 337 * @desc Will alert an empty array (as nothing is selected yet) 338 **/ 339 dpGetSelected : function(){ 340 var c = _getController(this[0]); 341 if (c){ 342 return c.getSelected(); 343 } 344 return null; 345 }, 346/** 347 * 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. 348 * 349 * @param String d A string representing the date you want to select (formatted according to Date.format). 350 * @param Boolean v Whether you want to select (true) or deselect (false) this date. Optional - default = true. 351 * @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. 352 * @type jQuery 353 * @name dpSetSelected 354 * @cat plugins/datePicker 355 * @author Kelvin Luck (http://www.kelvinluck.com/) 356 * 357 * @example $('.date-picker').datePicker(); 358 * $('.date-picker').dpSetSelected('01/01/2010'); 359 * @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. 360 **/ 361 dpSetSelected : function(d, v, m){ 362 if (v == undefined) v=true; 363 if (m == undefined) m=true; 364 return _w.call(this, 'setSelected', typeof d=='string' ? Date.fromString(d) : d, v, m); 365 }, 366/** 367 * 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. 368 * 369 * @param Number m The month you want the date picker to display. Optional - defaults to the currently displayed month. 370 * @param Number y The year you want the date picker to display. Optional - defaults to the currently displayed year. 371 * @type jQuery 372 * @name dpSetDisplayedMonth 373 * @cat plugins/datePicker 374 * @author Kelvin Luck (http://www.kelvinluck.com/) 375 * 376 * @example $('.date-picker').datePicker(); 377 * $('.date-picker').dpSetDisplayedMonth(10, 2008); 378 * @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. 379 **/ 380 dpSetDisplayedMonth : function(m, y){ 381 return _w.call(this, 'setDisplayedMonth', Number(m), Number(y)); 382 }, 383 dpDisplayNewMonth : function(m, y){ 384 return _w.call(this, '_displayNewMonth',this, Number(m), Number(y)); 385 }, 386/** 387 * 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. 388 * 389 * @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. 390 * @type jQuery 391 * @name dpDisplay 392 * @cat plugins/datePicker 393 * @author Kelvin Luck (http://www.kelvinluck.com/) 394 * 395 * @example $('#date-picker').datePicker(); 396 * $('#date-picker').dpDisplay(); 397 * @desc Creates a date picker associated with the element with an id of date-picker and then causes it to pop up. 398 **/ 399 dpDisplay : function(e){
400 return _w.call(this, 'display', e); 401 }, 402/** 403 * Sets a function or array of functions that is called when each TD of the date picker popup is rendered to the page 404 * 405 * @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. 406 * @type jQuery 407 * @name dpSetRenderCallback 408 * @cat plugins/datePicker 409 * @author Kelvin Luck (http://www.kelvinluck.com/) 410 * 411 * @example $('#date-picker').datePicker(); 412 * $('#date-picker').dpSetRenderCallback(function($td, thisDate, month, year) 413 * { 414 * // do stuff as each td is rendered dependant on the date in the td and the displayed month and year 415 * }); 416 * @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. 417 **/ 418 dpSetRenderCallback : function(a){ 419 return _w.call(this, 'setRenderCallback', a); 420 }, 421/** 422 * Sets the position that the datePicker will pop up (relative to it's associated element) 423 * 424 * @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 425 * @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 426 * @type jQuery 427 * @name dpSetPosition 428 * @cat plugins/datePicker 429 * @author Kelvin Luck (http://www.kelvinluck.com/) 430 * 431 * @example $('#date-picker').datePicker(); 432 * $('#date-picker').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT); 433 * @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. 434 **/ 435 dpSetPosition : function(v, h){ 436 return _w.call(this, 'setPosition', v, h); 437 }, 438/** 439 * 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) 440 * 441 * @param Number v The vertical offset of the created date picker. 442 * @param Number h The horizontal offset of the created date picker. 443 * @type jQuery 444 * @name dpSetOffset 445 * @cat plugins/datePicker 446 * @author Kelvin Luck (http://www.kelvinluck.com/) 447 * 448 * @example $('#date-picker').datePicker(); 449 * $('#date-picker').dpSetOffset(-20, 200); 450 * @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. 451 **/ 452 dpSetOffset : function(v, h){ 453 return _w.call(this, 'setOffset', v, h); 454 }, 455/** 456 * Get date format 457 * 458 * @type jQuery 459 * @name dpGetFormat 460 * @cat plugins/datePicker 461 * @author M1ke (http://twitter.com/m1ke) 462 * 463 * @example $('#date-picker').datePicker(); 464 * var format=$('#date-picker').dpGetFormat(); // returns e.g. 'dd/mm/yyyy' 465 * @desc Returns the format set on creation 466 **/ 467 dpGetFormat : function(){ 468 var c = _getController(this[0]); 469 if (c){ 470 return c.getFormat(); 471 } 472 }, 473 474 dpSetValue : function(d){ 475 var c = _getController(this[0]); 476 if (c){ 477 var format=c.getFormat(); 478 this[0].value=d.asString(format); 479 } 480 return this; 481 }, 482/** 483 * Closes the open date picker associated with this element. 484 * 485 * @type jQuery 486 * @name dpClose 487 * @cat plugins/datePicker 488 * @author Kelvin Luck (http://www.kelvinluck.com/) 489 * 490 * @example $('.date-pick') 491 * .datePicker() 492 * .bind( 493 * 'focus', 494 * function() 495 * { 496 * $(this).dpDisplay(); 497 * } 498 * ).bind( 499 * 'blur', 500 * function() 501 * { 502 * $(this).dpClose(); 503 * } 504 * ); 505 * @desc Creates a date picker and makes it appear when the relevant element is focused and disappear when it is blurred. 506 **/ 507 dpClose : function(){ 508 return _w.call(this, '_closeCalendar', false, this[0]); 509 }, 510 // private function called on unload to clean up any expandos etc and prevent memory links... 511 _dpDestroy : function(){ 512 // TODO - implement this? 513 } 514 }); 515 516 // private internal function to cut down on the amount of code needed where we forward 517 // dp* methods on the jQuery object on to the relevant DatePicker controllers... 518 var _w = function(f, a1, a2, a3){ 519 return this.each(function(){ 520 var c = _getController(this); 521 if (c){ 522 c[f](a1, a2, a3); 523 } 524 }); 525 }; 526 527 function DatePicker(ele){ 528 this.ele = ele; 529 530 // initial values... 531 this.displayedMonth = null; 532 this.displayedYear = null; 533 this.startDate = null; 534 this.endDate = null; 535 this.showYearNavigation = null; 536 this.closeOnSelect = null; 537 this.displayClose = null; 538 this.selectMultiple = null; 539 this.verticalPosition = null; 540 this.horizontalPosition = null; 541 this.verticalOffset = null; 542 this.horizontalOffset = null; 543 this.button = null; 544 this.renderCallback = []; 545 this.selectedDates = {}; 546 this.inline = null; 547 this.context = '#dp-popup'; 548 }; 549 $.extend(DatePicker.prototype,{ 550 init : function(s){ 551 // likely to be a way we can streamline this... 552 this.setStartDate(s.startDate); 553 this.setEndDate(s.endDate); 554 this.setDisplayedMonth(Number(s.month), Number(s.year)); 555 this.setRenderCallback(s.renderCallback); 556 this.showYearNavigation = s.showYearNavigation; 557 this.closeOnSelect = s.closeOnSelect; 558 this.displayClose = s.displayClose; 559 this.selectMultiple = s.selectMultiple; 560 this.verticalPosition = s.verticalPosition; 561 this.horizontalPosition = s.horizontalPosition; 562 this.hoverClass = s.hoverClass; 563 this.setOffset(s.verticalOffset, s.horizontalOffset); 564 this.inline = s.inline; 565 this.setFormat(s.format);
566 if (this.inline){ 567 this.context = this.ele; 568 this.display(); 569 } 570 }, 571 getFormat : function(){ 572 return this.format; 573 }, 574 setFormat : function(format){ 575 this.format=format; 576 }, 577 setStartDate : function(d){ 578 if (d){ 579 this.startDate = Date.fromString(d); 580 } 581 if (!this.startDate){ 582 this.startDate = (new Date()).zeroTime(); 583 } 584 this.setDisplayedMonth(this.displayedMonth, this.displayedYear); 585 }, 586 setEndDate : function(d){ 587 if (d){ 588 this.endDate = Date.fromString(d); 589 } 590 if (!this.endDate){ 591 this.endDate = (new Date('12/31/2999')); // using the JS Date.parse function which expects mm/dd/yyyy 592 } 593 if (this.endDate.getTime() < this.startDate.getTime()){ 594 this.endDate = this.startDate; 595 } 596 this.setDisplayedMonth(this.displayedMonth, this.displayedYear); 597 }, 598 setPosition : function(v, h){ 599 this.verticalPosition = v; 600 this.horizontalPosition = h; 601 }, 602 setOffset : function(v, h){ 603 this.verticalOffset = parseInt(v) || 0; 604 this.horizontalOffset = parseInt(h) || 0; 605 }, 606 setDisabled : function(s){ 607 $e = $(this.ele); 608 $e[s ? 'addClass' : 'removeClass']('dp-disabled'); 609 if (this.button){ 610 $but = $(this.button); 611 $but[s ? 'addClass' : 'removeClass']('dp-disabled'); 612 $but.attr('title', s ? '' : $.dpText.TEXT_CHOOSE_DATE); 613 } 614 if ($e.is(':text')){ 615 $e.attr('disabled', s ? 'disabled' : ''); 616 } 617 }, 618 setDisplayedMonth : function(m, y){ 619 if (this.startDate == undefined || this.endDate == undefined){ 620 return; 621 } 622 var s = new Date(this.startDate.getTime()); 623 s.setDate(1); 624 var e = new Date(this.endDate.getTime()); 625 e.setDate(1); 626 627 var t; 628 if ((!m && !y) || (isNaN(m) && isNaN(y))){ 629 // no month or year passed - default to current month 630 t = new Date().zeroTime(); 631 t.setDate(1); 632 } else if (isNaN(m)){ 633 // just year passed in - presume we want the displayedMonth 634 t = new Date(y, this.displayedMonth, 1); 635 } else if (isNaN(y)){ 636 // just month passed in - presume we want the displayedYear 637 t = new Date(this.displayedYear, m, 1); 638 } else { 639 // year and month passed in - that's the date we want! 640 t = new Date(y, m, 1) 641 } 642 643 // check if the desired date is within the range of our defined startDate and endDate 644 if (t.getTime() < s.getTime()){ 645 t = s; 646 } 647 else if (t.getTime() > e.getTime()){ 648 t = e; 649 } 650 this.displayedMonth = t.getMonth(); 651 this.displayedYear = t.getFullYear(); 652 }, 653 setSelected : function(d, v, moveToMonth){ 654 if (this.selectMultiple == false){ 655 this.selectedDates = {}; 656 $('td.selected', this.context).removeClass('selected'); 657 } 658 // if (moveToMonth){ 659 this.setDisplayedMonth(d.getMonth(), d.getFullYear()); 660 // } 661 this.selectedDates[d.toString()] = v; 662 }, 663 isSelected : function(d){ 664 return this.selectedDates[d.toString()]; 665 }, 666 getSelected : function(){ 667 var r = []; 668 for(s in this.selectedDates){ 669 if (this.selectedDates[s] == true){ 670 r.push(Date.parse(s)); 671 } 672 } 673 return r; 674 }, 675 display : function(eleAlignTo){ 676 if ($(this.ele).is('.dp-disabled')){ 677 return; 678 } 679 680 eleAlignTo = eleAlignTo || this.ele; 681 var c = this; 682 var $ele = $(eleAlignTo); 683 var eleOffset = $ele.offset(); 684 685 var $createIn; 686 var attrs; 687 var attrsCalendarHolder; 688 var cssRules; 689 690 if (c.inline){ 691 $createIn = $(this.ele); 692 attrs = { 693 'id' : 'calendar-' + this.ele._dpId, 694 'class' : 'dp-popup dp-popup-inline' 695 }; 696 cssRules = { 697 }; 698 } 699 else { 700 $createIn = $('body'); 701 attrs = { 702 'id' : 'dp-popup', 703 'class' : 'dp-popup' 704 }; 705 cssRules = { 706 'top' : eleOffset.top + c.verticalOffset + $ele.outerHeight(), 707 'left' : eleOffset.left + c.horizontalOffset 708 }; 709 710 var _checkMouse = function(e){ 711 var el = e.target; 712 var cal = $('#dp-popup')[0]; 713 714 while (true){ 715 if (el == cal){ 716 return true; 717 } else if (el == document){
718 c._closeCalendar(); 719 return false; 720 } else { 721 el = $(el).parent()[0]; 722 } 723 } 724 }; 725 this._checkMouse = _checkMouse; 726 727 this._closeCalendar(true); 728 } 729 730 $createIn.append( 731 $('<div></div>').attr(attrs).css(cssRules).append( 732 $('<div class="dp-title dp-month"></div>').append( 733 $('<h2></h2>'), 734 $('<div class="dp-nav dp-nav-prev"></div>').append( 735 $('<a class="dp-nav-prev-month" href="#" title="'+$.dpText.TEXT_PREV_MONTH+'">«</a>').bind('click',function(){ 736 return c._displayNewMonth.call(c, this, -1, 0); 737 }) 738 ), 739 $('<div class="dp-nav dp-nav-next"></div>').append( 740 $('<a class="dp-nav-next-month" href="#" title="'+$.dpText.TEXT_NEXT_MONTH+'">»</a>').bind('click',function(){ 741 return c._displayNewMonth.call(c, this, 1, 0); 742 }) 743 ) 744 ), 745 $('<div class="dp-calendar"></div>')/*, 746 747 $('<div class="dp-title dp-year"></div>').append( 748 $('<h2></h2>'), 749 $('<div class="dp-nav dp-nav-prev"></div>').append( 750 $('<a class="dp-nav-prev-year" href="#" title="'+$.dpText.TEXT_PREV_YEAR+'"><<</a>').bind('click',function(){ 751 return c._displayNewMonth.call(c, this, 0, -1); 752 }) 753 ), 754 $('<div class="dp-nav dp-nav-next"></div>').append( 755 $('<a class="dp-nav-next-year" href="#" title="'+$.dpText.TEXT_NEXT_YEAR+'">>></a>').bind('click',function(){ 756 return c._displayNewMonth.call(c, this, 0, 1); 757 }) 758 ) 759 ) 760 */ 761 ).bgIframe() 762 ); 763 764 var $pop = this.inline ? $('.dp-popup', this.context) : $('#dp-popup'); 765 766 if (this.showYearNavigation == false){ 767 $('.dp-nav-prev-year, .dp-nav-next-year', c.context).css('display', 'none'); 768 } 769 if (this.displayClose){ 770 $pop.append( 771 $('<a href="#" id="dp-close">'+$.dpText.TEXT_CLOSE+'</a>').bind('click',function(){ 772 c._closeCalendar(); 773 return false; 774 }) 775 ); 776 } 777 c._renderCalendar(); 778 779 $(this.ele).trigger('dpDisplayed', $pop); 780 781 if (!c.inline){ 782 if (this.verticalPosition == $.dpConst.POS_BOTTOM){ 783 $pop.css('top', eleOffset.top + $ele.outerHeight() - $pop.outerHeight() + c.verticalOffset); 784 } 785 if (this.horizontalPosition == $.dpConst.POS_RIGHT){ 786 $pop.css('left', eleOffset.left + $ele.outerWidth() - $pop.outerWidth() + c.horizontalOffset); 787 } 788 if (this.horizontalPosition == $.dpConst.POS_CENTER){ 789 $pop.css('left', eleOffset.left + $ele.outerWidth()/2 - $pop.outerWidth()/2 + c.horizontalOffset); 790 } 791 $(document).bind('mousedown', this._checkMouse); 792 } 793 }, 794 setRenderCallback : function(a){ 795 if (a && typeof(a) == 'function'){ 796 a = [a]; 797 } 798 this.renderCallback = this.renderCallback.concat(a); 799 }, 800 cellRender : function ($td, thisDate, month, year){ 801 var c = this.dpController; 802 var d = new Date(thisDate.getTime()); 803 804 // add our click handlers to deal with it when the days are clicked... 805 806 $td.bind('click',function(){ 807 var $this = $(this); 808 if (!$this.is('.disabled')){ 809 c.setSelected(d, !$this.is('.selected') || !c.selectMultiple); 810 var s = c.isSelected(d); 811 $(c.ele).trigger('dateSelected', [d, $td, s]); 812 $(c.ele).trigger('change'); 813 if (c.closeOnSelect){ 814 c._closeCalendar(); 815 } 816 else { 817 $this[s ? 'addClass' : 'removeClass']('selected'); 818 } 819 } 820 }); 821 822 if (c.isSelected(d)){ 823 $td.addClass('selected'); 824 } 825 826 // call any extra renderCallbacks that were passed in 827 for (var i=0; i<c.renderCallback.length; i++){ 828 c.renderCallback[i].apply(this, arguments); 829 } 830 }, 831 // ele is the clicked button - only proceed if it doesn't have the class disabled... 832 // m and y are -1, 0 or 1 depending which direction we want to go in... 833 _displayNewMonth : function(ele, m, y) { 834 if (!$(ele).is('.disabled')){ 835 this.setDisplayedMonth(this.displayedMonth + m, this.displayedYear + y); 836 this._clearCalendar(); 837 this._renderCalendar(); 838 $(this.ele).trigger('dpMonthChanged', [this.displayedMonth, this.displayedYear]); 839 } 840 ele.blur(); 841 return false; 842 }, 843 _renderCalendar : function(){ 844 // set the title... 845 $('.dp-title h2', this.context).html(Date.monthNames[this.displayedMonth] + ' ' + this.displayedYear); 846 //$('.dp-year h2', this.context).html(this.displayedYear); 847 848 // render the calendar... 849 $('.dp-calendar', this.context).renderCalendar({ 850 month : this.displayedMonth, 851 year : this.displayedYear, 852 renderCallback : this.cellRender, 853 dpController : this, 854 hoverClass : this.hoverClass 855 }); 856 857 // update the status of the control buttons and disable dates before startDate or after endDate... 858 // 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? 859 if (this.displayedYear == this.startDate.getFullYear() && this.displayedMonth == this.startDate.getMonth()){ 860 $('.dp-nav-prev-year', this.context).addClass('disabled'); 861 $('.dp-nav-prev-month', this.context).addClass('disabled'); 862 $('.dp-calendar td.other-month', this.context).each(function(){ 863 var $this = $(this); 864 if (Number($this.text()) > 20){ 865 $this.addClass('disabled'); 866 } 867 }); 868 var d = this.startDate.getDate(); 869 $('.dp-calendar td.current-month', this.context).each(function(){ 870 var $this = $(this); 871 if (Number($this.text()) < d){ 872 $this.addClass('disabled'); 873 } 874 }); 875 } 876 else { 877 $('.dp-nav-prev-year', this.context).removeClass('disabled'); 878 $('.dp-nav-prev-month', this.context).removeClass('disabled'); 879 var d = this.startDate.getDate(); 880 if (d > 20){ 881 // check if the startDate is last month as we might need to add some disabled classes... 882 var sd = new Date(this.startDate.getTime()); 883 sd.addMonths(1); 884 if (this.displayedYear == sd.getFullYear() && this.displayedMonth == sd.getMonth()){ 885 $('dp-calendar td.other-month', this.context).each(function(){ 886 var $this = $(this); 887 if (Number($this.text()) < d){ 888 $this.addClass('disabled'); 889 } 890 });
891 } 892 } 893 } 894 if (this.displayedYear == this.endDate.getFullYear() && this.displayedMonth == this.endDate.getMonth()){ 895 $('.dp-nav-next-year', this.context).addClass('disabled'); 896 $('.dp-nav-next-month', this.context).addClass('disabled'); 897 $('.dp-calendar td.other-month', this.context).each(function(){ 898 var $this = $(this); 899 if (Number($this.text()) < 14){ 900 $this.addClass('disabled'); 901 } 902 }); 903 var d = this.endDate.getDate(); 904 $('.dp-calendar td.current-month', this.context).each(function(){ 905 var $this = $(this); 906 if (Number($this.text()) > d){ 907 $this.addClass('disabled'); 908 } 909 }); 910 } 911 else { 912 $('.dp-nav-next-year', this.context).removeClass('disabled'); 913 $('.dp-nav-next-month', this.context).removeClass('disabled'); 914 var d = this.endDate.getDate(); 915 if (d < 13){ 916 // check if the endDate is next month as we might need to add some disabled classes... 917 var ed = new Date(this.endDate.getTime()); 918 ed.addMonths(-1); 919 if (this.displayedYear == ed.getFullYear() && this.displayedMonth == ed.getMonth()){ 920 $('.dp-calendar td.other-month', this.context).each(function(){ 921 var $this = $(this); 922 if (Number($this.text()) > d){ 923 $this.addClass('disabled'); 924 } 925 }); 926 } 927 } 928 } 929 }, 930 _closeCalendar : function(programatic, ele){ 931 if (!ele || ele == this.ele){ 932 $(document).unbind('mousedown', this._checkMouse); 933 this._clearCalendar(); 934 $('#dp-popup a').unbind(); 935 $('#dp-popup').empty().remove(); 936 if (!programatic){ 937 $(this.ele).trigger('dpClosed', [this.getSelected()]); 938 } 939 } 940 }, 941 // empties the current dp-calendar div and makes sure that all events are unbound 942 // and expandos removed to avoid memory leaks... 943 _clearCalendar : function(){ 944 // TODO. 945 $('.dp-calendar td', this.context).unbind(); 946 $('.dp-calendar', this.context).empty(); 947 } 948 }); 949 950 // static constants 951 $.dpConst = { 952 SHOW_HEADER_NONE : 0, 953 SHOW_HEADER_SHORT : 1, 954 SHOW_HEADER_LONG : 2, 955 POS_TOP : 0, 956 POS_BOTTOM : 1, 957 POS_LEFT : 0, 958 POS_RIGHT : 1,
959 POS_CENTER : 2 960 }; 961 // localisable text 962 $.dpText = { 963 TEXT_PREV_YEAR : 'Previous year', 964 TEXT_PREV_MONTH : 'Previous month', 965 TEXT_NEXT_YEAR : 'Next year', 966 TEXT_NEXT_MONTH : 'Next month', 967 LINK_NEXT_MONTH : '»', 968 LINK_PREV_MONTH : '«', 969 TEXT_CLOSE : 'Close', 970 TEXT_CHOOSE_DATE : 'Choose date' 971 }; 972 // version 973 $.dpVersion = '$Id: jquery.datePicker.js 3739 2007-10-25 13:55:30Z kelvin.luck $'; 974 975 function _getController(ele){ 976 if (ele._dpId){ 977 return $.event._dpCache[ele._dpId]; 978 } 979 return false; 980 }; 981 982 // make it so that no error is thrown if bgIframe plugin isn't included (allows you to use conditional 983 // comments to only include bgIframe where it is needed in IE without breaking this plugin). 984 if ($.fn.bgIframe == undefined){ 985 $.fn.bgIframe = function(){return this; }; 986 }; 987 988 // clean-up 989 $(window).bind('unload', function(){ 990 var els = $.event._dpCache || []; 991 for (var i in els){ 992 $(els[i].ele)._dpDestroy(); 993 } 994 }); 995})(jQuery); 996$.fn.datePickerInit=function(startNow,userOptions,addPlaceholder){ 997 var options={clickInput:true}; 998 if (!startNow){ 999 options.startDate='01/01/1970'; 1000 } 1001 if (userOptions){ 1002 $.extend(options,userOptions); 1003 } 1004 if (!addPlaceholder){ 1005 addPlaceholder='Click for calendar'; 1006 } 1007 return this.datePicker(options).attr('autocomplete','off').each(function(){ 1008 var placeholder=$(this).attr('placeholder'); 1009 $(this).attr('placeholder',(placeholder ? placeholder+(placeholder.length>0 ? ' - ' : '') : '')+addPlaceholder); 1010 }); 1011};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.