昨天用的日历插件在绑定数据的时候出现了问题，所以今天换了这个glDatePicker-2.0 日历插件
这是我修改后的样式
默认样式是这样的。
我的代码
index.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>glDatePicker</title> 6 <link href="styles/glDatePicker.default.css" rel="stylesheet" type="text/css"> 7 </head> 8 9 <body> 10 <input type="text" id="mydate" style=" visibility: visible;height: 20px;300px;" /> 11 <script src="jquery-1.10.2.min.js"></script> 12 <script src="glDatePicker.js"></script> 13 <script> 14 $('input').glDatePicker({ 15 showAlways: true, 16 selectedDate: new Date(), 17 specialDates: [ 18 { 19 date: new Date(2016,05,25), 20 data: { message: 'Happy New Year!' }, 21 repeatYear: true 22 }, 23 { 24 date: new Date(2016,06,01), 25 data: { message: 'Happy New Year!' }, 26 repeatYear: true 27 } 28 ] 29 }); 30 </script> 31 </body> 32 </html>
glDatePicker.default.css
1 .gldp-default{position:absolute;font-family:'helvetica'}.gldp-default .core{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;position:relative;float:left;padding:0;margin:0;font-size:14px;text-align:center;cursor:pointer;color:#777;background:#e1e1e1;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dadada',GradientType=0)}.gldp-default .dow{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;position:relative;float:left;padding:0;margin:0;font-size:14px;text-align:center;cursor:pointer;color:#777;background:#e1e1e1;border:0;border-radius:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dadada',GradientType=0)}.gldp-default .monyear{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;position:relative;float:left;padding:0;margin:0;font-size:14px;text-align:center;cursor:pointer;color:#777;background:#e1e1e1;border:0;border-radius:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dadada',GradientType=0)}.gldp-default .border{border:1px solid #e1e1e1}.gldp-default .monyear,.gldp-default .monyear select{font-size:16px!important;font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,255,0.75)}.gldp-default .monyear span{margin:0 5px 0 5px}.gldp-default .prev-arrow,.gldp-default .next-arrow{color:#222;text-shadow:1px 1px 0 rgba(255,255,255,0.75)}.gldp-default .prev-arrow:active,.gldp-default .next-arrow:active{color:#f00}.gldp-default .prev-arrow-off,.gldp-default .next-arrow-off{color:#222;opacity:.15}.gldp-default .dow{color:#363636;font-weight:bold;cursor:wait!important;background:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#880000',GradientType=0)}.gldp-default .mon,.gldp-default .tue,.gldp-default .wed,.gldp-default .thu,.gldp-default .fri{font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,255,0.75)}.gldp-default .sat,.gldp-default .sun{color:#3858a8;font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,255,0.75)}.gldp-default .outday{color:#d9d9d9!important;background:#f2f2f2}.gldp-default .mon:hover,.gldp-default .tue:hover,.gldp-default .wed:hover,.gldp-default .thu:hover,.gldp-default .fri:hover,.gldp-default .sat:hover,.gldp-default .sun:hover{background:#fcfff4;background:-moz-linear-gradient(top,#fcfff4 0,#e9e9ce 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fcfff4),color-stop(100%,#e9e9ce));background:-webkit-linear-gradient(top,#fcfff4 0,#e9e9ce 100%);background:-o-linear-gradient(top,#fcfff4 0,#e9e9ce 100%);background:-ms-linear-gradient(top,#fcfff4 0,#e9e9ce 100%);background:linear-gradient(to bottom,#fcfff4 0,#e9e9ce 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4',endColorstr='#e9e9ce',GradientType=0)}.gldp-default .noday{color:#444;font-weight:normal;cursor:wait!important;background:#aaa;background:-moz-linear-gradient(top,#aaa 0,#8a8a8a 98%,#aaa 99%,#8a8a8a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#aaa),color-stop(98%,#8a8a8a),color-stop(99%,#aaa),color-stop(100%,#8a8a8a));background:-webkit-linear-gradient(top,#aaa 0,#8a8a8a 98%,#aaa 99%,#8a8a8a 100%);background:-o-linear-gradient(top,#aaa 0,#8a8a8a 98%,#aaa 99%,#8a8a8a 100%);background:-ms-linear-gradient(top,#aaa 0,#8a8a8a 98%,#aaa 99%,#8a8a8a 100%);background:linear-gradient(to bottom,#aaa 0,#8a8a8a 98%,#aaa 99%,#8a8a8a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa',endColorstr='#8a8a8a',GradientType=0)}.gldp-default .selected{color:#fff;font-weight:bold;border-color:#3d9fe1;background:#3d9fe1;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8bf88',endColorstr='#ef753f',GradientType=0)}.gldp-default .today{color:#fff;font-weight:bold;border-color:#3d9fe1;background:#3d9fe1;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#88bfe8',endColorstr='#3775ef',GradientType=0)}.gldp-default .special{color:#3d9fe1;font-weight:bold;border-color:#dbdbdb;background:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#88e888',endColorstr='#37ef37',GradientType=0)}
glDatePicker.js
1 /*! 2 * glDatePicker v2.0 3 * http://glad.github.com/glDatePicker/ 4 * 5 * Copyright (c) 2013 Gautam Lad. All rights reserved. 6 * Released under the MIT license. 7 * 8 * Date: Tue Jan 1 2013 9 */ 10 ;(function() { 11 $.fn.glDatePicker = function(options) { 12 var pluginName = 'glDatePicker'; 13 14 // Find the plugin attached to the element 15 var instance = this.data(pluginName); 16 17 // If the instance wasn't found, create it... 18 if(!instance) { 19 // Return the element being bound to 20 return this.each(function() { 21 return $(this).data(pluginName, new glDatePicker(this, options)); 22 }); 23 } 24 25 // ...otherwise if the user passes true to the plugin (on the second call), 26 // then return the instance of the plugin itself 27 return (options === true) ? instance : this; 28 }; 29 30 // Default options 31 $.fn.glDatePicker.defaults = 32 { 33 // Style to use for the calendar. This name must match the name used in 34 // the stylesheet, using the class naming convention "gldp-cssName". 35 cssName: 'default', 36 37 // The z-index for the calendar control. 38 zIndex: 1000, 39 40 // Thickness of border (in pixels) 41 borderSize: 1, 42 43 // The number of pixels to offset the calendar's position on the page. 44 calendarOffset: { x: 0, y: 1 }, 45 46 // Set to true if you want the calendar to be visible at all times. 47 // NOTE: If your target element is hidden, the calendar will be hidden as well. 48 showAlways: false, 49 50 // Hide the calendar when a date is selected (only if showAlways is set to false). 51 hideOnClick: true, 52 53 // Allow selection of months by clicking on the month in the title. 54 allowMonthSelect: true, 55 56 // Allow selection of years by clicking on the year in the title. 57 allowYearSelect: true, 58 59 // The date that will be treated as 'today'. 60 todayDate: new Date(), 61 62 // The date that will appear selected when the calendar renders. 63 // By default it will be set to todayDate. 64 selectedDate: null, 65 66 // Arrows used for the Previous and Next month buttons on the title. 67 // Set these to blank to hide the arrows completely. 68 prevArrow: 'u25c4', 69 nextArrow: 'u25ba', 70 71 // A collection of dates that can be selectable by the user. 72 // The dates can be a one-time selection or made repeatable by setting 73 // the repeatYear or repeatMonth flag to true. 74 // By default repeatYear and repeatMonth are false. 75 // 76 // This example creates 4-individual dates that can be selected; 77 // The first date will repeat every year, the second date will repeat every 78 // month and year, the third date will repeat every month and the fourth date 79 // will only be selectable one-time and not repeat: 80 // 81 // selectableDates: [ 82 // { date: new Date(0, 8, 5), repeatYear: true }, 83 // { date: new Date(0, 0, 14), repeatMonth: true, repeatYear: true }, 84 // { date: new Date(2013, 0, 24), repeatMonth: true }, 85 // { date: new Date(2013, 11, 25) }, 86 // ] 87 selectableDates: null, 88 89 // A collection of date ranges that are selectable by the user. 90 // The ranges can be made to repeat by setting repeatYear to true 91 // (repeatMonth is not supported). 92 // 93 // This example will create 3-sets of selectable date ranges with 94 // specific from and to ranges. The 4th and 5th ranges don't specify 95 // the "to" date in which case the "to" date will be the maximum days for 96 // the month specified in "from". The 4th and 5th ranges also repeat every year: 97 // 98 // selectableDateRange: [ 99 // { from: new Date(2013, 1, 1), to: newDate (2013, 2, 1) }, 100 // { from: new Date(2013, 4, 1), to: newDate (2013, 8, 1) }, 101 // { from: new Date(2013, 7, 10), to: newDate (2013, 9, 10) }, 102 // { from: new Date(0, 8, 10), repeatYear: true } 103 // { from: new Date(0, 9, 1), repeatYear: true } 104 // ] 105 selectableDateRange: null, 106 107 // Mark certain dates as special dates. Similar to selectableDates, this 108 // property supports both repeatYear and repeatMonth flags. 109 // Each special date can be styled using custom style names and can have 110 // data attached to it that will be returned in the onClick callback. 111 // The data field can be any custom (JSON style) object. 112 // 113 // This example creates two (repeatable by year) dates with special data in them. 114 // The first date also assigns a special class (which you will have to define). 115 // specialDates: [ 116 // { 117 // date: new Date(0, 8, 5), 118 // data: { message: 'Happy Birthday!' }, 119 // repeatYear: true, 120 // cssClass: 'special-bday' 121 // }, 122 // { 123 // date: new Date(2013, 0, 8), 124 // data: { message: 'Meeting every day 8 of the month' }, 125 // repeatMonth: true 126 // } 127 // ] 128 specialDates: null, 129 130 // List of months that can be selectable, including when the user clicks 131 // on the title to select from the dropdown. 132 // This example only makes two months visible; September and December: 133 // selectableMonths: [8, 11] 134 selectableMonths : null, 135 136 // List of selectable years. If not provided, will default to 5-years 137 // back and forward. 138 // This example only allows selection of dates that have year 2012, 2013, 2015 139 // selectableYears: [2012, 2013, 2015] 140 selectableYears: null, 141 142 // List of selectable days of the week. 0 is Sunday, 1 is Monday, and so on. 143 // This example allows only Sunday, Tuesday, Thursday: 144 // selectableDOW: [0, 2, 4] 145 selectableDOW : null, 146 147 // Names of the month that will be shown in the title. 148 // Will default to long-form names: 149 // January, February, March, April, May, June, July, 150 // August, September, October, November, December 151 monthNames: null, 152 153 // Names of the days of the Week that will be shown below the title. 154 // Will default to short-form names: 155 // Sun, Mon, Tue, Wed, Thu, Fri, Sat 156 dowNames: null, 157 158 // The day of the week to start the calendar on. 0 is Sunday, 1 is Monday and so on. 159 dowOffset: 0, 160 161 // Callback that will trigger when the user clicks a selectable date. 162 // Parameters that are passed to the callback: 163 // el : The input element the date picker is bound to 164 // cell : The cell on the calendar that triggered this event 165 // date : The date associated with the cell 166 // data : Special data associated with the cell (if available, otherwise, null) 167 onClick: (function(el, cell, date, data) { 168 el.val(date.toLocaleDateString()); 169 }), 170 171 // Callback that will trigger when the user hovers over a selectable date. 172 // This callback receives the same set of parameters as onClick. 173 onHover: function(el, cell, date, data) {}, 174 175 // Callback that will trigger when the calendar needs to show. 176 // You can use this callback to animate the opening of the calendar. 177 onShow: function(calendar) { calendar.show(); }, 178 179 // Callback that will trigger when the calendar needs to hide. 180 // You can use this callback to animate the hiding of the calendar. 181 onHide: function(calendar) { calendar.hide(); }, 182 183 // First date of the month. 184 firstDate: null 185 }; 186 187 // Our plugin object 188 var glDatePicker = (function() { 189 // Main entry point. Initialize the plugin 190 function glDatePicker(element, userOptions) { 191 // Grab handle to this 192 var self = this; 193 194 // Save bound element to el 195 self.el = $(element); 196 var el = self.el; 197 198 // Merge user options into default options 199 self.options = $.extend(true, {}, $.fn.glDatePicker.defaults, userOptions); 200 var options = self.options; 201 202 // Find the calendar element if the user provided one 203 self.calendar = $($.find('[gldp-el=' + el.attr('gldp-id') + ' ]')); 204 205 // Default first date to selected 206 options.selectedDate = options.selectedDate || options.todayDate; 207 options.firstDate = (new Date((options.firstDate || options.selectedDate)))._first(); 208 209 if(!(el.attr('gldp-id') || '').length) { 210 el.attr('gldp-id', 'gldp-' + Math.round(Math.random() * 1e10)) 211 } 212 213 // Show the plugin on focus 214 el 215 .addClass('gldp-el') 216 .bind('click', function(e) { self.show(e); }) 217 .bind('focus', function(e) { self.show(e); }); 218 219 // If the user is defining the container and it exists, hide it on initial creation. 220 // The update function will handle showing if it's showAlways = true 221 if(self.calendar.length && !options.showAlways) { 222 self.calendar.hide(); 223 } 224 225 // Hide the plugin on mouse up outside of the plugin 226 $(document).bind('mouseup', function(e) { 227 var target = e.target; 228 var calendar = self.calendar; 229 230 if(!el.is(target) && !calendar.is(target) && calendar.has(target).length === 0 && calendar.is(':visible')) { 231 self.hide(); 232 } 233 }); 234 235 // Render calendar 236 self.render(); 237 }; 238 239 // Public methods 240 glDatePicker.prototype = 241 { 242 show: function() { 243 // Hide others and show this calendar 244 $.each($('.gldp-el').not(this.el), function(i, o) { 245 if(o.length) { o.options.onHide(o.calendar) ; } 246 }); 247 248 // Show this calendar 249 this.options.onShow(this.calendar); 250 }, 251 252 hide: function() { 253 if(this.options && !this.options.showAlways) { 254 this.options.onHide(this.calendar); 255 } 256 }, 257 258 // Render the calendar 259 render: function(renderCalback) { 260 var self = this; 261 var el = self.el; 262 var options = self.options; 263 var calendar = self.calendar; 264 265 // Build a core class (with border) that every element would have 266 var coreClass = ' core border '; 267 var cssName = 'gldp-' + options.cssName; 268 269 // Get today 270 var todayVal = options.todayDate._val(); 271 var todayTime = todayVal.time; 272 273 // Constants 274 var maxRow = 6; 275 var maxCol = 7; 276 var borderSize = options.borderSize + 'px'; 277 278 // Helper function to build selectable list 279 var getSelectableList = function(min, max, userList) { 280 // Build a default list using min/max 281 var resultList = []; 282 for(var i = min; i <= max; i++) { resultList.push(i); } 283 284 // If user provided a collection, sanitize list by ensuring it's within range and unique 285 if(userList) { 286 var newList = []; 287 $.each(userList, function(i, v) { 288 if(v >= min && v <= max && newList._indexOf(v) < 0) { 289 newList.push(v); 290 } 291 }); 292 293 resultList = newList.length ? newList : resultList; 294 }; 295 296 // Sort the values before returning it 297 resultList.sort(); 298 299 return resultList; 300 }; 301 302 // Selectable (constants) 303 var selectableMonths = getSelectableList(0, 11, options.selectableMonths); 304 var selectableYears = getSelectableList(todayVal.year - 5, todayVal.year + 5, options.selectableYears); 305 var selectableDOW = getSelectableList(0, 6, options.selectableDOW); 306 var dowNames = options.dowNames || [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; 307 var monthNames = options.monthNames || [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; 308 309 // Create cell width based on el size 310 var containerWidth = el.outerWidth(); 311 var containerHeight = containerWidth; 312 313 // Create cell size based on container size 314 var getCellSize = function(_size, _count) { 315 return (_size / _count) + ((options.borderSize / _count) * (_count - 1)); 316 }; 317 var cellWidth = getCellSize(containerWidth, maxCol); 318 var cellHeight = getCellSize(containerHeight, maxRow + 2); 319 320 // If calendar doesn't exist, create it and re-assign it to self 321 if(!calendar.length) { 322 self.calendar = calendar = $('<div/>') 323 .attr('gldp-el', el.attr('gldp-id')) 324 .data('is', true) 325 .css( 326 { 327 display: (options.showAlways ? undefined : 'none'), 328 zIndex: options.zIndex, 329 (cellWidth * maxCol) + 'px' 330 }); 331 332 $('body').append(calendar); 333 } 334 else { 335 if(!eval(calendar.data('is'))) { 336 containerWidth = calendar.outerWidth(); 337 containerHeight = calendar.outerHeight(); 338 339 cellWidth = getCellSize(containerWidth, maxCol); 340 cellHeight = getCellSize(containerHeight, maxRow + 2); 341 } 342 } 343 344 // Hide calendar if the target element isn't visible 345 if(!el.is(':visible')) { calendar.hide(); } 346 347 // Add core classes and remove calendar's children 348 calendar 349 .removeClass() 350 .addClass(cssName) 351 .children().remove(); 352 353 // Bind to resize event to position calendar 354 var onResize = function() { 355 var elPos = el.offset(); 356 calendar.css( 357 { 358 top: (elPos.top + el.outerHeight() + options.calendarOffset.y) + 'px', 359 left: (elPos.left + options.calendarOffset.x) + 'px' 360 }); 361 }; 362 $(window).resize(onResize); 363 onResize(); 364 365 // Create variables for cells 366 var cellCSS = 367 { 368 cellWidth + 'px', 369 height: cellHeight + 'px', 370 lineHeight: cellHeight + 'px' 371 }; 372 373 // Helper function to setDate 374 var setFirstDate = function(_date) { 375 if(_date) { 376 // Get first date 377 options.firstDate = _date; 378 379 // Update the calendar 380 self.render(); 381 } 382 }; 383 384 var getFirstDate = function(_offset) { 385 // Create start date as the first date of the month 386 var _date = new Date(options.firstDate); 387 388 // Default to no offset 389 _offset = _offset || 0; 390 391 // Find out which months are selectable 392 while(true) { 393 // Adjust date for month offset 394 _date.setMonth(_date.getMonth() + _offset); 395 _date.setDate(Math.min(1, _date._max())); 396 397 // If not an offset, break out of the loop 398 if(_offset == 0) { break; } 399 400 // Get _date's value 401 var dateVal = _date._val(); 402 403 // Get local vars 404 var dateMonth = dateVal.month; 405 var dateYear = dateVal.year; 406 407 // Find the month first 408 if(selectableMonths._indexOf(dateMonth) != -1) { 409 // If year is in our collection, break... 410 if(selectableYears._indexOf(dateYear) != -1) { 411 break; 412 } 413 else { 414 // ...otherwise, if it's out of bounds, exit loop 415 if(dateYear < selectableYears[0] || dateYear > selectableYears[selectableYears.length - 1]) { 416 return null; 417 } 418 } 419 } 420 } 421 422 return _date; 423 }; 424 425 // Get the previous, next first dates 426 var prevFirstDate = getFirstDate(-1); 427 var nextFirstDate = getFirstDate(1); 428 429 // Get the first date for the current month being rendered 430 var firstDate = (options.firstDate = getFirstDate()); 431 var firstDateVal = firstDate._val(); 432 var firstDateMonth = firstDateVal.month; 433 var firstDateYear = firstDateVal.year; 434 435 // Get the start date in the calendar 436 var startDate = new Date(firstDate); 437 438 // Sanitize days of the week offset 439 var dowOffset = Math.abs(Math.min(6, Math.max(0, options.dowOffset))); 440 441 // Offset weekdays 442 var startOffset = startDate.getDay() - dowOffset; 443 startOffset = startOffset < 1 ? -7 - startOffset : -startOffset; 444 dowNames = (dowNames.concat(dowNames)) 445 .slice(dowOffset, dowOffset + 7); 446 447 // Offset the start date 448 startDate._add(startOffset); 449 450 // Gather flags for prev/next arrows 451 var showPrev = (prevFirstDate); 452 var showNext = (nextFirstDate); 453 454 // Create the arrows and title 455 var monyearClass = coreClass + 'monyear '; 456 457 var prevCell = $('<div/>') 458 .addClass(monyearClass) 459 .css( 460 $.extend({}, cellCSS, 461 { 462 borderWidth: borderSize + ' 0 0 ' + borderSize 463 }) 464 ) 465 .append( 466 $('<a/>') 467 .addClass('prev-arrow' + (showPrev ? '' : '-off')) 468 .html(options.prevArrow) 469 ) 470 .mousedown(function() { return false; }) 471 .click(function(e) { 472 if(options.prevArrow != '' && showPrev) { 473 e.stopPropagation(); 474 setFirstDate(prevFirstDate); 475 } 476 }); 477 478 var titleCellCount = maxCol - 2; 479 var titleWidth = (cellWidth * titleCellCount) - (titleCellCount * options.borderSize) + (options.borderSize); 480 var titleCell = $('<div/>') 481 .addClass(monyearClass + 'title') 482 .css( 483 $.extend({}, cellCSS, 484 { 485 titleWidth + 'px', 486 borderTopWidth: borderSize, 487 marginLeft: '-' + (borderSize) 488 }) 489 ); 490 491 var nextCell = $('<div/>') 492 .addClass(monyearClass) 493 .css( 494 $.extend({}, cellCSS, 495 { 496 marginLeft: '-' + (borderSize), 497 borderWidth: borderSize + ' ' + borderSize + ' 0 0' 498 }) 499 ) 500 .append( 501 $('<a/>') 502 .addClass('next-arrow' + (showNext ? '' : '-off')) 503 .html(options.nextArrow) 504 ) 505 .mousedown(function() { return false; }) 506 .click(function(e) { 507 if(options.nextArrow != '' && showNext) { 508 e.stopPropagation(); 509 setFirstDate(nextFirstDate); 510 } 511 }); 512 513 // Add cells for prev/title/next 514 calendar 515 .append(prevCell) 516 .append(titleCell) 517 .append(nextCell); 518 519 // Add all the cells to the calendar 520 for(var row = 0, cellIndex = 0; row < maxRow + 1; row++) { 521 for(var col = 0; col < maxCol; col++, cellIndex++) { 522 var cellDate = new Date(startDate); 523 var cellClass = 'day'; 524 var cellZIndex = options.zIndex + (cellIndex); 525 var cell = $('<div/>') 526 527 if(!row) { 528 cellClass = 'dow'; 529 cell.html(dowNames[col]); 530 cellDate = null; 531 } 532 else { 533 // Get the new date for this cell 534 cellDate._add(col + ((row - 1) * maxCol)); 535 536 // Get value for this date 537 var cellDateVal = cellDate._val(); 538 var cellDateTime = cellDateVal.time; 539 540 // Variable to hold special data 541 var specialData = null; 542 543 // Determine if this date is selectable 544 var isSelectable = true; 545 546 // Helper function to get repeat friendly date against current date 547 var getRepeatDate = function(v, date) { 548 // If repeating, set the date's year and month accordingly 549 if(v.repeatYear === true) { date.setYear(cellDateVal.year); } 550 if(v.repeatMonth === true) { date.setMonth(cellDateVal.month); } 551 552 return date._val(); 553 }; 554 555 // Assign date for the cell 556 cell.html(cellDateVal.date); 557 558 // If we have selectable date ranges 559 if(options.selectableDateRange) { 560 isSelectable = false; 561 $.each(options.selectableDateRange, function(i, v) { 562 var dateFrom = v.from; 563 var dateTo = (v.to || null); 564 565 // If to is not specified, default to max days in the from month 566 dateTo = dateTo || new Date(v.from.getFullYear(), v.from.getMonth(), v.from._max()); 567 568 // If repeating year, set the from and two to the current date's year 569 dateFrom = getRepeatDate(v, dateFrom); 570 dateTo = getRepeatDate(v, dateTo); 571 572 // Test to see if this date is selectable 573 if(cellDateTime >= dateFrom.time && cellDateTime <= dateTo.time) { 574 isSelectable = true; 575 return true; 576 } 577 }); 578 } 579 580 // Handle date ranges and collections 581 if(options.selectableDates) { 582 if((options.selectableDateRange && !isSelectable) || (isSelectable && !options.selectableDateRange)) { 583 isSelectable = false; 584 } 585 $.each(options.selectableDates, function(i, v) { 586 var vDate = getRepeatDate(v, v.date); 587 588 if(vDate.time == cellDateTime) { 589 return (isSelectable = true); 590 } 591 }); 592 } 593 594 // If not active or if not within selectableMonths, set to noday otherwise evaluate accordingly 595 if(!isSelectable || 596 selectableYears._indexOf(cellDateVal.year) < 0 || 597 selectableMonths._indexOf(cellDateVal.month) < 0 || 598 selectableDOW._indexOf(cellDateVal.day) < 0) { 599 cellClass = 'noday'; 600 } 601 else { 602 // Handle active dates and weekends 603 cellClass = ([ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ])[cellDateVal.day]; 604 605 // Handle today or selected dates 606 if(firstDateMonth != cellDateVal.month) { cellClass += ' outday'; } 607 if(todayTime == cellDateTime) { cellClass = 'today'; cellZIndex += 50; } 608 if(options.selectedDate._time() == cellDateTime) { cellClass = 'selected'; cellZIndex += 51; } 609 610 // Handle special dates 611 if(options.specialDates) { 612 $.each(options.specialDates, function(i, v) { 613 var vDate = getRepeatDate(v, v.date); 614 615 if(vDate.time == cellDateTime) { 616 cellClass = (v.cssClass || 'special'); 617 cellZIndex += 52; 618 specialData = v.data; 619 } 620 }); 621 } 622 623 cell 624 .mousedown(function() { return false; }) 625 .hover(function(e) { 626 e.stopPropagation(); 627 628 // Get the data from this cell 629 var hoverData = $(this).data('data'); 630 631 // Call callback 632 options.onHover(el, cell, hoverData.date, hoverData.data); 633 }) 634 .click(function(e) { 635 e.stopPropagation(); 636 637 // Get the data from this cell 638 var clickedData = $(this).data('data'); 639 640 // Save date to selected and first 641 options.selectedDate = options.firstDate = clickedData.date; 642 643 // Update calendar (and auto-hide if necessary) 644 self.render(function() { 645 if(!options.showAlways && options.hideOnClick) { 646 self.hide(); 647 } 648 }); 649 650 // Call callback 651 options.onClick(el, $(this), clickedData.date, clickedData.data); 652 }); 653 } 654 } 655 656 // Update the css for the cell 657 $.extend(cellCSS, 658 { 659 borderTopWidth: borderSize, 660 borderBottomWidth: borderSize, 661 borderLeftWidth: (row > 0 || (!row && !col)) ? borderSize : 0, 662 borderRightWidth: (row > 0 || (!row && col == 6)) ? borderSize : 0, 663 marginLeft: (col > 0) ? '-' + (borderSize) : 0, 664 marginTop: (row > 0) ? '-' + (borderSize) : 0, 665 zIndex: cellZIndex 666 }); 667 668 // Assign other properties to the cell 669 cell 670 .data('data', { date: cellDate, data: specialData}) 671 .addClass(coreClass + cellClass) 672 .css(cellCSS); 673 674 // Add cell to calendar 675 calendar.append(cell); 676 } 677 } 678 679 // Render the month / year title 680 681 // Helper function for toggling select and text 682 var toggleYearMonthSelect = function(showYear) { 683 var show = 'inline-block'; 684 var hide = 'none'; 685 686 if(options.allowMonthSelect) { 687 monthText.css({ display: !showYear ? hide : show }); 688 monthSelect.css({ display: !showYear ? show : hide }); 689 } 690 691 if(options.allowYearSelect) { 692 yearText.css({ display: showYear ? hide : show }); 693 yearSelect.css({ display: showYear ? show : hide }); 694 } 695 }; 696 697 // Helper function when select is updated 698 var onYearMonthSelect = function() { 699 options.firstDate = new Date(yearSelect.val(), monthSelect.val(), 1); 700 self.render(); 701 }; 702 703 // Build month selector 704 var monthSelect = $('<select/>') 705 .hide() 706 .change(onYearMonthSelect); 707 708 // Build year selector 709 var yearSelect = $('<select/>') 710 .hide() 711 .change(onYearMonthSelect); 712 713 // Build month label 714 var monthText = $('<span/>') 715 .html(monthNames[firstDateMonth]) 716 .mousedown(function() { return false; }) 717 .click(function(e) { 718 e.stopPropagation(); 719 toggleYearMonthSelect(false); 720 }); 721 722 // Build year label 723 var yearText = $('<span/>') 724 .html(firstDateYear) 725 .mousedown(function() { return false; }) 726 .click(function(e) { 727 e.stopPropagation(); 728 toggleYearMonthSelect(true); 729 }); 730 731 // Populate month select 732 $.each(monthNames, function(i, v) { 733 if(options.allowMonthSelect && selectableMonths._indexOf(i) != -1) { 734 var o = $('<option/>').html(v).attr('value', i); 735 if(i == firstDateMonth) { o.attr('selected', 'selected');} 736 monthSelect.append(o); 737 } 738 }); 739 740 // Populate year select 741 $.each(selectableYears, function(i, v) { 742 if(options.allowYearSelect) { 743 var o = $('<option/>').html(v).attr('value', v); 744 if(v == firstDateYear) { o.attr('selected', 'selected'); } 745 yearSelect.append(o); 746 } 747 }); 748 749 var titleYearMonth = $('<div/>') 750 .append(monthText) 751 .append(monthSelect) 752 .append(yearText) 753 .append(yearSelect); 754 755 // Add to title 756 titleCell.children().remove(); 757 titleCell.append(titleYearMonth); 758 759 // Run the callback signaling end of the render 760 renderCalback = renderCalback || (function() {}); 761 renderCalback(); 762 } 763 }; 764 765 // Return the plugin 766 return glDatePicker; 767 })(); 768 769 // One time initialization of useful prototypes 770 (function() { 771 Date.prototype._clear = function() { 772 this.setHours(0); 773 this.setMinutes(0); 774 this.setSeconds(0); 775 this.setMilliseconds(0); 776 777 return this; 778 }; 779 780 Date.prototype._time = function() { 781 return this._clear().getTime(); 782 }; 783 784 Date.prototype._max = function() { 785 var isLeapYear = (new Date(this.getYear(), 1, 29).getMonth() == 1) ? 1 : 0; 786 var days = [31, 28 + isLeapYear, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 787 788 return days[this.getMonth()]; 789 }; 790 791 Date.prototype._add = function(days) { 792 this.setDate(this.getDate() + days); 793 }; 794 795 Date.prototype._first = function() { 796 var date = new Date(this); 797 date.setDate(1); 798 799 return date; 800 }; 801 802 Date.prototype._val = function() { 803 this._clear(); 804 805 return { 806 year: this.getFullYear(), 807 month: this.getMonth(), 808 date: this.getDate(), 809 time: this.getTime(), 810 day: this.getDay() 811 }; 812 }; 813 814 Array.prototype._indexOf = function(value) { 815 return $.inArray(value, this); 816 } 817 })(); 818 })();
在线演示地址
http://runjs.cn/detail/bx3qgacr