├── Mobile_version ├── css │ ├── global.css │ └── reset.css ├── images │ ├── spr-icons.png │ └── ui │ │ ├── calendar-left.png │ │ └── calendar-right.png ├── js │ ├── atomu.DatePicker.js │ ├── lib │ │ └── fastclick.js │ └── zepto.min.js └── sample.html ├── PC_version ├── dateRange.css ├── dateRange.js ├── images │ ├── calendar_all.png │ ├── icon_date.png │ ├── page.png │ └── px.png ├── jquery.min.js └── sample.html └── README.md /Mobile_version/css/global.css: -------------------------------------------------------------------------------- 1 | /** 2 | * atom项目样式汇总 3 | * @author WeiwuZhu(朱伟武) 4 | */ 5 | /** 样式前缀集合 */ 6 | /** 公用变量 */ 7 | /** 8 | * 公用变量 9 | * @author WeiwuZhu(朱伟武) 10 | */ 11 | /*--颜色--*/ 12 | /* 灰色 */ 13 | /* 浅灰 */ 14 | /* 蓝色 */ 15 | /* 红色 */ 16 | /* 绿色 */ 17 | /* 常用边框颜色 */ 18 | /* 高亮文本 */ 19 | /* 橙色 */ 20 | /*--字体--*/ 21 | /*--z-index--*/ 22 | /** Reset */ 23 | /** ui */ 24 | /** 25 | * ui样式汇总 26 | * @author WeiwuZhu(朱伟武) 27 | */ 28 | /** 样式前缀集合 */ 29 | /** 公用变量 */ 30 | /** Reset */ 31 | /** 按钮 */ 32 | /** 33 | * 34 | * @authors weiwuzhu 35 | * @description 按钮样式 36 | * @important 样式统一前缀 gui- 37 | * 注释风格按以下风格 38 | */ 39 | /*--UI控件1--*/ 40 | /*子UI控件1*/ 41 | /*--UI控件2--*/ 42 | /*子UI控件1*/ 43 | /*--按钮--*/ 44 | .gui-btn, 45 | .gui-btn:visited { 46 | display: inline-block; 47 | -webkit-box-sizing: border-box; 48 | -moz-box-sizing: border-box; 49 | -ms-box-sizing: border-box; 50 | box-sizing: border-box; 51 | padding: 5px 13px; 52 | height: 36px; 53 | background: none; 54 | border: 1px solid #59a6d9; 55 | border-radius: 3px; 56 | font: 13px/24px 'Hiragino Sans GB'; 57 | color: #59a6d9; 58 | vertical-align: middle; 59 | cursor: pointer; 60 | } 61 | .gui-btn:hover { 62 | text-decoration: none; 63 | } 64 | .gui-btn:active { 65 | background: #f3f5f9; 66 | } 67 | .gui-btn.disabled, 68 | .gui-btn[disabled] { 69 | background: #8e9da7; 70 | color: #fff; 71 | border-width: 0; 72 | line-height: 26px; 73 | cursor: default; 74 | } 75 | .gui-btn.disabled:active, 76 | .gui-btn[disabled]:active { 77 | background: #8e9da7; 78 | } 79 | .gui-btn.primary { 80 | background: #59a6d9; 81 | color: #fff; 82 | } 83 | .gui-btn.primary:active { 84 | background: #428bca; 85 | } 86 | .gui-btn.link { 87 | background: none; 88 | border: none; 89 | line-height: 26px; 90 | } 91 | .gui-btn.link:active { 92 | background: none; 93 | color: #428bca; 94 | } 95 | .gui-btn.half { 96 | width: 48%; 97 | } 98 | .gui-btn.full { 99 | width: 100%; 100 | } 101 | .gui-btn-wrap { 102 | padding: 0 15px; 103 | font-size: 0; 104 | } 105 | .gui-btn-wrap .gui-btn { 106 | margin: 5px 0; 107 | } 108 | .gui-btn-wrap.col2 .gui-btn:first-child { 109 | margin-right: 4%; 110 | } 111 | /*--开关按钮--*/ 112 | .gui-on-off { 113 | display: inline-block; 114 | position: relative; 115 | width: 52px; 116 | height: 32px; 117 | border: 2px solid #59a6d9; 118 | background: #59a6d9; 119 | border-radius: 16px; 120 | font-size: 0; 121 | vertical-align: middle; 122 | -webkit-transition: all 0.2s linear; 123 | -o-transition: all 0.2s linear; 124 | transition: all 0.2s linear; 125 | } 126 | .gui-on-off:before { 127 | content: ''; 128 | position: absolute; 129 | right: 0; 130 | top: 0; 131 | width: 28px; 132 | height: 28px; 133 | background: #fff; 134 | border-radius: 50%; 135 | -webkit-transition: all 0.2s linear; 136 | -o-transition: all 0.2s linear; 137 | transition: all 0.2s linear; 138 | box-shadow: 0 1px 4px rgba(66, 143, 194, 0.75); 139 | } 140 | .gui-on-off.off { 141 | border-color: #dde1e4; 142 | background: #f3f3f3; 143 | } 144 | .gui-on-off.off:before { 145 | margin-right: -28px; 146 | right: 100%; 147 | box-shadow: 0 0 1px #e7e9ec, 0 2px 4px rgba(154, 164, 171, 0.75); 148 | } 149 | /*--按钮组--*/ 150 | .gui-btn-group { 151 | font-size: 0; 152 | } 153 | .gui-btn-group .gui-btn { 154 | width: 25%; 155 | border-left: none; 156 | border-radius: 0; 157 | } 158 | .gui-btn-group .gui-btn.current, 159 | .gui-btn-group .gui-btn.current:active { 160 | background: #59a6d9; 161 | color: #fff; 162 | } 163 | .gui-btn-group .gui-btn:first-child { 164 | border-top-left-radius: 3px; 165 | border-bottom-left-radius: 3px; 166 | } 167 | .gui-btn-group .gui-btn:last-child { 168 | border-top-right-radius: 3px; 169 | border-bottom-right-radius: 3px; 170 | } 171 | /** 表单 */ 172 | /** 173 | * 174 | * @authors weiwuzhu 175 | * @description 表单样式 176 | * @important 样式统一前缀 gui- 177 | * 注释风格按以下风格 178 | */ 179 | /*--UI控件1--*/ 180 | /*子UI控件1*/ 181 | /*--UI控件2--*/ 182 | /*子UI控件1*/ 183 | /*--表单元素--*/ 184 | input[type=text], 185 | input[type=password], 186 | input[type=url], 187 | input[type=email] { 188 | padding: 5px 12px; 189 | width: 100%; 190 | height: 36px; 191 | border: 1px solid #cccccc; 192 | border-radius: 3px; 193 | font: 13px/24px 'Hiragino Sans GB'; 194 | color: #546a79; 195 | } 196 | input[type=text]::-moz-placeholder, 197 | input[type=password]::-moz-placeholder, 198 | input[type=url]::-moz-placeholder, 199 | input[type=email]::-moz-placeholder { 200 | color: #aaaaaa; 201 | opacity: 1; 202 | } 203 | input[type=text]:-ms-input-placeholder, 204 | input[type=password]:-ms-input-placeholder, 205 | input[type=url]:-ms-input-placeholder, 206 | input[type=email]:-ms-input-placeholder { 207 | color: #aaaaaa; 208 | } 209 | input[type=text]::-webkit-input-placeholder, 210 | input[type=password]::-webkit-input-placeholder, 211 | input[type=url]::-webkit-input-placeholder, 212 | input[type=email]::-webkit-input-placeholder { 213 | color: #aaaaaa; 214 | } 215 | textarea { 216 | padding: 5px 12px; 217 | width: 100%; 218 | border: 1px solid #cccccc; 219 | border-radius: 3px; 220 | font: 13px/24px 'Hiragino Sans GB'; 221 | color: #546a79; 222 | resize: vertical; 223 | } 224 | textarea::-moz-placeholder { 225 | color: #aaaaaa; 226 | opacity: 1; 227 | } 228 | textarea:-ms-input-placeholder { 229 | color: #aaaaaa; 230 | } 231 | textarea::-webkit-input-placeholder { 232 | color: #aaaaaa; 233 | } 234 | /*--搜索框--*/ 235 | .gui-searchbar { 236 | padding: 7px 10px; 237 | background: #41abe1; 238 | } 239 | .gui-search { 240 | position: relative; 241 | } 242 | .gui-search input { 243 | padding-right: 30px; 244 | border: none; 245 | line-height: 26px; 246 | } 247 | .gui-search button { 248 | position: absolute; 249 | right: 0; 250 | top: 0; 251 | width: 31px; 252 | height: 100%; 253 | background: none; 254 | border: none; 255 | font-size: 0; 256 | cursor: pointer; 257 | } 258 | .gui-search button:after { 259 | content: '.'; 260 | position: absolute; 261 | left: 5px; 262 | top: 50%; 263 | margin-top: -8px; 264 | width: 15px; 265 | height: 15px; 266 | background: url(../images/ui/icon-search.png) no-repeat; 267 | -webkit-background-size: 100% auto; 268 | -ms-background-size: 100% auto; 269 | -moz-background-size: 100% auto; 270 | -o-background-size: 100% auto; 271 | background-size: 100% auto; 272 | } 273 | /*--checkbox--*/ 274 | input[type=checkbox] { 275 | position: relative; 276 | width: 18px; 277 | height: 1px; 278 | border: none; 279 | background: none; 280 | -webkit-appearance: none; 281 | -ms-appearance: none; 282 | -moz-appearance: none; 283 | appearance: none; 284 | vertical-align: middle; 285 | } 286 | input[type=checkbox]:after { 287 | content: ''; 288 | position: absolute; 289 | left: 0; 290 | top: -10px; 291 | width: 18px; 292 | height: 18px; 293 | background: url(../images/ui/icon-check.png) no-repeat; 294 | -webkit-background-size: 100% auto; 295 | -ms-background-size: 100% auto; 296 | -moz-background-size: 100% auto; 297 | -o-background-size: 100% auto; 298 | background-size: 100% auto; 299 | } 300 | input[type=checkbox]:checked:after { 301 | background-image: url(../images/ui/icon-checked.png); 302 | } 303 | .gui-label { 304 | font-size: 14px; 305 | line-height: 32px; 306 | } 307 | .gui-label input[type=checkbox], 308 | .gui-label input[type=radio] { 309 | margin-right: 10px; 310 | } 311 | .gui-checkbox-list { 312 | border-top: 1px solid #ccc; 313 | border-bottom: 1px solid #ccc; 314 | background: #fff; 315 | } 316 | .gui-checkbox-list > li { 317 | margin-left: 12px; 318 | padding: 9px 12px 9px 0; 319 | border-bottom: 1px solid #ccc; 320 | } 321 | .gui-checkbox-list > li:last-child { 322 | border-bottom: none; 323 | } 324 | /*--表单列表--*/ 325 | .gui-form { 326 | border-top: 1px solid #ccc; 327 | border-bottom: 1px solid #ccc; 328 | background: #fff; 329 | /*获取验证码*/ 330 | } 331 | .gui-form > li { 332 | margin-left: 12px; 333 | padding: 9px 12px 9px 0; 334 | border-bottom: 1px solid #ccc; 335 | overflow: hidden; 336 | } 337 | .gui-form > li:last-child { 338 | border-bottom: none; 339 | } 340 | .gui-form .form-item { 341 | position: relative; 342 | padding-right: 20px; 343 | height: 32px; 344 | overflow: hidden; 345 | } 346 | .gui-form .form-item label { 347 | float: left; 348 | margin-right: 10px; 349 | width: 60px; 350 | font: 15px/32px 'Hiragino Sans GB'; 351 | color: #8e9da7; 352 | } 353 | .gui-form .form-item .ctn { 354 | overflow: hidden; 355 | } 356 | .gui-form .form-item input { 357 | padding: 8px 0 6px; 358 | border: none; 359 | height: 32px; 360 | width: 100%; 361 | font: 13px/18px 'Hiragino Sans GB'; 362 | } 363 | .gui-form .form-item .help-icon { 364 | position: absolute; 365 | right: 0; 366 | top: 50%; 367 | margin-top: -9px; 368 | display: inline-block; 369 | width: 18px; 370 | height: 18px; 371 | background: url(../images/ui/icon-error.png) no-repeat; 372 | -webkit-background-size: 100% auto; 373 | -ms-background-size: 100% auto; 374 | -moz-background-size: 100% auto; 375 | -o-background-size: 100% auto; 376 | background-size: 100% auto; 377 | } 378 | .gui-form .form-item .help-icon.success { 379 | margin-top: -7px; 380 | width: 14px; 381 | height: 14px; 382 | background-image: url(../images/ui/icon-success.png); 383 | } 384 | .gui-form .ide-code .get { 385 | float: right; 386 | margin-left: 10px; 387 | padding: 5px 10px; 388 | width: 108px; 389 | height: 32px; 390 | border: none; 391 | background: #59a6d9; 392 | font: 13px/22px 'Hiragino Sans GB'; 393 | color: #fff; 394 | cursor: pointer; 395 | text-align: center; 396 | } 397 | .gui-form .ide-code .get.disabled { 398 | background: #8e9da7; 399 | } 400 | /** 表格 */ 401 | /** 402 | * 403 | * @authors weiwuzhu 404 | * @description 表格样式：无边框、带边框、表头带底色、隔行带底色等 405 | * @important 样式统一前缀 gui- 406 | * 注释风格按以下风格 407 | */ 408 | /*--UI控件1--*/ 409 | /*子UI控件1*/ 410 | /*--UI控件2--*/ 411 | /*子UI控件1*/ 412 | /*--表格--*/ 413 | .gui-table { 414 | width: 100%; 415 | border: none; 416 | background: #fff; 417 | white-space: nowrap; 418 | /*无边框*/ 419 | /*特殊样式*/ 420 | } 421 | .gui-table th { 422 | padding: 0 5px; 423 | height: 40px; 424 | border-bottom: 1px solid #cecece; 425 | line-height: 40px; 426 | color: #8e9da7; 427 | background: #ebebeb; 428 | } 429 | .gui-table th:first-child { 430 | padding-left: 15px; 431 | } 432 | .gui-table th:last-child { 433 | padding-right: 15px; 434 | } 435 | .gui-table td { 436 | padding: 10px 5px; 437 | height: 45px; 438 | font: 13px/24px 'Hiragino Sans GB'; 439 | background: #ffffff url(../images/ui/table-bd.png) bottom left repeat-x; 440 | } 441 | .gui-table td:first-child { 442 | padding-left: 15px; 443 | background: url(../images/ui/td-bg.png) left bottom no-repeat, #ffffff url(../images/ui/table-bd.png) bottom left repeat-x; 444 | } 445 | .gui-table td:last-child { 446 | padding-right: 15px; 447 | background: url(../images/ui/td-bg.png) right bottom no-repeat, #ffffff url(../images/ui/table-bd.png) bottom left repeat-x; 448 | } 449 | .gui-table tr:last-child td { 450 | background: none; 451 | border-bottom: 1px solid #cecece; 452 | } 453 | .gui-table tr.active td, 454 | .gui-table tr[href]:active td { 455 | background-color: #ebebeb; 456 | color: #8e9da7; 457 | } 458 | .gui-table.noborder th { 459 | background: #fff; 460 | border-bottom: none; 461 | height: 40px; 462 | line-height: 40px; 463 | } 464 | .gui-table.noborder td { 465 | padding-top: 5px; 466 | padding-bottom: 5px; 467 | height: 32px; 468 | line-height: 22px; 469 | background-image: none; 470 | } 471 | .gui-table.noborder tr:last-child td { 472 | border-bottom: none; 473 | } 474 | .gui-table small { 475 | font-size: 12px; 476 | } 477 | /** 辅助 */ 478 | /** 479 | * 480 | * @authors weiwuzhu 481 | * @description 辅助样式：文本提示、带底色文本提示、带icon文本提示 482 | * @important 样式统一前缀 gui- 483 | * 注释风格按以下风格 484 | */ 485 | /*--UI控件1--*/ 486 | /*子UI控件1*/ 487 | /*--UI控件2--*/ 488 | /*子UI控件1*/ 489 | /*--纯文本提示--*/ 490 | .gui-help { 491 | margin-bottom: 10px; 492 | color: #546a79; 493 | } 494 | .gui-help .icon { 495 | position: relative; 496 | top: -1px; 497 | display: inline-block; 498 | margin-right: 5px; 499 | width: 18px; 500 | height: 18px; 501 | background: url(../images/ui/icon-help.png) no-repeat; 502 | -webkit-background-size: 100% auto; 503 | -ms-background-size: 100% auto; 504 | -moz-background-size: 100% auto; 505 | -o-background-size: 100% auto; 506 | background-size: 100% auto; 507 | vertical-align: middle; 508 | } 509 | .gui-help.info { 510 | color: #8e9da7; 511 | } 512 | .gui-help.success { 513 | color: #88c057; 514 | } 515 | .gui-help.success .icon { 516 | background-image: url(../images/ui/icon-success.png); 517 | } 518 | .gui-help.error { 519 | color: #ff7143; 520 | } 521 | .gui-help.error .icon { 522 | background-image: url(../images/ui/icon-error.png); 523 | } 524 | .gui-help.highlight { 525 | color: #f28c48; 526 | } 527 | .gui-help-bg { 528 | margin-bottom: 10px; 529 | padding: 10px; 530 | background: #546a79; 531 | color: #fff; 532 | } 533 | .gui-help-bg.info { 534 | background: #8e9da7; 535 | } 536 | .gui-help-bg.success { 537 | background: #88c057; 538 | } 539 | .gui-help-bg.error { 540 | background: #ff7143; 541 | } 542 | /** 图片 */ 543 | /** 544 | * 545 | * @authors weiwuzhu 546 | * @description 图片样式：缩略图、圆角图、圆形图等 547 | * @important 样式统一前缀 gui- 548 | * 注释风格按以下风格 549 | */ 550 | /*--UI控件1--*/ 551 | /*子UI控件1*/ 552 | /*--UI控件2--*/ 553 | /*子UI控件1*/ 554 | /*--图片--*/ 555 | .gui-img { 556 | border-radius: 5px; 557 | } 558 | .gui-img.circle { 559 | border-radius: 50%; 560 | } 561 | .gui-img.thumbnail { 562 | display: inline-block; 563 | padding: 4px; 564 | max-width: 100%; 565 | height: auto; 566 | border: 1px solid #ddd; 567 | -webkit-box-sizing: border-box; 568 | -moz-box-sizing: border-box; 569 | -ms-box-sizing: border-box; 570 | box-sizing: border-box; 571 | } 572 | /** 选项卡 */ 573 | /** 574 | * 575 | * @authors weiwuzhu 576 | * @description 选项卡样式 577 | * @important 样式统一前缀 gui- 578 | * 注释风格按以下风格 579 | */ 580 | /*--UI控件1--*/ 581 | /*子UI控件1*/ 582 | /*--UI控件2--*/ 583 | /*子UI控件1*/ 584 | /** 设置列表 */ 585 | /** 586 | * 587 | * @authors weiwuzhu 588 | * @description 设置列表 589 | * @important 样式统一前缀 gui- 590 | * 注释风格按以下风格 591 | */ 592 | /*--UI控件1--*/ 593 | /*子UI控件1*/ 594 | /*--UI控件2--*/ 595 | /*子UI控件1*/ 596 | /** 进度条 */ 597 | /** 598 | * 599 | * @authors weiwuzhu 600 | * @description 进度条 601 | * @important 样式统一前缀 gui- 602 | * 注释风格按以下风格 603 | */ 604 | /*--UI控件1--*/ 605 | /*子UI控件1*/ 606 | /*--UI控件2--*/ 607 | /*子UI控件1*/ 608 | /** 加载 */ 609 | /** 610 | * 611 | * @authors weiwuzhu 612 | * @description 加载 613 | * @important 样式统一前缀 gui- 614 | * 注释风格按以下风格 615 | */ 616 | /*--UI控件1--*/ 617 | /*子UI控件1*/ 618 | /*--UI控件2--*/ 619 | /*子UI控件1*/ 620 | /** gri */ 621 | /** 622 | * gri样式汇总 623 | * @author WeiwuZhu(朱伟武) 624 | * @important 控件的样式统一以 atomu- 为前缀命名 625 | */ 626 | /** 样式前缀集合 */ 627 | /** 公用变量 */ 628 | /** Reset */ 629 | /** 对话框 */ 630 | /** 631 | * 632 | * @authors weiwuzhu 633 | * @description 对话框 634 | * @mark 635 | */ 636 | /** 日历控件 */ 637 | /** 638 | * 639 | * @authors weiwuzhu 640 | * @description 日历控件 641 | * @mark 642 | */ 643 | /*--日历控件--*/ 644 | .atomu-calendar-btn-wrap { 645 | position: relative; 646 | margin: 10px 0; 647 | } 648 | .atomu-calendar-btn-wrap.open .atomu-calendar-btn { 649 | border-color: #ababab; 650 | } 651 | .atomu-calendar-btn { 652 | height: 38px; 653 | border: 1px solid #dcdcdc; 654 | background: rgba(255, 255, 255, 0.7); 655 | font: 15px/36px 'Hiragino Sans GB'; 656 | text-align: center; 657 | cursor: pointer; 658 | } 659 | .atomu-calendar-btn > span { 660 | vertical-align: middle; 661 | } 662 | .atomu-calendar-btn em { 663 | margin: 0 5px; 664 | color: #8e9da7; 665 | } 666 | .atomu-calendar-btn .icon { 667 | display: inline-block; 668 | margin-left: 9px; 669 | width: 21px; 670 | height: 21px; 671 | background: url(../images/ui/icon-calendar.png) no-repeat; 672 | -webkit-background-size: 100% auto; 673 | -ms-background-size: 100% auto; 674 | -moz-background-size: 100% auto; 675 | -o-background-size: 100% auto; 676 | background-size: 100% auto; 677 | vertical-align: middle; 678 | } 679 | .atomu-calendar-wrap { 680 | position: absolute; 681 | left: 0; 682 | top: 0; 683 | overflow: hidden; 684 | width: 100%; 685 | z-index: 500; 686 | } 687 | .atomu-calendar { 688 | margin-top: -1px; 689 | padding-bottom: 10px; 690 | border: 1px solid #ababab; 691 | background: #fff; 692 | -webkit-animation-duration: 0.35s; 693 | animation-duration: 0.35s; 694 | -webkit-animation-fill-mode: both; 695 | animation-fill-mode: both; 696 | /*单独选某一天*/ 697 | /*选择周期*/ 698 | /*日期不可选*/ 699 | /*下拉动画*/ 700 | /*收起动画*/ 701 | } 702 | .atomu-calendar > .hd { 703 | position: relative; 704 | margin: 10px 10px 0; 705 | height: 30px; 706 | font: 13px/30px 'Hiragino Sans GB'; 707 | text-align: center; 708 | } 709 | .atomu-calendar > .hd .trigger { 710 | position: absolute; 711 | left: 0; 712 | top: 0; 713 | width: 22px; 714 | height: 30px; 715 | font-size: 0; 716 | } 717 | .atomu-calendar > .hd .trigger:before { 718 | position: relative; 719 | top: -2px; 720 | content: ''; 721 | display: inline-block; 722 | width: 7px; 723 | height: 12px; 724 | background: url(../images/ui/calendar-left.png) no-repeat; 725 | -webkit-background-size: 100% auto; 726 | -ms-background-size: 100% auto; 727 | -moz-background-size: 100% auto; 728 | -o-background-size: 100% auto; 729 | background-size: 100% auto; 730 | vertical-align: middle; 731 | } 732 | .atomu-calendar > .hd .next { 733 | left: auto; 734 | right: 0; 735 | } 736 | .atomu-calendar > .hd .next:before { 737 | background-image: url(../images/ui/calendar-right.png); 738 | } 739 | .atomu-calendar table { 740 | width: 100%; 741 | line-height: 30px; 742 | } 743 | .atomu-calendar th { 744 | font-family: arial; 745 | text-align: center; 746 | } 747 | .atomu-calendar td { 748 | padding: 2px 0; 749 | text-align: center; 750 | } 751 | .atomu-calendar .num { 752 | margin: 0 auto; 753 | min-width: 30px; 754 | height: 30px; 755 | } 756 | .atomu-calendar td.single-selected .num { 757 | width: 30px; 758 | border-radius: 15px; 759 | background: #ea5529; 760 | color: #fff; 761 | font-weight: bold; 762 | } 763 | .atomu-calendar td.first, 764 | .atomu-calendar td.last { 765 | position: relative; 766 | } 767 | .atomu-calendar td.first:before, 768 | .atomu-calendar td.last:before { 769 | content: ''; 770 | position: absolute; 771 | right: 0; 772 | top: 50%; 773 | margin-top: -15px; 774 | width: 50%; 775 | height: 30px; 776 | background: #ea5529; 777 | } 778 | .atomu-calendar td.first .num, 779 | .atomu-calendar td.last .num { 780 | position: relative; 781 | z-index: 2; 782 | width: 30px; 783 | border: 1px solid #ea5529; 784 | border-radius: 15px; 785 | background: #fff; 786 | line-height: 28px; 787 | } 788 | .atomu-calendar td.last:before { 789 | left: 0; 790 | right: auto; 791 | } 792 | .atomu-calendar td.selected .num { 793 | background: #ea5529; 794 | color: #fff; 795 | } 796 | .atomu-calendar td.disabled { 797 | color: #d3d3d3; 798 | } 799 | .atomu-calendar > .ft { 800 | margin-bottom: -5px; 801 | padding: 5px 10px 0; 802 | text-align: right; 803 | } 804 | .atomu-calendar > .ft a { 805 | color: #8e9da7; 806 | line-height: 24px; 807 | font-size: 14px; 808 | text-decoration: none; 809 | } 810 | .atomu-calendar > .ft a.sure { 811 | margin-left: 20px; 812 | color: #ea5529; 813 | } 814 | .atomu-calendar.slidedown { 815 | -webkit-animation-name: calendarSlideDown; 816 | animation-name: calendarSlideDown; 817 | } 818 | .atomu-calendar.slideup { 819 | -webkit-animation-name: calendarSlideUp; 820 | animation-name: calendarSlideUp; 821 | } 822 | /*下拉动画*/ 823 | @-webkit-keyframes calendarSlideDown { 824 | 0% { 825 | -webkit-transform: translate(0, -100%); 826 | -ms-transform: translate(0, -100%); 827 | -o-transform: translate(0, -100%); 828 | transform: translate(0, -100%); 829 | } 830 | 100% { 831 | -webkit-transform: translate(0, 0); 832 | -ms-transform: translate(0, 0); 833 | -o-transform: translate(0, 0); 834 | transform: translate(0, 0); 835 | } 836 | } 837 | @keyframes calendarSlideDown { 838 | 0% { 839 | -webkit-transform: translate(0, -100%); 840 | -ms-transform: translate(0, -100%); 841 | -o-transform: translate(0, -100%); 842 | transform: translate(0, -100%); 843 | } 844 | 100% { 845 | -webkit-transform: translate(0, 0); 846 | -ms-transform: translate(0, 0); 847 | -o-transform: translate(0, 0); 848 | transform: translate(0, 0); 849 | } 850 | } 851 | /*收起动画*/ 852 | @-webkit-keyframes calendarSlideUp { 853 | 0% { 854 | -webkit-transform: translate(0, 0); 855 | -ms-transform: translate(0, 0); 856 | -o-transform: translate(0, 0); 857 | transform: translate(0, 0); 858 | } 859 | 100% { 860 | -webkit-transform: translate(0, -100%); 861 | -ms-transform: translate(0, -100%); 862 | -o-transform: translate(0, -100%); 863 | transform: translate(0, -100%); 864 | } 865 | } 866 | @keyframes calendarSlideUp { 867 | 0% { 868 | -webkit-transform: translate(0, 0); 869 | -ms-transform: translate(0, 0); 870 | -o-transform: translate(0, 0); 871 | transform: translate(0, 0); 872 | } 873 | 100% { 874 | -webkit-transform: translate(0, -100%); 875 | -ms-transform: translate(0, -100%); 876 | -o-transform: translate(0, -100%); 877 | transform: translate(0, -100%); 878 | } 879 | } 880 | 881 | .atomu-mask { 882 | position: fixed; 883 | left: 0; 884 | top: 0; 885 | width: 100%; 886 | height: 100%; 887 | background: #000; 888 | opacity: .8; 889 | z-index: 499 890 | } 891 | 892 | .atomu-mask.hide { 893 | -webkit-animation: maskHide .35s linear both; 894 | -o-animation: maskHide .35s linear both; 895 | animation: maskHide .35s linear both 896 | } 897 | 898 | .atomu-mask.show { 899 | -webkit-animation: maskShow .35s linear both; 900 | -o-animation: maskShow .35s linear both; 901 | animation: maskShow .35s linear both 902 | } 903 | 904 | @-webkit-keyframes maskHide { 905 | 100% { 906 | opacity: 0 907 | } 908 | } 909 | 910 | @keyframes maskHide { 911 | 100% { 912 | opacity: 0 913 | } 914 | } 915 | 916 | @-webkit-keyframes maskShow { 917 | 0% { 918 | opacity: 0 919 | } 920 | 100% { 921 | opacity: .8 922 | } 923 | } 924 | 925 | @keyframes maskShow { 926 | 0% { 927 | opacity: 0 928 | } 929 | 100% { 930 | opacity: .8 931 | } 932 | } 933 | /*--页面、图片等的滑动动画框架--*/ 934 | /** 935 | * 936 | * @authors weiwuzhu 937 | * @description 页面、图片等的滑动动画框架 938 | * @mark 939 | */ 940 | /*--页面、图片等的滑动动画框架--*/ 941 | .atomu-slider { 942 | position: absolute; 943 | left: 0; 944 | top: 0; 945 | width: 100%; 946 | height: 100%; 947 | overflow: hidden; 948 | } 949 | .atomu-slider .loading-box { 950 | position: absolute; 951 | left: 0; 952 | top: 0; 953 | width: 100%; 954 | height: 100%; 955 | background: rgba(0, 0, 0, 0.6); 956 | } 957 | .atomu-slider .loading-box i { 958 | position: absolute; 959 | left: 50%; 960 | top: 50%; 961 | margin: -12px 0 0 -12px; 962 | width: 23px; 963 | height: 23px; 964 | background-image: url("../images/ui/loading.png"); 965 | -webkit-background-size: 100% auto; 966 | -ms-background-size: 100% auto; 967 | -moz-background-size: 100% auto; 968 | -o-background-size: 100% auto; 969 | background-size: 100% auto; 970 | -webkit-animation: automuLoading 1s linear infinite; 971 | -o-animation: automuLoading 1s linear infinite; 972 | animation: automuLoading 1s linear infinite; 973 | } 974 | /*loading动画*/ 975 | @-webkit-keyframes automuLoading { 976 | 100% { 977 | -webkit-transform: rotate(360deg); 978 | -ms-transform: rotate(360deg); 979 | -o-transform: rotate(360deg); 980 | transform: rotate(360deg); 981 | } 982 | } 983 | @keyframes automuLoading { 984 | 100% { 985 | -webkit-transform: rotate(360deg); 986 | -ms-transform: rotate(360deg); 987 | -o-transform: rotate(360deg); 988 | transform: rotate(360deg); 989 | } 990 | } 991 | .atomu-slider-ctn { 992 | position: relative; 993 | height: 100%; 994 | overflow: hidden; 995 | } 996 | .atomu-slider-ctn > li { 997 | position: absolute; 998 | left: 0; 999 | top: 0; 1000 | width: 100%; 1001 | height: 100%; 1002 | overflow: hidden; 1003 | } 1004 | .atomu-slider-ctn > li.pic { 1005 | display: -webkit-box; 1006 | display: -moz-box; 1007 | display: -ms-flexbox; 1008 | display: -webkit-flex; 1009 | display: flex; 1010 | -webkit-justify-content: center; 1011 | -moz-justify-content: center; 1012 | -ms-justify-content: center; 1013 | justify-content: center; 1014 | -webkit-align-items: center; 1015 | -moz-align-items: center; 1016 | -ms-align-items: center; 1017 | align-items: center; 1018 | -webkit-box-pack: center; 1019 | -moz-box-pack: center; 1020 | box-pack: center; 1021 | -webkit-box-align: center; 1022 | -moz-box-align: center; 1023 | box-align: center; 1024 | } 1025 | .atomu-slider-ctn > li.pic img { 1026 | max-width: 100%; 1027 | max-height: 100%; 1028 | vertical-align: middle; 1029 | } 1030 | /*圆点控制项*/ 1031 | .atomu-slider-ctrl { 1032 | position: absolute; 1033 | left: 0; 1034 | bottom: 10%; 1035 | width: 100%; 1036 | text-align: center; 1037 | font-size: 0; 1038 | z-index: 200; 1039 | } 1040 | .atomu-slider-ctrl li { 1041 | display: inline-block; 1042 | margin: 0 5px; 1043 | width: 12px; 1044 | height: 12px; 1045 | border: 1px solid #fff; 1046 | border-radius: 50%; 1047 | } 1048 | .atomu-slider-ctrl li.current { 1049 | background: #fff; 1050 | } 1051 | /*左右切换按钮*/ 1052 | .atomu-slider-pages button { 1053 | position: absolute; 1054 | left: 3%; 1055 | top: 0; 1056 | width: 60px; 1057 | height: 100%; 1058 | border: none; 1059 | background: none; 1060 | outline: none; 1061 | cursor: pointer; 1062 | } 1063 | .atomu-slider-pages button span { 1064 | display: block; 1065 | height: 60px; 1066 | background: rgba(255, 255, 255, 0.6); 1067 | overflow: hidden; 1068 | } 1069 | .atomu-slider-pages button span:after { 1070 | content: ''; 1071 | display: block; 1072 | margin-left: 23px; 1073 | width: 100%; 1074 | height: 100%; 1075 | -webkit-box-sizing: border-box; 1076 | -moz-box-sizing: border-box; 1077 | -ms-box-sizing: border-box; 1078 | box-sizing: border-box; 1079 | border: 4px solid #59a6d9; 1080 | -webkit-transform: rotate(-45deg); 1081 | -ms-transform: rotate(-45deg); 1082 | -o-transform: rotate(-45deg); 1083 | transform: rotate(-45deg); 1084 | box-shadow: 0 0 6px #000; 1085 | } 1086 | .atomu-slider-pages button.next { 1087 | left: auto; 1088 | right: 3%; 1089 | } 1090 | .atomu-slider-pages button.next span:after { 1091 | margin-left: -23px; 1092 | } 1093 | /*--下拉菜单--*/ 1094 | /** 1095 | * 1096 | * @authors weiwuzhu 1097 | * @description 下拉菜单 1098 | * @mark 1099 | */ 1100 | /*--下拉菜单--*/ 1101 | .atomu-dropdown-btn, 1102 | .atomu-dropdown-btn:visited { 1103 | display: inline-block; 1104 | -webkit-box-sizing: border-box; 1105 | -moz-box-sizing: border-box; 1106 | -ms-box-sizing: border-box; 1107 | box-sizing: border-box; 1108 | padding: 5px 13px; 1109 | height: 36px; 1110 | border: 1px solid #59a6d9; 1111 | border-radius: 3px; 1112 | background: #59a6d9; 1113 | font: 13px/24px 'Hiragino Sans GB'; 1114 | color: #fff; 1115 | vertical-align: middle; 1116 | cursor: pointer; 1117 | } 1118 | .atomu-dropdown-btn:hover { 1119 | text-decoration: none; 1120 | } 1121 | .atomu-dropdown-btn:active { 1122 | background: #428bca; 1123 | } 1124 | .atomu-dropdown-btn > .caret { 1125 | display: inline-block; 1126 | width: 0; 1127 | height: 0; 1128 | border-style: solid; 1129 | border-width: 6px 6px 0; 1130 | border-color: #fff transparent; 1131 | vertical-align: middle; 1132 | } 1133 | .atomu-dropdown { 1134 | position: relative; 1135 | display: inline-block; 1136 | } 1137 | .atomu-dropdown-toggle:focus { 1138 | outline: 0; 1139 | } 1140 | .atomu-dropdown-content { 1141 | position: absolute; 1142 | top: 100%; 1143 | left: 0; 1144 | z-index: 1020; 1145 | display: none; 1146 | margin: 9px 0 0; 1147 | padding: 15px; 1148 | min-width: 160px; 1149 | border: 1px solid #ddd; 1150 | background-color: #fff; 1151 | text-align: left; 1152 | line-height: 1.6; 1153 | -webkit-background-clip: padding-box; 1154 | -moz-background-clip: padding-box; 1155 | -ms-background-clip: padding-box; 1156 | background-clip: padding-box; 1157 | -webkit-animation-duration: 0.15s; 1158 | animation-duration: 0.15s; 1159 | } 1160 | .atomu-dropdown-content:before, 1161 | .atomu-dropdown-content:after { 1162 | content: ""; 1163 | position: absolute; 1164 | left: 10px; 1165 | top: -8px; 1166 | width: 0; 1167 | height: 0; 1168 | border-style: solid; 1169 | border-color: #ddd transparent; 1170 | border-width: 0 8px 8px; 1171 | z-index: 1; 1172 | pointer-events: none; 1173 | } 1174 | .atomu-dropdown-content:after { 1175 | top: -7px; 1176 | border-color: #fff transparent; 1177 | } 1178 | .atomu-dropdown-content:first-child { 1179 | margin-top: 0; 1180 | } 1181 | .atomu-active > .atomu-dropdown-btn, 1182 | .atomu-active > .atomu-dropdown-btn:hover, 1183 | .atomu-active > .atomu-dropdown-btn:active { 1184 | background: #428bca; 1185 | } 1186 | .atomu-active > .atomu-dropdown-content { 1187 | display: block; 1188 | } 1189 | .atomu-dropdown-up .atomu-dropdown-content { 1190 | top: auto; 1191 | bottom: 100%; 1192 | margin: 0 0 9px; 1193 | } 1194 | .atomu-dropdown-up .atomu-dropdown-content:before, 1195 | .atomu-dropdown-up .atomu-dropdown-content:after { 1196 | top: auto; 1197 | bottom: -8px; 1198 | border-width: 8px 8px 0; 1199 | } 1200 | .atomu-dropdown-up .atomu-dropdown-content:after { 1201 | bottom: -7px; 1202 | } 1203 | .atomu-dropdown-flip .atomu-dropdown-content { 1204 | left: auto; 1205 | right: 0; 1206 | } 1207 | .atomu-dropdown-flip .atomu-dropdown-content:before, 1208 | .atomu-dropdown-flip .atomu-dropdown-content:after { 1209 | left: auto; 1210 | right: 10px; 1211 | } 1212 | ul.atomu-dropdown-content { 1213 | padding: 5px 0; 1214 | list-style: none; 1215 | font: 14px/1.6 'Hiragino Sans GB'; 1216 | } 1217 | ul.atomu-dropdown-content.atomu-fr { 1218 | right: 0; 1219 | left: auto; 1220 | } 1221 | ul.atomu-dropdown-content .atomu-divider { 1222 | margin: 0 0; 1223 | height: 1px; 1224 | background-color: #e5e5e5; 1225 | overflow: hidden; 1226 | } 1227 | ul.atomu-dropdown-content > li > a { 1228 | display: block; 1229 | padding: 6px 20px; 1230 | clear: both; 1231 | font-weight: 400; 1232 | color: #333; 1233 | white-space: nowrap; 1234 | text-decoration: none; 1235 | } 1236 | ul.atomu-dropdown-content > li > a:hover, 1237 | ul.atomu-dropdown-content > li > a:focus { 1238 | text-decoration: none; 1239 | color: #262626; 1240 | background-color: #f5f5f5; 1241 | } 1242 | ul.atomu-dropdown-content > li.atomu-active > a, 1243 | ul.atomu-dropdown-content > li.atomu-active > a:hover, 1244 | ul.atomu-dropdown-content > li.atomu-active > a:focus { 1245 | color: #fff; 1246 | text-decoration: none; 1247 | outline: 0; 1248 | background-color: #0e90d2; 1249 | } 1250 | ul.atomu-dropdown-content > li.atomu-disabled > a, 1251 | ul.atomu-dropdown-content > li.atomu-disabled > a:hover, 1252 | ul.atomu-dropdown-content > li.atomu-disabled > a:focus { 1253 | color: #999; 1254 | } 1255 | ul.atomu-dropdown-content > li.atomu-disabled > a:hover, 1256 | ul.atomu-dropdown-content > li.atomu-disabled > a:focus { 1257 | text-decoration: none; 1258 | background-color: transparent; 1259 | background-image: none; 1260 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 1261 | cursor: not-allowed; 1262 | } 1263 | .atomu-dropdown-header { 1264 | display: block; 1265 | padding: 6px 20px; 1266 | font-size: 12px; 1267 | color: #999; 1268 | } 1269 | .atomu-dropdown-animation { 1270 | -webkit-animation: atomu-dropdown-animation 0.15s ease-out; 1271 | -o-animation: atomu-dropdown-animation 0.15s ease-out; 1272 | animation: atomu-dropdown-animation 0.15s ease-out; 1273 | } 1274 | @-webkit-keyframes atomu-dropdown-animation { 1275 | 0% { 1276 | opacity: 1; 1277 | -webkit-transform: translateY(0); 1278 | -ms-transform: translateY(0); 1279 | -o-transform: translateY(0); 1280 | transform: translateY(0); 1281 | } 1282 | 100% { 1283 | opacity: 0; 1284 | -webkit-transform: translateY(-10px); 1285 | -ms-transform: translateY(-10px); 1286 | -o-transform: translateY(-10px); 1287 | transform: translateY(-10px); 1288 | } 1289 | } 1290 | @keyframes atomu-dropdown-animation { 1291 | 0% { 1292 | opacity: 1; 1293 | -webkit-transform: translateY(0); 1294 | -ms-transform: translateY(0); 1295 | -o-transform: translateY(0); 1296 | transform: translateY(0); 1297 | } 1298 | 100% { 1299 | opacity: 0; 1300 | -webkit-transform: translateY(-10px); 1301 | -ms-transform: translateY(-10px); 1302 | -o-transform: translateY(-10px); 1303 | transform: translateY(-10px); 1304 | } 1305 | } 1306 | .atomu-animation-slide-top { 1307 | -webkit-animation-name: atomu-slide-top; 1308 | animation-name: atomu-slide-top; 1309 | } 1310 | @-webkit-keyframes atomu-slide-top { 1311 | 0% { 1312 | opacity: 0; 1313 | -webkit-transform: translateY(-100%); 1314 | -ms-transform: translateY(-100%); 1315 | -o-transform: translateY(-100%); 1316 | transform: translateY(-100%); 1317 | } 1318 | 100% { 1319 | opacity: 1; 1320 | -webkit-transform: translateY(0); 1321 | -ms-transform: translateY(0); 1322 | -o-transform: translateY(0); 1323 | transform: translateY(0); 1324 | } 1325 | } 1326 | @keyframes atomu-slide-top { 1327 | 0% { 1328 | opacity: 0; 1329 | -webkit-transform: translateY(-100%); 1330 | -ms-transform: translateY(-100%); 1331 | -o-transform: translateY(-100%); 1332 | transform: translateY(-100%); 1333 | } 1334 | 100% { 1335 | opacity: 1; 1336 | -webkit-transform: translateY(0); 1337 | -ms-transform: translateY(0); 1338 | -o-transform: translateY(0); 1339 | transform: translateY(0); 1340 | } 1341 | } 1342 | .atomu-animation-slide-top-fixed { 1343 | -webkit-animation-name: atomu-slide-top-fixed; 1344 | animation-name: atomu-slide-top-fixed; 1345 | } 1346 | @-webkit-keyframes atomu-slide-top-fixed { 1347 | 0% { 1348 | opacity: 0; 1349 | -webkit-transform: translateY(-10px); 1350 | -ms-transform: translateY(-10px); 1351 | -o-transform: translateY(-10px); 1352 | transform: translateY(-10px); 1353 | } 1354 | 100% { 1355 | opacity: 1; 1356 | -webkit-transform: translateY(0); 1357 | -ms-transform: translateY(0); 1358 | -o-transform: translateY(0); 1359 | transform: translateY(0); 1360 | } 1361 | } 1362 | @keyframes atomu-slide-top-fixed { 1363 | 0% { 1364 | opacity: 0; 1365 | -webkit-transform: translateY(-10px); 1366 | -ms-transform: translateY(-10px); 1367 | -o-transform: translateY(-10px); 1368 | transform: translateY(-10px); 1369 | } 1370 | 100% { 1371 | opacity: 1; 1372 | -webkit-transform: translateY(0); 1373 | -ms-transform: translateY(0); 1374 | -o-transform: translateY(0); 1375 | transform: translateY(0); 1376 | } 1377 | } 1378 | /*--选项卡--*/ 1379 | /** 1380 | * 1381 | * @authors weiwuzhu 1382 | * @description 选项卡 1383 | * @mark 1384 | */ 1385 | /*--选项卡--*/ 1386 | .atomu-tabs-nav { 1387 | border-bottom: 1px solid #ddd; 1388 | } 1389 | .atomu-tabs-nav:after { 1390 | content: ''; 1391 | display: block; 1392 | height: 0; 1393 | clear: both; 1394 | overflow: hidden; 1395 | visibility: hidden; 1396 | } 1397 | .atomu-tabs-nav > li { 1398 | float: left; 1399 | margin-bottom: -1px; 1400 | } 1401 | .atomu-tabs-nav > li > a { 1402 | display: block; 1403 | margin-right: 5px; 1404 | padding: 0 16px; 1405 | border: 1px solid transparent; 1406 | font: 14px/36px 'Hiragino Sans GB'; 1407 | color: #59a6d9; 1408 | text-decoration: none; 1409 | } 1410 | .atomu-tabs-nav > li > a:hover { 1411 | text-decoration: none; 1412 | background-color: #eee; 1413 | } 1414 | .atomu-tabs-nav > li.atomu-active > a, 1415 | .atomu-tabs-nav > li.atomu-active > a:hover { 1416 | border-color: #ddd #ddd transparent; 1417 | background-color: #fff; 1418 | color: #546a79; 1419 | } 1420 | .atomu-tabs-bd { 1421 | position: relative; 1422 | overflow: hidden; 1423 | border: 1px solid #ddd; 1424 | border-top: none; 1425 | z-index: 100; 1426 | -webkit-transition: height 0.3s; 1427 | -o-transition: height 0.3s; 1428 | transition: height 0.3s; 1429 | } 1430 | .atomu-tabs-bd .atomu-tab-panel { 1431 | position: absolute; 1432 | top: 0; 1433 | z-index: 99; 1434 | float: left; 1435 | width: 100%; 1436 | padding: 10px 10px 15px; 1437 | visibility: hidden; 1438 | -webkit-transition: -webkit-transform 0.3s; 1439 | transition: transform .3s; 1440 | -webkit-transform: translateX(-100%); 1441 | -ms-transform: translateX(-100%); 1442 | -o-transform: translateX(-100%); 1443 | transform: translateX(-100%); 1444 | } 1445 | .atomu-tabs-bd .atomu-tab-panel * { 1446 | -webkit-user-drag: none; 1447 | } 1448 | .atomu-tabs-bd .atomu-tab-panel.atomu-active { 1449 | position: relative; 1450 | z-index: 100; 1451 | visibility: visible; 1452 | -webkit-transform: translateX(0); 1453 | -ms-transform: translateX(0); 1454 | -o-transform: translateX(0); 1455 | transform: translateX(0); 1456 | } 1457 | .atomu-tabs-bd .atomu-tab-panel.atomu-active ~ .atomu-tab-panel { 1458 | -webkit-transform: translateX(100%); 1459 | -ms-transform: translateX(100%); 1460 | -o-transform: translateX(100%); 1461 | transform: translateX(100%); 1462 | } 1463 | /** 动画 */ 1464 | /** 1465 | * 1466 | * @authors weiwuzhu 1467 | * @description 移动端动画库 1468 | * @mark 动画命名规则：动画类型+in/out（展开/收起）+方向（left/right/top/bottom） 1469 | */ 1470 | .animated { 1471 | -webkit-animation-duration: 0.35s; 1472 | animation-duration: 0.35s; 1473 | -webkit-animation-fill-mode: both; 1474 | animation-fill-mode: both; 1475 | } 1476 | .animated.infinite { 1477 | -webkit-animation-iteration-count: infinite; 1478 | animation-iteration-count: infinite; 1479 | } 1480 | /* scale */ 1481 | .scaleIn { 1482 | -webkit-animation-name: scaleIn; 1483 | animation-name: scaleIn; 1484 | } 1485 | @-webkit-keyframes scaleIn { 1486 | 0% { 1487 | -webkit-transform: scale(0); 1488 | -ms-transform: scale(0); 1489 | -o-transform: scale(0); 1490 | transform: scale(0); 1491 | } 1492 | 75% { 1493 | -webkit-transform: scale(1.1); 1494 | -ms-transform: scale(1.1); 1495 | -o-transform: scale(1.1); 1496 | transform: scale(1.1); 1497 | } 1498 | 100% { 1499 | -webkit-transform: scale(1); 1500 | -ms-transform: scale(1); 1501 | -o-transform: scale(1); 1502 | transform: scale(1); 1503 | } 1504 | } 1505 | @keyframes scaleIn { 1506 | 0% { 1507 | -webkit-transform: scale(0); 1508 | -ms-transform: scale(0); 1509 | -o-transform: scale(0); 1510 | transform: scale(0); 1511 | } 1512 | 75% { 1513 | -webkit-transform: scale(1.1); 1514 | -ms-transform: scale(1.1); 1515 | -o-transform: scale(1.1); 1516 | transform: scale(1.1); 1517 | } 1518 | 100% { 1519 | -webkit-transform: scale(1); 1520 | -ms-transform: scale(1); 1521 | -o-transform: scale(1); 1522 | transform: scale(1); 1523 | } 1524 | } 1525 | .scaleInTop { 1526 | -webkit-animation-name: scaleInTop; 1527 | animation-name: scaleInTop; 1528 | -webkit-transform-origin: center top; 1529 | -moz-transform-origin: center top; 1530 | -ms-transform-origin: center top; 1531 | transform-origin: center top; 1532 | } 1533 | @-webkit-keyframes scaleInTop { 1534 | 0% { 1535 | -webkit-transform: scale3d(0, 0, 1); 1536 | transform: scale3d(0, 0, 1); 1537 | } 1538 | 75% { 1539 | -webkit-transform: scale3d(1.1, 1.1, 1); 1540 | transform: scale3d(1.1, 1.1, 1); 1541 | } 1542 | 100% { 1543 | -webkit-transform: scale3d(1, 1, 1); 1544 | transform: scale3d(1, 1, 1); 1545 | } 1546 | } 1547 | @keyframes scaleInTop { 1548 | 0% { 1549 | -webkit-transform: scale3d(0, 0, 1); 1550 | transform: scale3d(0, 0, 1); 1551 | } 1552 | 75% { 1553 | -webkit-transform: scale3d(1.1, 1.1, 1); 1554 | transform: scale3d(1.1, 1.1, 1); 1555 | } 1556 | 100% { 1557 | -webkit-transform: scale3d(1, 1, 1); 1558 | transform: scale3d(1, 1, 1); 1559 | } 1560 | } 1561 | .scaleOutTop { 1562 | -webkit-animation-name: scaleOutTop; 1563 | animation-name: scaleOutTop; 1564 | -webkit-transform-origin: center top; 1565 | -moz-transform-origin: center top; 1566 | -ms-transform-origin: center top; 1567 | transform-origin: center top; 1568 | } 1569 | @-webkit-keyframes scaleOutTop { 1570 | 0% { 1571 | -webkit-transform: scale3d(1, 1, 1); 1572 | transform: scale3d(1, 1, 1); 1573 | } 1574 | 100% { 1575 | -webkit-transform: scale3d(0, 0, 1); 1576 | transform: scale3d(0, 0, 1); 1577 | } 1578 | } 1579 | @keyframes scaleOutTop { 1580 | 0% { 1581 | -webkit-transform: scale3d(1, 1, 1); 1582 | transform: scale3d(1, 1, 1); 1583 | } 1584 | 100% { 1585 | -webkit-transform: scale3d(0, 0, 1); 1586 | transform: scale3d(0, 0, 1); 1587 | } 1588 | } 1589 | /* slide */ 1590 | .slideInTop { 1591 | -webkit-animation-name: slideInTop; 1592 | animation-name: slideInTop; 1593 | } 1594 | @-webkit-keyframes slideInTop { 1595 | 0% { 1596 | -webkit-transform: translate3d(0, -100%, 0); 1597 | transform: translate3d(0, -100%, 0); 1598 | } 1599 | 100% { 1600 | -webkit-transform: translate3d(0, 0, 0); 1601 | transform: translate3d(0, 0, 0); 1602 | } 1603 | } 1604 | @keyframes slideInTop { 1605 | 0% { 1606 | -webkit-transform: translate3d(0, -100%, 0); 1607 | transform: translate3d(0, -100%, 0); 1608 | } 1609 | 100% { 1610 | -webkit-transform: translate3d(0, 0, 0); 1611 | transform: translate3d(0, 0, 0); 1612 | } 1613 | } 1614 | .slideInBottom { 1615 | -webkit-animation-name: slideInBottom; 1616 | animation-name: slideInBottom; 1617 | } 1618 | @-webkit-keyframes slideInBottom { 1619 | 0% { 1620 | -webkit-transform: translate3d(0, 100%, 0); 1621 | transform: translate3d(0, 100%, 0); 1622 | } 1623 | 100% { 1624 | -webkit-transform: translate3d(0, 0, 0); 1625 | transform: translate3d(0, 0, 0); 1626 | } 1627 | } 1628 | @keyframes slideInBottom { 1629 | 0% { 1630 | -webkit-transform: translate3d(0, 100%, 0); 1631 | transform: translate3d(0, 100%, 0); 1632 | } 1633 | 100% { 1634 | -webkit-transform: translate3d(0, 0, 0); 1635 | transform: translate3d(0, 0, 0); 1636 | } 1637 | } 1638 | .slideInLeft { 1639 | -webkit-animation-name: slideInLeft; 1640 | animation-name: slideInLeft; 1641 | } 1642 | @-webkit-keyframes slideInLeft { 1643 | 0% { 1644 | -webkit-transform: translate3d(-100%, 0, 0); 1645 | transform: translate3d(-100%, 0, 0); 1646 | } 1647 | 100% { 1648 | -webkit-transform: translate3d(0, 0, 0); 1649 | transform: translate3d(0, 0, 0); 1650 | } 1651 | } 1652 | @keyframes slideInLeft { 1653 | 0% { 1654 | -webkit-transform: translate3d(-100%, 0, 0); 1655 | transform: translate3d(-100%, 0, 0); 1656 | } 1657 | 100% { 1658 | -webkit-transform: translate3d(0, 0, 0); 1659 | transform: translate3d(0, 0, 0); 1660 | } 1661 | } 1662 | .slideInRight { 1663 | -webkit-animation-name: slideInRight; 1664 | animation-name: slideInRight; 1665 | } 1666 | @-webkit-keyframes slideInRight { 1667 | 0% { 1668 | -webkit-transform: translate3d(100%, 0, 0); 1669 | transform: translate3d(100%, 0, 0); 1670 | } 1671 | 100% { 1672 | -webkit-transform: translate3d(0, 0, 0); 1673 | transform: translate3d(0, 0, 0); 1674 | } 1675 | } 1676 | @keyframes slideInRight { 1677 | 0% { 1678 | -webkit-transform: translate3d(100%, 0, 0); 1679 | transform: translate3d(100%, 0, 0); 1680 | } 1681 | 100% { 1682 | -webkit-transform: translate3d(0, 0, 0); 1683 | transform: translate3d(0, 0, 0); 1684 | } 1685 | } 1686 | .slideOutBottom { 1687 | -webkit-animation-name: slideOutBottom; 1688 | animation-name: slideOutBottom; 1689 | } 1690 | @-webkit-keyframes slideOutBottom { 1691 | 0% { 1692 | -webkit-transform: translate3d(0, 0, 0); 1693 | transform: translate3d(0, 0, 0); 1694 | } 1695 | 100% { 1696 | -webkit-transform: translate3d(0, 100%, 0); 1697 | transform: translate3d(0, 100%, 0); 1698 | } 1699 | } 1700 | @keyframes slideOutBottom { 1701 | 0% { 1702 | -webkit-transform: translate3d(0, 0, 0); 1703 | transform: translate3d(0, 0, 0); 1704 | } 1705 | 100% { 1706 | -webkit-transform: translate3d(0, 100%, 0); 1707 | transform: translate3d(0, 100%, 0); 1708 | } 1709 | } 1710 | .slideOutLeft { 1711 | -webkit-animation-name: slideOutLeft; 1712 | animation-name: slideOutLeft; 1713 | } 1714 | @-webkit-keyframes slideOutLeft { 1715 | 0% { 1716 | -webkit-transform: translate3d(0, 0, 0); 1717 | transform: translate3d(0, 0, 0); 1718 | } 1719 | 100% { 1720 | -webkit-transform: translate3d(-100%, 0, 0); 1721 | transform: translate3d(-100%, 0, 0); 1722 | } 1723 | } 1724 | @keyframes slideOutLeft { 1725 | 0% { 1726 | -webkit-transform: translate3d(0, 0, 0); 1727 | transform: translate3d(0, 0, 0); 1728 | } 1729 | 100% { 1730 | -webkit-transform: translate3d(-100%, 0, 0); 1731 | transform: translate3d(-100%, 0, 0); 1732 | } 1733 | } 1734 | .slideOutRight { 1735 | -webkit-animation-name: slideOutRight; 1736 | animation-name: slideOutRight; 1737 | } 1738 | @-webkit-keyframes slideOutRight { 1739 | 0% { 1740 | -webkit-transform: translate3d(0, 0, 0); 1741 | transform: translate3d(0, 0, 0); 1742 | } 1743 | 100% { 1744 | -webkit-transform: translate3d(100%, 0, 0); 1745 | transform: translate3d(100%, 0, 0); 1746 | } 1747 | } 1748 | @keyframes slideOutRight { 1749 | 0% { 1750 | -webkit-transform: translate3d(0, 0, 0); 1751 | transform: translate3d(0, 0, 0); 1752 | } 1753 | 100% { 1754 | -webkit-transform: translate3d(100%, 0, 0); 1755 | transform: translate3d(100%, 0, 0); 1756 | } 1757 | } 1758 | .slideOutTop { 1759 | -webkit-animation-name: slideOutTop; 1760 | animation-name: slideOutTop; 1761 | } 1762 | @-webkit-keyframes slideOutTop { 1763 | 0% { 1764 | -webkit-transform: translate3d(0, 0, 0); 1765 | transform: translate3d(0, 0, 0); 1766 | } 1767 | 100% { 1768 | -webkit-transform: translate3d(0, -100%, 0); 1769 | transform: translate3d(0, -100%, 0); 1770 | } 1771 | } 1772 | @keyframes slideOutTop { 1773 | 0% { 1774 | -webkit-transform: translate3d(0, 0, 0); 1775 | transform: translate3d(0, 0, 0); 1776 | } 1777 | 100% { 1778 | -webkit-transform: translate3d(0, -100%, 0); 1779 | transform: translate3d(0, -100%, 0); 1780 | } 1781 | } 1782 | /* maskfade */ 1783 | .maskFadeIn { 1784 | -webkit-animation-name: maskFadeIn; 1785 | animation-name: maskFadeIn; 1786 | } 1787 | @-webkit-keyframes maskFadeIn { 1788 | 0% { 1789 | opacity: 0; 1790 | } 1791 | 100% { 1792 | opacity: 0.5; 1793 | } 1794 | } 1795 | @keyframes maskFadeIn { 1796 | 0% { 1797 | opacity: 0; 1798 | } 1799 | 100% { 1800 | opacity: 0.5; 1801 | } 1802 | } 1803 | .maskFadeOut { 1804 | -webkit-animation-name: maskFadeOut; 1805 | animation-name: maskFadeOut; 1806 | } 1807 | @-webkit-keyframes maskFadeOut { 1808 | 0% { 1809 | opacity: 0.5; 1810 | } 1811 | 100% { 1812 | opacity: 0; 1813 | } 1814 | } 1815 | @keyframes maskFadeOut { 1816 | 0% { 1817 | opacity: 0.5; 1818 | } 1819 | 100% { 1820 | opacity: 0; 1821 | } 1822 | } 1823 | /* bounce */ 1824 | .bounceTop { 1825 | -webkit-animation-name: bounceTop; 1826 | animation-name: bounceTop; 1827 | } 1828 | @-webkit-keyframes bounceTop { 1829 | 0%, 1830 | 20%, 1831 | 53%, 1832 | 80%, 1833 | 100% { 1834 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1835 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1836 | -webkit-transform: translate3d(0, 0, 0); 1837 | transform: translate3d(0, 0, 0); 1838 | } 1839 | 40%, 1840 | 43% { 1841 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1842 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1843 | -webkit-transform: translate3d(0, 30px, 0); 1844 | transform: translate3d(0, 30px, 0); 1845 | } 1846 | 70% { 1847 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1848 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1849 | -webkit-transform: translate3d(0, 15px, 0); 1850 | transform: translate3d(0, 15px, 0); 1851 | } 1852 | 90% { 1853 | -webkit-transform: translate3d(0, 4px, 0); 1854 | transform: translate3d(0, 4px, 0); 1855 | } 1856 | } 1857 | @keyframes bounceTop { 1858 | 0%, 1859 | 20%, 1860 | 53%, 1861 | 80%, 1862 | 100% { 1863 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1864 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1865 | -webkit-transform: translate3d(0, 0, 0); 1866 | transform: translate3d(0, 0, 0); 1867 | } 1868 | 40%, 1869 | 43% { 1870 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1871 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1872 | -webkit-transform: translate3d(0, 30px, 0); 1873 | transform: translate3d(0, 30px, 0); 1874 | } 1875 | 70% { 1876 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1877 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1878 | -webkit-transform: translate3d(0, 15px, 0); 1879 | transform: translate3d(0, 15px, 0); 1880 | } 1881 | 90% { 1882 | -webkit-transform: translate3d(0, 4px, 0); 1883 | transform: translate3d(0, 4px, 0); 1884 | } 1885 | } 1886 | .bounceBottom { 1887 | -webkit-animation-name: bounceBottom; 1888 | animation-name: bounceBottom; 1889 | } 1890 | @-webkit-keyframes bounceBottom { 1891 | 0%, 1892 | 20%, 1893 | 53%, 1894 | 80%, 1895 | 100% { 1896 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1897 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1898 | -webkit-transform: translate3d(0, 0, 0); 1899 | transform: translate3d(0, 0, 0); 1900 | } 1901 | 40%, 1902 | 43% { 1903 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1904 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1905 | -webkit-transform: translate3d(0, -60px, 0); 1906 | transform: translate3d(0, -60px, 0); 1907 | } 1908 | 70% { 1909 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1910 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1911 | -webkit-transform: translate3d(0, -30px, 0); 1912 | transform: translate3d(0, -30px, 0); 1913 | } 1914 | 90% { 1915 | -webkit-transform: translate3d(0, -8px, 0); 1916 | transform: translate3d(0, -8px, 0); 1917 | } 1918 | } 1919 | @keyframes bounceBottom { 1920 | 0%, 1921 | 20%, 1922 | 53%, 1923 | 80%, 1924 | 100% { 1925 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1926 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1927 | -webkit-transform: translate3d(0, 0, 0); 1928 | transform: translate3d(0, 0, 0); 1929 | } 1930 | 40%, 1931 | 43% { 1932 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1933 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1934 | -webkit-transform: translate3d(0, -60px, 0); 1935 | transform: translate3d(0, -60px, 0); 1936 | } 1937 | 70% { 1938 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1939 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1940 | -webkit-transform: translate3d(0, -30px, 0); 1941 | transform: translate3d(0, -30px, 0); 1942 | } 1943 | 90% { 1944 | -webkit-transform: translate3d(0, -8px, 0); 1945 | transform: translate3d(0, -8px, 0); 1946 | } 1947 | } 1948 | -------------------------------------------------------------------------------- /Mobile_version/css/reset.css: -------------------------------------------------------------------------------- 1 | html,body{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent; 2 | -webkit-user-select: none; 3 | -moz-user-select: none; 4 | -ms-user-select: none; 5 | user-select: none; 6 | } 7 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,button,article,aside,details,figcaption,figure, 8 | footer,header,hgroup,menu,nav,section{margin:0;padding:0; 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | -ms-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | table{border-collapse:collapse;border-spacing:0} 15 | fieldset,img{border:0} 16 | address,caption,cite,code,dfn,em,strong,th,var,i{font-style:normal;font-weight:normal} 17 | ol,ul{list-style:none}caption,th{text-align:left} 18 | h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 19 | q:before,q:after{content:''} 20 | abbr,acronym{border:0;font-variant:normal} 21 | sup{vertical-align:text-top} 22 | sub{vertical-align:text-bottom} 23 | :focus{outline: none;} 24 | mark{background: none;} 25 | 26 | /*请根据实际情况修改字体、颜色、字号等*/ 27 | body{font: 12px/1.5 "Hiragino Sans GB", "Heiti SC", "Microsoft Yahei", "Helvetica Neue", Helvetica;color: #546a79;} -------------------------------------------------------------------------------- /Mobile_version/images/spr-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/Mobile_version/images/spr-icons.png -------------------------------------------------------------------------------- /Mobile_version/images/ui/calendar-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/Mobile_version/images/ui/calendar-left.png -------------------------------------------------------------------------------- /Mobile_version/images/ui/calendar-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/Mobile_version/images/ui/calendar-right.png -------------------------------------------------------------------------------- /Mobile_version/js/atomu.DatePicker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 手机端日期选择器，基于zepto 3 | * @author johnnyzheng(johnnyzheng@tencent.com) 4 | * @date 2015-12-31 5 | * @version v2.0.1 6 | * 2014-12-04 增加历史7天的选择，选中向前七天 7 | * 2014-12-08 支持全局setting.isSingleDay设置，支持随时对页面日期对象设置，reload即可生效 8 | * 2014-12-11 增加下拉和收折的动画效果 9 | * 2015-07-31 增加没有日期展示栏的模式支持，支持没有确定、取消按钮的快速点击提交 10 | * 2015-08-13 增加初始化传递默认选中日期的功能 11 | * 2015-12-31 多多记账积累的样式和逻辑控制，新版本 12 | */ 13 | 14 | ;(function(global){ 15 | global.atomuDatePicker = function(options){ 16 | 17 | this.globalSetting = { 18 | isSingleDay : true 19 | }; 20 | //传入的日期容器的配置 21 | this._defaults = { 22 | 'mod' : 'default', //支持的模式，default:有日期展示span的，fastclick:无日期展示span和确定取消按钮 23 | 'containerId':'', 24 | 'defaultDate' : '', //初始化默认选中的日期 25 | 'isSingleDay':true, 26 | 'stopToday':true, // 今天之后的日期是否可选，默认为true不可选，如果让全面板的日期均可选，请将此参数设置为false 27 | 'disableCss':'disabled', 28 | 'singleSelectedCss' : 'single-selected', 29 | 'firstCss':'first', 30 | 'lastCss':'last', 31 | 'selectCss':'selected', 32 | 'ctnCss':'atomu-calendar', 33 | 'wrapCss':'atomu-calendar-wrap', 34 | 'autoSubmit':true, 35 | 'clickSubmit':false,//支持没有提交按钮，点击日期即提交 36 | 'triggerId':'atomuDatePicker_popup_btn',//支持自定义呼出元素 37 | 'callback':function(dateObj){return true;} 38 | }; 39 | 40 | this.opts = $.extend(this._defaults, options); 41 | 42 | this.globalSetting.isSingleDay = $.extend(this.globalSetting.isSingleDay, this.opts.isSingleDay); 43 | 44 | //单天的年、月、日 45 | var dt = this.opts.defaultDate === '' ? new Date() : new Date(this.opts.defaultDate); 46 | this.year = dt.getFullYear(); 47 | this.month = dt.getMonth() + 1; 48 | this.date = dt.getDate(); 49 | 50 | 51 | var _before = new Date(new Date().getTime() - 6*24*60*60*1000);; // 区间日期选择的时候的开始日期 52 | this.startDate = this.formatDate([_before.getFullYear(), _before.getMonth()+1, _before.getDate()].join('-')); 53 | //切换月份的游标 54 | this.cursorMonth = this.month - 1; 55 | this.cursorYear = this.year; 56 | 57 | this.maskTmpl = '
'; 58 | //TODO html 代码 模板化 59 | var htmlTmpl = { 60 | 'default' : [ 61 | '
', 62 | '', 84 | '
' 85 | ].join('') 86 | } 87 | 88 | 89 | //构造日期面板 90 | if($('#'+this.opts.containerId).length > 0 && $('#atomuDatePicker_popup_wrap').length == 0) 91 | $('#'+this.opts.containerId).append(htmlTmpl[this.opts.mod]); 92 | 93 | //如果有默认选中时间 94 | 95 | //this.fillDate(new Date().getFullYear(), new Date().getMonth()); 96 | this.fillDate(this.year, this.month-1); 97 | 98 | $('#atomuDatePicker_current_date').length > 0 && $('#atomuDatePicker_current_date').html(this.getCurrentDate(true)); //--当前日期 99 | $('#atomuDatePicker_current_month').html(this.formatDate([this.year, this.month].join('-'), true));//--当前月份 100 | 101 | this.init(); 102 | 103 | //页面加载完毕，则提交callback事件、或者切换7天和今天的时候提交回调函数事件 104 | if(this.opts.autoSubmit){ 105 | this.submit(); 106 | } 107 | 108 | 109 | } 110 | 111 | global.atomuDatePicker.prototype.reload = function(){ 112 | this.init(); 113 | $('#atomuDatePicker_current_date').length>0 && $('#atomuDatePicker_current_date').html(this.getCurrentDate(true)); //--当前日期 114 | } 115 | /** 116 | * 初始化日期面板的切换月份的操作、气泡弹出的控制 117 | */ 118 | global.atomuDatePicker.prototype.init = function(){ 119 | var that = this; 120 | var $panel = $('.'+that.opts.ctnCss), $mask = $('.atomu-mask'); 121 | var util = { 122 | popup : function(btn, ctn, wrap, css) { 123 | css = css || 'open'; 124 | var ITEMS_TIMEOUT = null, time_out = 500; 125 | 126 | function hidePop() { 127 | //$panel.addClass('slideup'); 128 | $(ctn).addClass('slideup'); 129 | setTimeout(function(){ 130 | //$panel.removeClass('slideup'); 131 | $('#' + wrap).removeClass(css); 132 | $('#' + ctn).removeClass('slideup').hide(); 133 | $mask.remove(); 134 | },350); 135 | } 136 | 137 | function showPop() { 138 | $('#' + wrap).addClass(css); 139 | $('#' + ctn).show().addClass('slidedown'); 140 | 141 | //$panel.addClass('slidedown'); 142 | $('body').append($(that.maskTmpl)); 143 | //给遮罩层，绑定hidePanel事件 144 | $('.atomu-mask').unbind('click').click(function(){ 145 | util.hidePanel(); 146 | }); 147 | setTimeout(function(){ 148 | //$panel.removeClass('slidedown'); 149 | $('#' + ctn).removeClass('slidedown'); 150 | }, 350); 151 | 152 | } 153 | 154 | function isPopShow() { 155 | return $('#' + wrap).hasClass(css); 156 | } 157 | 158 | $("#" + btn).unbind('click').click(function() { 159 | isPopShow() ? hidePop() : showPop(); 160 | }); 161 | 162 | 163 | }, 164 | 165 | hidePanel: function(){ 166 | $panel.addClass('slideup'); 167 | setTimeout(function(){ 168 | $panel.removeClass('slideup'); 169 | $('#atomuDatePicker_popup_wrap').removeClass('open'); 170 | $('#atomuDatePicker_popup_ctn').hide(); 171 | $('.atomu-mask').remove(); 172 | },350); 173 | } 174 | }; 175 | //popup 176 | //util.popup('atomuDatePicker_popup_btn', 'atomuDatePicker_popup_ctn', 'atomuDatePicker_popup_wrap'); 177 | util.popup(that.opts.triggerId, 'atomuDatePicker_popup_ctn', 'atomuDatePicker_popup_wrap'); 178 | //绑定向前翻月 179 | $('#atomuDatePicker_prev').unbind('click').bind('click', function(){ 180 | if(that.cursorMonth <= 0){ 181 | that.cursorYear--; 182 | that.cursorMonth = 11; 183 | } 184 | else{ 185 | that.cursorMonth--; 186 | } 187 | 188 | var tDate = new Date(new Date(that.cursorYear, that.cursorMonth, that.date).setMonth(that.cursorMonth)) 189 | 190 | 191 | that.fillDate(tDate.getFullYear(), tDate.getMonth()); 192 | $('#atomuDatePicker_current_month').html(that.formatDate([tDate.getFullYear(), tDate.getMonth()+1].join('-'), true)); 193 | that.init(); 194 | }); 195 | 196 | //绑定向后翻月 197 | $('#atomuDatePicker_next').unbind('click').bind('click', function(){ 198 | 199 | if(that.cursorMonth >= 11){ 200 | that.cursorYear++; 201 | that.cursorMonth = 0; 202 | } 203 | 204 | else{ 205 | that.cursorMonth++; 206 | } 207 | var tDate = new Date(new Date(that.cursorYear, that.cursorMonth, that.date).setMonth(that.cursorMonth)) 208 | 209 | that.fillDate(tDate.getFullYear(), tDate.getMonth()); 210 | $('#atomuDatePicker_current_month').html(that.formatDate([tDate.getFullYear(), tDate.getMonth()+1].join('-'), true)); 211 | that.init(); 212 | }); 213 | 214 | //取消 和 确定 的按钮事件binding 215 | $('#atomuDatePicker_cancel').unbind('click').bind('click', function(){ 216 | util.hidePanel(); 217 | }); 218 | 219 | $('#atomuDatePicker_submit').unbind('click').bind('click', function(){ 220 | util.hidePanel(); 221 | that.submit(); 222 | }); 223 | 224 | this.initCss(); //初始化选中样式 225 | 226 | } 227 | 228 | /** 229 | * 成功提交日期选择 230 | */ 231 | global.atomuDatePicker.prototype.submit = function(){ 232 | $('#atomuDatePicker_current_date').length > 0 && $('#atomuDatePicker_current_date').html(this.getCurrentDate(true)); 233 | this.opts.callback(this.getCurrentDate()); 234 | } 235 | 236 | /** 237 | * 构造日期选择面板，根据选择的日期 238 | * @param year 年份 239 | * @param month 月份 240 | * @param day 日 //用户传入默认选中日期的 241 | */ 242 | global.atomuDatePicker.prototype.fillDate = function(year, month, day){ 243 | $('#atomuDatePicker_panel').empty(); 244 | var that = this; 245 | //当月第一天 246 | var firstDayOfMonth = new Date(year, month, 1), dateBegin = new Date(year, month, 1); 247 | var w = dateBegin.getDay(); //获得星期几 248 | dateBegin.setDate(1 - w); 249 | 250 | //单月最后一天 251 | var lastDayOfMonth = new Date(year, month+1, 0), dateEnd = new Date(year, month+1, 0); 252 | w = dateEnd.getDay(); 253 | dateEnd.setDate(dateEnd.getDate() + 6 - w); 254 | 255 | var tr = document.createElement('tr'); 256 | // 构造日期面板 257 | for(var d=dateBegin; d.getTime()<=dateEnd.getTime();d.setDate(d.getDate() + 1)){ 258 | if(0 == d.getDay()){ 259 | //如果是周日，则新起一行 260 | tr = document.createElement('tr'); 261 | } 262 | //初始化日期格，并绑定点击事件 263 | td = document.createElement('td'); 264 | ymd = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(); 265 | $(td).attr('id', 'atomuDatePicker_'+ymd); 266 | 267 | 268 | //本周内的其他时间不可选 269 | if(d.getTime() < firstDayOfMonth.getTime() || d.getTime() > lastDayOfMonth.getTime()){ 270 | $(td).attr('class', this.opts.disableCss); 271 | } 272 | else if(this.opts.stopToday && d.getTime() > new Date().getTime()){ 273 | $(td).attr('class', this.opts.disableCss); 274 | } 275 | else{ 276 | //如果是单天则选中单天，如果是7天，则向前7天 277 | if(this.globalSetting.isSingleDay){ 278 | //给选中的单天增加选中样式 279 | if(this.opts.defaultDate !== ''){ 280 | if(d.getDate() == day && d.getMonth() == month && d.getFullYear() == year){ 281 | $(td).attr('class', that.opts.singleSelectedCss); 282 | } 283 | } 284 | else{ 285 | if(d.getDate() == that.date && d.getMonth()+1 == that.month && d.getFullYear() == that.year){ 286 | $(td).attr('class', that.opts.singleSelectedCss); 287 | } 288 | } 289 | 290 | } 291 | 292 | //给日期格子绑定点击事件 293 | (function(ymd){ 294 | $(td).bind('click', function(){ 295 | that.selectDate(ymd); 296 | return true; 297 | }); 298 | })(ymd); 299 | } 300 | 301 | 302 | //组织页面panel元素 303 | div = document.createElement('div'); 304 | $(div).attr('class', 'num').html(d.getDate()); 305 | $(td).append(div); 306 | $(tr).append(td); 307 | //周六，这一行已经完成 308 | if(6 == d.getDay()){ 309 | $('#atomuDatePicker_panel').append(tr); 310 | } 311 | 312 | } 313 | 314 | } 315 | 316 | 317 | /** 318 | * 样式初始化 319 | */ 320 | global.atomuDatePicker.prototype.initCss = function(){ 321 | var that = this; 322 | if(!this.globalSetting.isSingleDay){ 323 | $('.'+ that.opts.ctnCss +' table tr td').removeClass(that.opts.singleSelectedCss); 324 | var arr = that.startDate.split('-'); 325 | var dtt = new Date(arr[0], arr[1]*1 - 1, arr[2]); 326 | $('#atomuDatePicker_'+[that.year, that.month, that.date].join('-')).addClass(that.opts.lastCss); 327 | $('#atomuDatePicker_'+[dtt.getFullYear(), dtt.getMonth()+1, dtt.getDate()].join('-')).addClass(that.opts.firstCss); 328 | //中间的5天增加样式 329 | i=5; 330 | do{ 331 | var tmpDate = new Date(new Date(that.year, that.month-1, that.date).getTime() - i*24*60*60*1000); 332 | $('#atomuDatePicker_'+[tmpDate.getFullYear(), tmpDate.getMonth()+1, tmpDate.getDate()].join('-')).addClass(that.opts.selectCss); 333 | i--; 334 | }while(i>0); 335 | } 336 | else{ 337 | $('.'+ that.opts.ctnCss +' table tr td').removeClass(this.opts.selectCss).removeClass(this.opts.firstCss).removeClass(this.opts.lastCss); 338 | $('#atomuDatePicker_'+[that.year, that.month, that.date].join('-')).addClass(that.opts.singleSelectedCss); 339 | } 340 | 341 | } 342 | 343 | /** 344 | *选中日期后的操作集合，包括增加样式，调用回调函数等 345 | * @param ymd 日期串 如: 2014-12-04 346 | */ 347 | global.atomuDatePicker.prototype.selectDate = function(ymd){ 348 | 349 | var that = this; 350 | 351 | var ar = ymd.split('-'); 352 | var dt = new Date(ar[0], ar[1] - 1, ar[2]); 353 | 354 | 355 | this.year = dt.getFullYear(); 356 | this.month = dt.getMonth()+1; 357 | this.date = dt.getDate(); 358 | 359 | var startDate = new Date(dt.getTime() - 6*24*60*60*1000);//默认向前推7天 360 | this.startDate = this.formatDate([startDate.getFullYear(), startDate.getMonth()+1, startDate.getDate()].join('-')); 361 | 362 | if(this.globalSetting.isSingleDay){ 363 | //如果是单天 364 | $('.'+ that.opts.ctnCss +' table tr td').removeClass(this.opts.singleSelectedCss); 365 | $('#atomuDatePicker_'+ymd).addClass(this.opts.singleSelectedCss); 366 | } 367 | else{ 368 | //否则为7天 369 | $('.' + that.opts.ctnCss + ' table tr td').removeClass(this.opts.selectCss).removeClass(this.opts.firstCss).removeClass(this.opts.lastCss); 370 | $('#atomuDatePicker_'+ymd).addClass(this.opts.lastCss); 371 | $('#atomuDatePicker_'+[startDate.getFullYear(), startDate.getMonth()+1, startDate.getDate()].join('-')).addClass(this.opts.firstCss); 372 | //中间的5天增加样式 373 | i=5; 374 | do{ 375 | var tmpDate = new Date(dt.getTime() - i*24*60*60*1000); 376 | $('#atomuDatePicker_'+[tmpDate.getFullYear(), tmpDate.getMonth()+1, tmpDate.getDate()].join('-')).addClass(this.opts.selectCss); 377 | i--; 378 | }while(i>0); 379 | 380 | } 381 | 382 | // $('#atomuDatePicker_current_date').html(this.getCurrentDate(true)); 383 | 384 | // this.opts.callback && this.opts.callback(that.getCurrentDate()); 385 | if(this.opts.clickSubmit) { 386 | (function(){ 387 | $('.'+that.opts.ctnCss).addClass('slideup'); 388 | setTimeout(function(){ 389 | $('.'+that.opts.ctnCss).removeClass('slideup'); 390 | $('#atomuDatePicker_popup_wrap').removeClass('open'); 391 | $('#atomuDatePicker_popup_ctn').hide(); 392 | $('.atomu-mask').remove(); 393 | },350); 394 | })(); 395 | that.submit(); 396 | } 397 | 398 | } 399 | 400 | 401 | 402 | /* 403 | *格式化日期，增加前导0，入值：2014-12-2, 返回值：2014-12-02 404 | * @param ymd 时间串 405 | * @param isMonth 是否是月份的部分 406 | */ 407 | global.atomuDatePicker.prototype.formatDate = function(ymd, isMonth){ 408 | if(isMonth){ 409 | return ymd.replace(/(\d{4})\-(\d{1,2})/g, function(ym, y, m){ 410 | if(m<10){ 411 | m = '0'+m; 412 | } 413 | return y+'-'+m; 414 | }); 415 | } 416 | return ymd.replace(/(\d{4})\-(\d{1,2})\-(\d{1,2})/g, function(ymdFormatDate, y, m, d){ 417 | if(m < 10){ 418 | m = '0' + m; 419 | } 420 | if(d < 10){ 421 | d = '0' + d; 422 | } 423 | return y + '-' + m + '-' + d; 424 | }); 425 | 426 | } 427 | 428 | 429 | /** 430 | * 获取当前日期 431 | * @param isShow 是否是用来展示用的 432 | */ 433 | global.atomuDatePicker.prototype.getCurrentDate = function(isShow){ 434 | var that = this; 435 | var selectedDate = this.formatDate([this.year, this.month, this.date].join('-')); 436 | 437 | return this.globalSetting.isSingleDay ? selectedDate : function(){ 438 | return isShow ? that.startDate+' 至 '+selectedDate : {startDate:that.startDate, endDate:selectedDate}; 439 | }(); 440 | 441 | } 442 | 443 | 444 | })(this); -------------------------------------------------------------------------------- /Mobile_version/js/lib/fastclick.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @preserve FastClick: polyfill to remove click delays on browsers with touch UIs. 3 | * 4 | * @version 1.0.3 5 | * @codingstandard ftlabs-jsv2 6 | * @copyright The Financial Times Limited [All Rights Reserved] 7 | * @license MIT License (see LICENSE.txt) 8 | */ 9 | 10 | /*jslint browser:true, node:true*/ 11 | /*global define, Event, Node*/ 12 | 13 | 14 | /** 15 | * Instantiate fast-clicking listeners on the specified layer. 16 | * 17 | * @constructor 18 | * @param {Element} layer The layer to listen on 19 | * @param {Object} options The options to override the defaults 20 | */ 21 | function FastClick(layer, options) { 22 | 'use strict'; 23 | var oldOnClick; 24 | 25 | options = options || {}; 26 | 27 | /** 28 | * Whether a click is currently being tracked. 29 | * 30 | * @type boolean 31 | */ 32 | this.trackingClick = false; 33 | 34 | 35 | /** 36 | * Timestamp for when click tracking started. 37 | * 38 | * @type number 39 | */ 40 | this.trackingClickStart = 0; 41 | 42 | 43 | /** 44 | * The element being tracked for a click. 45 | * 46 | * @type EventTarget 47 | */ 48 | this.targetElement = null; 49 | 50 | 51 | /** 52 | * X-coordinate of touch start event. 53 | * 54 | * @type number 55 | */ 56 | this.touchStartX = 0; 57 | 58 | 59 | /** 60 | * Y-coordinate of touch start event. 61 | * 62 | * @type number 63 | */ 64 | this.touchStartY = 0; 65 | 66 | 67 | /** 68 | * ID of the last touch, retrieved from Touch.identifier. 69 | * 70 | * @type number 71 | */ 72 | this.lastTouchIdentifier = 0; 73 | 74 | 75 | /** 76 | * Touchmove boundary, beyond which a click will be cancelled. 77 | * 78 | * @type number 79 | */ 80 | this.touchBoundary = options.touchBoundary || 10; 81 | 82 | 83 | /** 84 | * The FastClick layer. 85 | * 86 | * @type Element 87 | */ 88 | this.layer = layer; 89 | 90 | /** 91 | * The minimum time between tap(touchstart and touchend) events 92 | * 93 | * @type number 94 | */ 95 | this.tapDelay = options.tapDelay || 200; 96 | 97 | if (FastClick.notNeeded(layer)) { 98 | return; 99 | } 100 | 101 | // Some old versions of Android don't have Function.prototype.bind 102 | function bind(method, context) { 103 | return function() { return method.apply(context, arguments); }; 104 | } 105 | 106 | 107 | var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']; 108 | var context = this; 109 | for (var i = 0, l = methods.length; i < l; i++) { 110 | context[methods[i]] = bind(context[methods[i]], context); 111 | } 112 | 113 | // Set up event handlers as required 114 | if (deviceIsAndroid) { 115 | layer.addEventListener('mouseover', this.onMouse, true); 116 | layer.addEventListener('mousedown', this.onMouse, true); 117 | layer.addEventListener('mouseup', this.onMouse, true); 118 | } 119 | 120 | layer.addEventListener('click', this.onClick, true); 121 | layer.addEventListener('touchstart', this.onTouchStart, false); 122 | layer.addEventListener('touchmove', this.onTouchMove, false); 123 | layer.addEventListener('touchend', this.onTouchEnd, false); 124 | layer.addEventListener('touchcancel', this.onTouchCancel, false); 125 | 126 | // Hack is required for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2) 127 | // which is how FastClick normally stops click events bubbling to callbacks registered on the FastClick 128 | // layer when they are cancelled. 129 | if (!Event.prototype.stopImmediatePropagation) { 130 | layer.removeEventListener = function(type, callback, capture) { 131 | var rmv = Node.prototype.removeEventListener; 132 | if (type === 'click') { 133 | rmv.call(layer, type, callback.hijacked || callback, capture); 134 | } else { 135 | rmv.call(layer, type, callback, capture); 136 | } 137 | }; 138 | 139 | layer.addEventListener = function(type, callback, capture) { 140 | var adv = Node.prototype.addEventListener; 141 | if (type === 'click') { 142 | adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) { 143 | if (!event.propagationStopped) { 144 | callback(event); 145 | } 146 | }), capture); 147 | } else { 148 | adv.call(layer, type, callback, capture); 149 | } 150 | }; 151 | } 152 | 153 | // If a handler is already declared in the element's onclick attribute, it will be fired before 154 | // FastClick's onClick handler. Fix this by pulling out the user-defined handler function and 155 | // adding it as listener. 156 | if (typeof layer.onclick === 'function') { 157 | 158 | // Android browser on at least 3.2 requires a new reference to the function in layer.onclick 159 | // - the old one won't work if passed to addEventListener directly. 160 | oldOnClick = layer.onclick; 161 | layer.addEventListener('click', function(event) { 162 | oldOnClick(event); 163 | }, false); 164 | layer.onclick = null; 165 | } 166 | } 167 | 168 | 169 | /** 170 | * Android requires exceptions. 171 | * 172 | * @type boolean 173 | */ 174 | var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0; 175 | 176 | 177 | /** 178 | * iOS requires exceptions. 179 | * 180 | * @type boolean 181 | */ 182 | var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent); 183 | 184 | 185 | /** 186 | * iOS 4 requires an exception for select elements. 187 | * 188 | * @type boolean 189 | */ 190 | var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent); 191 | 192 | 193 | /** 194 | * iOS 6.0(+?) requires the target element to be manually derived 195 | * 196 | * @type boolean 197 | */ 198 | var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS ([6-9]|\d{2})_\d/).test(navigator.userAgent); 199 | 200 | /** 201 | * BlackBerry requires exceptions. 202 | * 203 | * @type boolean 204 | */ 205 | var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0; 206 | 207 | /** 208 | * Determine whether a given element requires a native click. 209 | * 210 | * @param {EventTarget|Element} target Target DOM element 211 | * @returns {boolean} Returns true if the element needs a native click 212 | */ 213 | FastClick.prototype.needsClick = function(target) { 214 | 'use strict'; 215 | switch (target.nodeName.toLowerCase()) { 216 | 217 | // Don't send a synthetic click to disabled inputs (issue #62) 218 | case 'button': 219 | case 'select': 220 | case 'textarea': 221 | if (target.disabled) { 222 | return true; 223 | } 224 | 225 | break; 226 | case 'input': 227 | 228 | // File inputs need real clicks on iOS 6 due to a browser bug (issue #68) 229 | if ((deviceIsIOS && target.type === 'file') || target.disabled) { 230 | return true; 231 | } 232 | 233 | break; 234 | case 'label': 235 | case 'video': 236 | return true; 237 | } 238 | 239 | return (/\bneedsclick\b/).test(target.className); 240 | }; 241 | 242 | 243 | /** 244 | * Determine whether a given element requires a call to focus to simulate click into element. 245 | * 246 | * @param {EventTarget|Element} target Target DOM element 247 | * @returns {boolean} Returns true if the element requires a call to focus to simulate native click. 248 | */ 249 | FastClick.prototype.needsFocus = function(target) { 250 | 'use strict'; 251 | switch (target.nodeName.toLowerCase()) { 252 | case 'textarea': 253 | return true; 254 | case 'select': 255 | return !deviceIsAndroid; 256 | case 'input': 257 | switch (target.type) { 258 | case 'button': 259 | case 'checkbox': 260 | case 'file': 261 | case 'image': 262 | case 'radio': 263 | case 'submit': 264 | return false; 265 | } 266 | 267 | // No point in attempting to focus disabled inputs 268 | return !target.disabled && !target.readOnly; 269 | default: 270 | return (/\bneedsfocus\b/).test(target.className); 271 | } 272 | }; 273 | 274 | 275 | /** 276 | * Send a click event to the specified element. 277 | * 278 | * @param {EventTarget|Element} targetElement 279 | * @param {Event} event 280 | */ 281 | FastClick.prototype.sendClick = function(targetElement, event) { 282 | 'use strict'; 283 | var clickEvent, touch; 284 | 285 | // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24) 286 | if (document.activeElement && document.activeElement !== targetElement) { 287 | document.activeElement.blur(); 288 | } 289 | 290 | touch = event.changedTouches[0]; 291 | 292 | // Synthesise a click event, with an extra attribute so it can be tracked 293 | clickEvent = document.createEvent('MouseEvents'); 294 | clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); 295 | clickEvent.forwardedTouchEvent = true; 296 | targetElement.dispatchEvent(clickEvent); 297 | }; 298 | 299 | FastClick.prototype.determineEventType = function(targetElement) { 300 | 'use strict'; 301 | 302 | //Issue #159: Android Chrome Select Box does not open with a synthetic click event 303 | if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') { 304 | return 'mousedown'; 305 | } 306 | 307 | return 'click'; 308 | }; 309 | 310 | 311 | /** 312 | * @param {EventTarget|Element} targetElement 313 | */ 314 | FastClick.prototype.focus = function(targetElement) { 315 | 'use strict'; 316 | var length; 317 | 318 | // Issue #160: on iOS 7, some input elements (e.g. date datetime) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724. 319 | if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time') { 320 | length = targetElement.value.length; 321 | targetElement.setSelectionRange(length, length); 322 | } else { 323 | targetElement.focus(); 324 | } 325 | }; 326 | 327 | 328 | /** 329 | * Check whether the given target element is a child of a scrollable layer and if so, set a flag on it. 330 | * 331 | * @param {EventTarget|Element} targetElement 332 | */ 333 | FastClick.prototype.updateScrollParent = function(targetElement) { 334 | 'use strict'; 335 | var scrollParent, parentElement; 336 | 337 | scrollParent = targetElement.fastClickScrollParent; 338 | 339 | // Attempt to discover whether the target element is contained within a scrollable layer. Re-check if the 340 | // target element was moved to another parent. 341 | if (!scrollParent || !scrollParent.contains(targetElement)) { 342 | parentElement = targetElement; 343 | do { 344 | if (parentElement.scrollHeight > parentElement.offsetHeight) { 345 | scrollParent = parentElement; 346 | targetElement.fastClickScrollParent = parentElement; 347 | break; 348 | } 349 | 350 | parentElement = parentElement.parentElement; 351 | } while (parentElement); 352 | } 353 | 354 | // Always update the scroll top tracker if possible. 355 | if (scrollParent) { 356 | scrollParent.fastClickLastScrollTop = scrollParent.scrollTop; 357 | } 358 | }; 359 | 360 | 361 | /** 362 | * @param {EventTarget} targetElement 363 | * @returns {Element|EventTarget} 364 | */ 365 | FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget) { 366 | 'use strict'; 367 | 368 | // On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node. 369 | if (eventTarget.nodeType === Node.TEXT_NODE) { 370 | return eventTarget.parentNode; 371 | } 372 | 373 | return eventTarget; 374 | }; 375 | 376 | 377 | /** 378 | * On touch start, record the position and scroll offset. 379 | * 380 | * @param {Event} event 381 | * @returns {boolean} 382 | */ 383 | FastClick.prototype.onTouchStart = function(event) { 384 | 'use strict'; 385 | var targetElement, touch, selection; 386 | 387 | // Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111). 388 | if (event.targetTouches.length > 1) { 389 | return true; 390 | } 391 | 392 | targetElement = this.getTargetElementFromEventTarget(event.target); 393 | touch = event.targetTouches[0]; 394 | 395 | if (deviceIsIOS) { 396 | 397 | // Only trusted events will deselect text on iOS (issue #49) 398 | selection = window.getSelection(); 399 | if (selection.rangeCount && !selection.isCollapsed) { 400 | return true; 401 | } 402 | 403 | if (!deviceIsIOS4) { 404 | 405 | // Weird things happen on iOS when an alert or confirm dialog is opened from a click event callback (issue #23): 406 | // when the user next taps anywhere else on the page, new touchstart and touchend events are dispatched 407 | // with the same identifier as the touch event that previously triggered the click that triggered the alert. 408 | // Sadly, there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an 409 | // immediately preceeding touch event (issue #52), so this fix is unavailable on that platform. 410 | // Issue 120: touch.identifier is 0 when Chrome dev tools 'Emulate touch events' is set with an iOS device UA string, 411 | // which causes all touch events to be ignored. As this block only applies to iOS, and iOS identifiers are always long, 412 | // random integers, it's safe to to continue if the identifier is 0 here. 413 | if (touch.identifier && touch.identifier === this.lastTouchIdentifier) { 414 | event.preventDefault(); 415 | return false; 416 | } 417 | 418 | this.lastTouchIdentifier = touch.identifier; 419 | 420 | // If the target element is a child of a scrollable layer (using -webkit-overflow-scrolling: touch) and: 421 | // 1) the user does a fling scroll on the scrollable layer 422 | // 2) the user stops the fling scroll with another tap 423 | // then the event.target of the last 'touchend' event will be the element that was under the user's finger 424 | // when the fling scroll was started, causing FastClick to send a click event to that layer - unless a check 425 | // is made to ensure that a parent layer was not scrolled before sending a synthetic click (issue #42). 426 | this.updateScrollParent(targetElement); 427 | } 428 | } 429 | 430 | this.trackingClick = true; 431 | this.trackingClickStart = event.timeStamp; 432 | this.targetElement = targetElement; 433 | 434 | this.touchStartX = touch.pageX; 435 | this.touchStartY = touch.pageY; 436 | 437 | // Prevent phantom clicks on fast double-tap (issue #36) 438 | if ((event.timeStamp - this.lastClickTime) < this.tapDelay) { 439 | event.preventDefault(); 440 | } 441 | 442 | return true; 443 | }; 444 | 445 | 446 | /** 447 | * Based on a touchmove event object, check whether the touch has moved past a boundary since it started. 448 | * 449 | * @param {Event} event 450 | * @returns {boolean} 451 | */ 452 | FastClick.prototype.touchHasMoved = function(event) { 453 | 'use strict'; 454 | var touch = event.changedTouches[0], boundary = this.touchBoundary; 455 | 456 | if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) { 457 | return true; 458 | } 459 | 460 | return false; 461 | }; 462 | 463 | 464 | /** 465 | * Update the last position. 466 | * 467 | * @param {Event} event 468 | * @returns {boolean} 469 | */ 470 | FastClick.prototype.onTouchMove = function(event) { 471 | 'use strict'; 472 | if (!this.trackingClick) { 473 | return true; 474 | } 475 | 476 | // If the touch has moved, cancel the click tracking 477 | if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) { 478 | this.trackingClick = false; 479 | this.targetElement = null; 480 | } 481 | 482 | return true; 483 | }; 484 | 485 | 486 | /** 487 | * Attempt to find the labelled control for the given label element. 488 | * 489 | * @param {EventTarget|HTMLLabelElement} labelElement 490 | * @returns {Element|null} 491 | */ 492 | FastClick.prototype.findControl = function(labelElement) { 493 | 'use strict'; 494 | 495 | // Fast path for newer browsers supporting the HTML5 control attribute 496 | if (labelElement.control !== undefined) { 497 | return labelElement.control; 498 | } 499 | 500 | // All browsers under test that support touch events also support the HTML5 htmlFor attribute 501 | if (labelElement.htmlFor) { 502 | return document.getElementById(labelElement.htmlFor); 503 | } 504 | 505 | // If no for attribute exists, attempt to retrieve the first labellable descendant element 506 | // the list of which is defined here: http://www.w3.org/TR/html5/forms.html#category-label 507 | return labelElement.querySelector('button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea'); 508 | }; 509 | 510 | 511 | /** 512 | * On touch end, determine whether to send a click event at once. 513 | * 514 | * @param {Event} event 515 | * @returns {boolean} 516 | */ 517 | FastClick.prototype.onTouchEnd = function(event) { 518 | 'use strict'; 519 | var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement; 520 | 521 | if (!this.trackingClick) { 522 | return true; 523 | } 524 | 525 | // Prevent phantom clicks on fast double-tap (issue #36) 526 | if ((event.timeStamp - this.lastClickTime) < this.tapDelay) { 527 | this.cancelNextClick = true; 528 | return true; 529 | } 530 | 531 | // Reset to prevent wrong click cancel on input (issue #156). 532 | this.cancelNextClick = false; 533 | 534 | this.lastClickTime = event.timeStamp; 535 | 536 | trackingClickStart = this.trackingClickStart; 537 | this.trackingClick = false; 538 | this.trackingClickStart = 0; 539 | 540 | // On some iOS devices, the targetElement supplied with the event is invalid if the layer 541 | // is performing a transition or scroll, and has to be re-detected manually. Note that 542 | // for this to function correctly, it must be called *after* the event target is checked! 543 | // See issue #57; also filed as rdar://13048589 . 544 | if (deviceIsIOSWithBadTarget) { 545 | touch = event.changedTouches[0]; 546 | 547 | // In certain cases arguments of elementFromPoint can be negative, so prevent setting targetElement to null 548 | targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement; 549 | targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent; 550 | } 551 | 552 | targetTagName = targetElement.tagName.toLowerCase(); 553 | if (targetTagName === 'label') { 554 | forElement = this.findControl(targetElement); 555 | if (forElement) { 556 | this.focus(targetElement); 557 | if (deviceIsAndroid) { 558 | return false; 559 | } 560 | 561 | targetElement = forElement; 562 | } 563 | } else if (this.needsFocus(targetElement)) { 564 | 565 | // Case 1: If the touch started a while ago (best guess is 100ms based on tests for issue #36) then focus will be triggered anyway. Return early and unset the target element reference so that the subsequent click will be allowed through. 566 | // Case 2: Without this exception for input elements tapped when the document is contained in an iframe, then any inputted text won't be visible even though the value attribute is updated as the user types (issue #37). 567 | if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) { 568 | this.targetElement = null; 569 | return false; 570 | } 571 | 572 | this.focus(targetElement); 573 | this.sendClick(targetElement, event); 574 | 575 | // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open. 576 | // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others) 577 | if (!deviceIsIOS || targetTagName !== 'select') { 578 | this.targetElement = null; 579 | event.preventDefault(); 580 | } 581 | 582 | return false; 583 | } 584 | 585 | if (deviceIsIOS && !deviceIsIOS4) { 586 | 587 | // Don't send a synthetic click event if the target element is contained within a parent layer that was scrolled 588 | // and this tap is being used to stop the scrolling (usually initiated by a fling - issue #42). 589 | scrollParent = targetElement.fastClickScrollParent; 590 | if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) { 591 | return true; 592 | } 593 | } 594 | 595 | // Prevent the actual click from going though - unless the target node is marked as requiring 596 | // real clicks or if it is in the whitelist in which case only non-programmatic clicks are permitted. 597 | if (!this.needsClick(targetElement)) { 598 | event.preventDefault(); 599 | this.sendClick(targetElement, event); 600 | } 601 | 602 | return false; 603 | }; 604 | 605 | 606 | /** 607 | * On touch cancel, stop tracking the click. 608 | * 609 | * @returns {void} 610 | */ 611 | FastClick.prototype.onTouchCancel = function() { 612 | 'use strict'; 613 | this.trackingClick = false; 614 | this.targetElement = null; 615 | }; 616 | 617 | 618 | /** 619 | * Determine mouse events which should be permitted. 620 | * 621 | * @param {Event} event 622 | * @returns {boolean} 623 | */ 624 | FastClick.prototype.onMouse = function(event) { 625 | 'use strict'; 626 | 627 | // If a target element was never set (because a touch event was never fired) allow the event 628 | if (!this.targetElement) { 629 | return true; 630 | } 631 | 632 | if (event.forwardedTouchEvent) { 633 | return true; 634 | } 635 | 636 | // Programmatically generated events targeting a specific element should be permitted 637 | if (!event.cancelable) { 638 | return true; 639 | } 640 | 641 | // Derive and check the target element to see whether the mouse event needs to be permitted; 642 | // unless explicitly enabled, prevent non-touch click events from triggering actions, 643 | // to prevent ghost/doubleclicks. 644 | if (!this.needsClick(this.targetElement) || this.cancelNextClick) { 645 | 646 | // Prevent any user-added listeners declared on FastClick element from being fired. 647 | if (event.stopImmediatePropagation) { 648 | event.stopImmediatePropagation(); 649 | } else { 650 | 651 | // Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2) 652 | event.propagationStopped = true; 653 | } 654 | 655 | // Cancel the event 656 | event.stopPropagation(); 657 | event.preventDefault(); 658 | 659 | return false; 660 | } 661 | 662 | // If the mouse event is permitted, return true for the action to go through. 663 | return true; 664 | }; 665 | 666 | 667 | /** 668 | * On actual clicks, determine whether this is a touch-generated click, a click action occurring 669 | * naturally after a delay after a touch (which needs to be cancelled to avoid duplication), or 670 | * an actual click which should be permitted. 671 | * 672 | * @param {Event} event 673 | * @returns {boolean} 674 | */ 675 | FastClick.prototype.onClick = function(event) { 676 | 'use strict'; 677 | var permitted; 678 | 679 | // It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early. 680 | if (this.trackingClick) { 681 | this.targetElement = null; 682 | this.trackingClick = false; 683 | return true; 684 | } 685 | 686 | // Very odd behaviour on iOS (issue #18): if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target. 687 | if (event.target.type === 'submit' && event.detail === 0) { 688 | return true; 689 | } 690 | 691 | permitted = this.onMouse(event); 692 | 693 | // Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through. 694 | if (!permitted) { 695 | this.targetElement = null; 696 | } 697 | 698 | // If clicks are permitted, return true for the action to go through. 699 | return permitted; 700 | }; 701 | 702 | 703 | /** 704 | * Remove all FastClick's event listeners. 705 | * 706 | * @returns {void} 707 | */ 708 | FastClick.prototype.destroy = function() { 709 | 'use strict'; 710 | var layer = this.layer; 711 | 712 | if (deviceIsAndroid) { 713 | layer.removeEventListener('mouseover', this.onMouse, true); 714 | layer.removeEventListener('mousedown', this.onMouse, true); 715 | layer.removeEventListener('mouseup', this.onMouse, true); 716 | } 717 | 718 | layer.removeEventListener('click', this.onClick, true); 719 | layer.removeEventListener('touchstart', this.onTouchStart, false); 720 | layer.removeEventListener('touchmove', this.onTouchMove, false); 721 | layer.removeEventListener('touchend', this.onTouchEnd, false); 722 | layer.removeEventListener('touchcancel', this.onTouchCancel, false); 723 | }; 724 | 725 | 726 | /** 727 | * Check whether FastClick is needed. 728 | * 729 | * @param {Element} layer The layer to listen on 730 | */ 731 | FastClick.notNeeded = function(layer) { 732 | 'use strict'; 733 | var metaViewport; 734 | var chromeVersion; 735 | var blackberryVersion; 736 | 737 | // Devices that don't support touch don't need FastClick 738 | if (typeof window.ontouchstart === 'undefined') { 739 | return true; 740 | } 741 | 742 | // Chrome version - zero for other browsers 743 | chromeVersion = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [,0])[1]; 744 | 745 | if (chromeVersion) { 746 | 747 | if (deviceIsAndroid) { 748 | metaViewport = document.querySelector('meta[name=viewport]'); 749 | 750 | if (metaViewport) { 751 | // Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89) 752 | if (metaViewport.content.indexOf('user-scalable=no') !== -1) { 753 | return true; 754 | } 755 | // Chrome 32 and above with width=device-width or less don't need FastClick 756 | if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) { 757 | return true; 758 | } 759 | } 760 | 761 | // Chrome desktop doesn't need FastClick (issue #15) 762 | } else { 763 | return true; 764 | } 765 | } 766 | 767 | if (deviceIsBlackBerry10) { 768 | blackberryVersion = navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/); 769 | 770 | // BlackBerry 10.3+ does not require Fastclick library. 771 | // https://github.com/ftlabs/fastclick/issues/251 772 | if (blackberryVersion[1] >= 10 && blackberryVersion[2] >= 3) { 773 | metaViewport = document.querySelector('meta[name=viewport]'); 774 | 775 | if (metaViewport) { 776 | // user-scalable=no eliminates click delay. 777 | if (metaViewport.content.indexOf('user-scalable=no') !== -1) { 778 | return true; 779 | } 780 | // width=device-width (or less than device-width) eliminates click delay. 781 | if (document.documentElement.scrollWidth <= window.outerWidth) { 782 | return true; 783 | } 784 | } 785 | } 786 | } 787 | 788 | // IE10 with -ms-touch-action: none, which disables double-tap-to-zoom (issue #97) 789 | if (layer.style.msTouchAction === 'none') { 790 | return true; 791 | } 792 | 793 | return false; 794 | }; 795 | 796 | 797 | /** 798 | * Factory method for creating a FastClick object 799 | * 800 | * @param {Element} layer The layer to listen on 801 | * @param {Object} options The options to override the defaults 802 | */ 803 | FastClick.attach = function(layer, options) { 804 | 'use strict'; 805 | return new FastClick(layer, options); 806 | }; 807 | 808 | 809 | if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) { 810 | 811 | // AMD. Register as an anonymous module. 812 | define(function() { 813 | 'use strict'; 814 | return FastClick; 815 | }); 816 | } else if (typeof module !== 'undefined' && module.exports) { 817 | module.exports = FastClick.attach; 818 | module.exports.FastClick = FastClick; 819 | } else { 820 | window.FastClick = FastClick; 821 | } 822 | -------------------------------------------------------------------------------- /Mobile_version/js/zepto.min.js: -------------------------------------------------------------------------------- 1 | /* Zepto v1.1.4 - zepto event ajax form ie - zeptojs.com/license */ 2 | var Zepto=function(){function L(t){return null==t?String(t):j[S.call(t)]||"object"}function Z(t){return"function"==L(t)}function $(t){return null!=t&&t==t.window}function _(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function D(t){return"object"==L(t)}function R(t){return D(t)&&!$(t)&&Object.getPrototypeOf(t)==Object.prototype}function M(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in f?f[t]:f[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||c[F(t)]?e:e+"px"}function I(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function V(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function B(n,i,r){for(e in i)r&&(R(i[e])||A(i[e]))?(R(i[e])&&!R(n[e])&&(n[e]={}),A(i[e])&&!A(n[e])&&(n[e]=[]),B(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function U(t,e){return null==e?n(t):n(t).filter(e)}function J(t,e,n,i){return Z(e)?e.call(t,n,i):e}function X(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function W(e,n){var i=e.className,r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function Y(t){var e;try{return t?"true"==t||("false"==t?!1:"null"==t?null:/^0/.test(t)||isNaN(e=Number(t))?/^[\[\{]/.test(t)?n.parseJSON(t):t:e):t}catch(i){return t}}function G(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)G(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},f={},c={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),x=a.createElement("tr"),b={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:x,th:x,"*":a.createElement("div")},w=/complete|loaded|interactive/,E=/^[\w-]*$/,j={},S=j.toString,T={},O=a.createElement("div"),P={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},A=Array.isArray||function(t){return t instanceof Array};return T.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=O).appendChild(t),i=~T.qsa(r,e).indexOf(t),o&&O.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},T.fragment=function(e,i,r){var s,u,f;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1>")),i===t&&(i=l.test(e)&&RegExp.$1),i in b||(i="*"),f=b[i],f.innerHTML=""+e,s=n.each(o.call(f.childNodes),function(){f.removeChild(this)})),R(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},T.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},T.isZ=function(t){return t instanceof T.Z},T.init=function(e,i){var r;if(!e)return T.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=T.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}else{if(Z(e))return n(a).ready(e);if(T.isZ(e))return e;if(A(e))r=k(e);else if(D(e))r=[e],e=null;else if(l.test(e))r=T.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}}return T.Z(r,e)},n=function(t,e){return T.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){B(t,n,e)}),t},T.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return _(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=L,n.isFunction=Z,n.isWindow=$,n.isArray=A,n.isPlainObject=R,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if(M(t))for(r=0;r=0?e:e+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return r.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return Z(t)?this.not(this.not(t)):n(s.call(this,function(e){return T.matches(e,t)}))},add:function(t,e){return n(N(this.concat(n(t,e))))},is:function(t){return this.length>0&&T.matches(this[0],t)},not:function(e){var i=[];if(Z(e)&&e.call!==t)this.each(function(t){e.call(this,t)||i.push(this)});else{var r="string"==typeof e?this.filter(e):M(e)&&Z(e.item)?o.call(e):n(e);this.forEach(function(t){r.indexOf(t)<0&&i.push(t)})}return n(i)},has:function(t){return this.filter(function(){return D(t)?n.contains(this,t):n(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!D(t)?t:n(t)},last:function(){var t=this[this.length-1];return t&&!D(t)?t:n(t)},find:function(t){var e,i=this;return e=t?"object"==typeof t?n(t).filter(function(){var t=this;return r.some.call(i,function(e){return n.contains(e,t)})}):1==this.length?n(T.qsa(this[0],t)):this.map(function(){return T.qsa(this,t)}):[]},closest:function(t,e){var i=this[0],r=!1;for("object"==typeof t&&(r=n(t));i&&!(r?r.indexOf(i)>=0:T.matches(i,t));)i=i!==e&&!_(i)&&i.parentNode;return n(i)},parents:function(t){for(var e=[],i=this;i.length>0;)i=n.map(i,function(t){return(t=t.parentNode)&&!_(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return U(e,t)},parent:function(t){return U(N(this.pluck("parentNode")),t)},children:function(t){return U(this.map(function(){return V(this)}),t)},contents:function(){return this.map(function(){return o.call(this.childNodes)})},siblings:function(t){return U(this.map(function(t,e){return s.call(V(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return n.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=I(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var e=Z(t);if(this[0]&&!e)var i=n(t).get(0),r=i.parentNode||this.length>1;return this.each(function(o){n(this).wrapAll(e?t.call(this,o):r?i.cloneNode(!0):i)})},wrapAll:function(t){if(this[0]){n(this[0]).before(t=n(t));for(var e;(e=t.children()).length;)t=e.first();n(t).append(this)}return this},wrapInner:function(t){var e=Z(t);return this.each(function(i){var r=n(this),o=r.contents(),s=e?t.call(this,i):t;o.length?o.wrapAll(s):r.append(s)})},unwrap:function(){return this.parent().each(function(){n(this).replaceWith(n(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(e){return this.each(function(){var i=n(this);(e===t?"none"==i.css("display"):e)?i.show():i.hide()})},prev:function(t){return n(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return n(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var i=this.innerHTML;n(this).empty().append(J(this,t,e,i))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=J(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this[0].textContent:null},attr:function(n,i){var r;return"string"!=typeof n||1 in arguments?this.each(function(t){if(1===this.nodeType)if(D(n))for(e in n)X(this,e,n[e]);else X(this,n,J(this,i,t,this.getAttribute(n)))}):this.length&&1===this[0].nodeType?!(r=this[0].getAttribute(n))&&n in this[0]?this[0][n]:r:t},removeAttr:function(t){return this.each(function(){1===this.nodeType&&X(this,t)})},prop:function(t,e){return t=P[t]||t,1 in arguments?this.each(function(n){this[t]=J(this,e,n,this[t])}):this[0]&&this[0][t]},data:function(e,n){var i="data-"+e.replace(m,"-$1").toLowerCase(),r=1 in arguments?this.attr(i,n):this.attr(i);return null!==r?Y(r):t},val:function(t){return 0 in arguments?this.each(function(e){this.value=J(this,t,e,this.value)}):this[0]&&(this[0].multiple?n(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var i=n(this),r=J(this,t,e,i.offset()),o=i.offsetParent().offset(),s={top:r.top-o.top,left:r.left-o.left};"static"==i.css("position")&&(s.position="relative"),i.css(s)});if(!this.length)return null;var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}},css:function(t,i){if(arguments.length<2){var r=this[0],o=getComputedStyle(r,"");if(!r)return;if("string"==typeof t)return r.style[C(t)]||o.getPropertyValue(t);if(A(t)){var s={};return n.each(A(t)?t:[t],function(t,e){s[e]=r.style[C(e)]||o.getPropertyValue(e)}),s}}var a="";if("string"==L(t))i||0===i?a=F(t)+":"+H(t,i):this.each(function(){this.style.removeProperty(F(t))});else for(e in t)t[e]||0===t[e]?a+=F(e)+":"+H(e,t[e])+";":this.each(function(){this.style.removeProperty(F(e))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(n(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?r.some.call(this,function(t){return this.test(W(t))},q(t)):!1},addClass:function(t){return t?this.each(function(e){i=[];var r=W(this),o=J(this,t,e,r);o.split(/\s+/g).forEach(function(t){n(this).hasClass(t)||i.push(t)},this),i.length&&W(this,r+(r?" ":"")+i.join(" "))}):this},removeClass:function(e){return this.each(function(n){return e===t?W(this,""):(i=W(this),J(this,e,n,i).split(/\s+/g).forEach(function(t){i=i.replace(q(t)," ")}),void W(this,i.trim()))})},toggleClass:function(e,i){return e?this.each(function(r){var o=n(this),s=J(this,e,r,W(this));s.split(/\s+/g).forEach(function(e){(i===t?!o.hasClass(e):i)?o.addClass(e):o.removeClass(e)})}):this},scrollTop:function(e){if(this.length){var n="scrollTop"in this[0];return e===t?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=e}:function(){this.scrollTo(this.scrollX,e)})}},scrollLeft:function(e){if(this.length){var n="scrollLeft"in this[0];return e===t?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=e}:function(){this.scrollTo(e,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),i=this.offset(),r=d.test(e[0].nodeName)?{top:0,left:0}:e.offset();return i.top-=parseFloat(n(t).css("margin-top"))||0,i.left-=parseFloat(n(t).css("margin-left"))||0,r.top+=parseFloat(n(e[0]).css("border-top-width"))||0,r.left+=parseFloat(n(e[0]).css("border-left-width"))||0,{top:i.top-r.top,left:i.left-r.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||a.body;t&&!d.test(t.nodeName)&&"static"==n(t).css("position");)t=t.offsetParent;return t})}},n.fn.detach=n.fn.remove,["width","height"].forEach(function(e){var i=e.replace(/./,function(t){return t[0].toUpperCase()});n.fn[e]=function(r){var o,s=this[0];return r===t?$(s)?s["inner"+i]:_(s)?s.documentElement["scroll"+i]:(o=this.offset())&&o[e]:this.each(function(t){s=n(this),s.css(e,J(this,r,t,s[e]()))})}}),v.forEach(function(t,e){var i=e%2;n.fn[t]=function(){var t,o,r=n.map(arguments,function(e){return t=L(e),"object"==t||"array"==t||null==e?e:T.fragment(e)}),s=this.length>1;return r.length<1?this:this.each(function(t,u){o=i?u:u.parentNode,u=0==e?u.nextSibling:1==e?u.firstChild:2==e?u:null;var f=n.contains(a.documentElement,o);r.forEach(function(t){if(s)t=t.cloneNode(!0);else if(!o)return n(t).remove();o.insertBefore(t,u),f&&G(t,function(t){null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)})})})},n.fn[i?t+"To":"insert"+(e?"Before":"After")]=function(e){return n(e)[t](this),this}}),T.Z.prototype=n.fn,T.uniq=N,T.deserializeValue=Y,n.zepto=T,n}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function l(t){return t._zid||(t._zid=e++)}function h(t,e,n,i){if(e=p(e),e.ns)var r=d(e.ns);return(s[l(t)]||[]).filter(function(t){return!(!t||e.e&&t.e!=e.e||e.ns&&!r.test(t.ns)||n&&l(t.fn)!==l(n)||i&&t.sel!=i)})}function p(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function d(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function m(t,e){return t.del&&!u&&t.e in f||!!e}function g(t){return c[t]||u&&f[t]||t}function v(e,i,r,o,a,u,f){var h=l(e),d=s[h]||(s[h]=[]);i.split(/\s/).forEach(function(i){if("ready"==i)return t(document).ready(r);var s=p(i);s.fn=r,s.sel=a,s.e in c&&(r=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?s.fn.apply(this,arguments):void 0}),s.del=u;var l=u||r;s.proxy=function(t){if(t=j(t),!t.isImmediatePropagationStopped()){t.data=o;var i=l.apply(e,t._args==n?[t]:[t].concat(t._args));return i===!1&&(t.preventDefault(),t.stopPropagation()),i}},s.i=d.length,d.push(s),"addEventListener"in e&&e.addEventListener(g(s.e),s.proxy,m(s,f))})}function y(t,e,n,i,r){var o=l(t);(e||"").split(/\s/).forEach(function(e){h(t,e,n,i).forEach(function(e){delete s[o][e.i],"removeEventListener"in t&&t.removeEventListener(g(e.e),e.proxy,m(e,r))})})}function j(e,i){return(i||!e.isDefaultPrevented)&&(i||(i=e),t.each(E,function(t,n){var r=i[t];e[t]=function(){return this[n]=x,r&&r.apply(i,arguments)},e[n]=b}),(i.defaultPrevented!==n?i.defaultPrevented:"returnValue"in i?i.returnValue===!1:i.getPreventDefault&&i.getPreventDefault())&&(e.isDefaultPrevented=x)),e}function S(t){var e,i={originalEvent:t};for(e in t)w.test(e)||t[e]===n||(i[e]=t[e]);return j(i,t)}var n,e=1,i=Array.prototype.slice,r=t.isFunction,o=function(t){return"string"==typeof t},s={},a={},u="onfocusin"in window,f={focus:"focusin",blur:"focusout"},c={mouseenter:"mouseover",mouseleave:"mouseout"};a.click=a.mousedown=a.mouseup=a.mousemove="MouseEvents",t.event={add:v,remove:y},t.proxy=function(e,n){var s=2 in arguments&&i.call(arguments,2);if(r(e)){var a=function(){return e.apply(n,s?s.concat(i.call(arguments)):arguments)};return a._zid=l(e),a}if(o(n))return s?(s.unshift(e[n],e),t.proxy.apply(null,s)):t.proxy(e[n],e);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,i){return this.on(t,e,n,i,1)};var x=function(){return!0},b=function(){return!1},w=/^([A-Z]|returnValue$|layer[XY]$)/,E={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,s,a,u,f){var c,l,h=this;return e&&!o(e)?(t.each(e,function(t,e){h.on(t,s,a,e,f)}),h):(o(s)||r(u)||u===!1||(u=a,a=s,s=n),(r(a)||a===!1)&&(u=a,a=n),u===!1&&(u=b),h.each(function(n,r){f&&(c=function(t){return y(r,t.type,u),u.apply(this,arguments)}),s&&(l=function(e){var n,o=t(e.target).closest(s,r).get(0);return o&&o!==r?(n=t.extend(S(e),{currentTarget:o,liveFired:r}),(c||u).apply(o,[n].concat(i.call(arguments,1)))):void 0}),v(r,e,u,a,s,l||c)}))},t.fn.off=function(e,i,s){var a=this;return e&&!o(e)?(t.each(e,function(t,e){a.off(t,i,e)}),a):(o(i)||r(s)||s===!1||(s=i,i=n),s===!1&&(s=b),a.each(function(){y(this,e,s,i)}))},t.fn.trigger=function(e,n){return e=o(e)||t.isPlainObject(e)?t.Event(e):j(e),e._args=n,this.each(function(){"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,n){var i,r;return this.each(function(s,a){i=S(o(e)?t.Event(e):e),i._args=n,i.target=a,t.each(h(a,e.type||e),function(t,e){return r=e.proxy(i),i.isImmediatePropagationStopped()?!1:void 0})}),r},"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return t?this.bind(e,t):this.trigger(e)}}),["focus","blur"].forEach(function(e){t.fn[e]=function(t){return t?this.bind(e,t):this.each(function(){try{this[e]()}catch(t){}}),this}}),t.Event=function(t,e){o(t)||(e=t,t=e.type);var n=document.createEvent(a[t]||"Events"),i=!0;if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];return n.initEvent(t,i,!0),j(n)}}(Zepto),function(t){function l(e,n,i){var r=t.Event(n);return t(e).trigger(r,i),!r.isDefaultPrevented()}function h(t,e,i,r){return t.global?l(e||n,i,r):void 0}function p(e){e.global&&0===t.active++&&h(e,null,"ajaxStart")}function d(e){e.global&&!--t.active&&h(e,null,"ajaxStop")}function m(t,e){var n=e.context;return e.beforeSend.call(n,t,e)===!1||h(e,n,"ajaxBeforeSend",[t,e])===!1?!1:void h(e,n,"ajaxSend",[t,e])}function g(t,e,n,i){var r=n.context,o="success";n.success.call(r,t,o,e),i&&i.resolveWith(r,[t,o,e]),h(n,r,"ajaxSuccess",[e,n,t]),y(o,e,n)}function v(t,e,n,i,r){var o=i.context;i.error.call(o,n,e,t),r&&r.rejectWith(o,[n,e,t]),h(i,o,"ajaxError",[n,i,t||e]),y(e,n,i)}function y(t,e,n){var i=n.context;n.complete.call(i,e,t),h(n,i,"ajaxComplete",[e,n]),d(n)}function x(){}function b(t){return t&&(t=t.split(";",2)[0]),t&&(t==f?"html":t==u?"json":s.test(t)?"script":a.test(t)&&"xml")||"text"}function w(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function E(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=w(e.url,e.data),e.data=void 0)}function j(e,n,i,r){return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{url:e,data:n,success:i,dataType:r}}function T(e,n,i,r){var o,s=t.isArray(n),a=t.isPlainObject(n);t.each(n,function(n,u){o=t.type(u),r&&(n=i?r:r+"["+(a||"object"==o||"array"==o?n:"")+"]"),!r&&s?e.add(u.name,u.value):"array"==o||!i&&"object"==o?T(e,u,i,n):e.add(n,u)})}var i,r,e=0,n=window.document,o=/)<[^<]*)*<\/script>/gi,s=/^(?:text|application)\/javascript/i,a=/^(?:text|application)\/xml/i,u="application/json",f="text/html",c=/^\s*$/;t.active=0,t.ajaxJSONP=function(i,r){if(!("type"in i))return t.ajax(i);var f,h,o=i.jsonpCallback,s=(t.isFunction(o)?o():o)||"jsonp"+ ++e,a=n.createElement("script"),u=window[s],c=function(e){t(a).triggerHandler("error",e||"abort")},l={abort:c};return r&&r.promise(l),t(a).on("load error",function(e,n){clearTimeout(h),t(a).off().remove(),"error"!=e.type&&f?g(f[0],l,i,r):v(null,n||"error",l,i,r),window[s]=u,f&&t.isFunction(u)&&u(f[0]),u=f=void 0}),m(l,i)===!1?(c("abort"),l):(window[s]=function(){f=arguments},a.src=i.url.replace(/\?(.+)=\?/,"?$1="+s),n.head.appendChild(a),i.timeout>0&&(h=setTimeout(function(){c("timeout")},i.timeout)),l)},t.ajaxSettings={type:"GET",beforeSend:x,success:x,error:x,complete:x,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:u,xml:"application/xml, text/xml",html:f,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var n=t.extend({},e||{}),o=t.Deferred&&t.Deferred();for(i in t.ajaxSettings)void 0===n[i]&&(n[i]=t.ajaxSettings[i]);p(n),n.crossDomain||(n.crossDomain=/^([\w-]+:)?\/\/([^\/]+)/.test(n.url)&&RegExp.$2!=window.location.host),n.url||(n.url=window.location.toString()),E(n);var s=n.dataType,a=/\?.+=\?/.test(n.url);if(a&&(s="jsonp"),n.cache!==!1&&(e&&e.cache===!0||"script"!=s&&"jsonp"!=s)||(n.url=w(n.url,"_="+Date.now())),"jsonp"==s)return a||(n.url=w(n.url,n.jsonp?n.jsonp+"=?":n.jsonp===!1?"":"callback=?")),t.ajaxJSONP(n,o);var j,u=n.accepts[s],f={},l=function(t,e){f[t.toLowerCase()]=[t,e]},h=/^([\w-]+:)\/\//.test(n.url)?RegExp.$1:window.location.protocol,d=n.xhr(),y=d.setRequestHeader;if(o&&o.promise(d),n.crossDomain||l("X-Requested-With","XMLHttpRequest"),l("Accept",u||"*/*"),(u=n.mimeType||u)&&(u.indexOf(",")>-1&&(u=u.split(",",2)[0]),d.overrideMimeType&&d.overrideMimeType(u)),(n.contentType||n.contentType!==!1&&n.data&&"GET"!=n.type.toUpperCase())&&l("Content-Type",n.contentType||"application/x-www-form-urlencoded"),n.headers)for(r in n.headers)l(r,n.headers[r]);if(d.setRequestHeader=l,d.onreadystatechange=function(){if(4==d.readyState){d.onreadystatechange=x,clearTimeout(j);var e,i=!1;if(d.status>=200&&d.status<300||304==d.status||0==d.status&&"file:"==h){s=s||b(n.mimeType||d.getResponseHeader("content-type")),e=d.responseText;try{"script"==s?(1,eval)(e):"xml"==s?e=d.responseXML:"json"==s&&(e=c.test(e)?null:t.parseJSON(e))}catch(r){i=r}i?v(i,"parsererror",d,n,o):g(e,d,n,o)}else v(d.statusText||null,d.status?"error":"abort",d,n,o)}},m(d,n)===!1)return d.abort(),v(null,"abort",d,n,o),d;if(n.xhrFields)for(r in n.xhrFields)d[r]=n.xhrFields[r];var S="async"in n?n.async:!0;d.open(n.type,n.url,S,n.username,n.password);for(r in f)y.apply(d,f[r]);return n.timeout>0&&(j=setTimeout(function(){d.onreadystatechange=x,d.abort(),v(null,"timeout",d,n,o)},n.timeout)),d.send(n.data?n.data:null),d},t.get=function(){return t.ajax(j.apply(null,arguments))},t.post=function(){var e=j.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=j.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var a,r=this,s=e.split(/\s/),u=j(e,n,i),f=u.success;return s.length>1&&(u.url=s[0],a=s[1]),u.success=function(e){r.html(a?t("
").html(e.replace(o,"")).find(a):e),f&&f.apply(r,arguments)},t.ajax(u),this};var S=encodeURIComponent;t.param=function(t,e){var n=[];return n.add=function(t,e){this.push(S(t)+"="+S(e))},T(n,t,e),n.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var n,e=[];return t([].slice.call(this.get(0).elements)).each(function(){n=t(this);var i=n.attr("type");"fieldset"!=this.nodeName.toLowerCase()&&!this.disabled&&"submit"!=i&&"reset"!=i&&"button"!=i&&("radio"!=i&&"checkbox"!=i||this.checked)&&e.push({name:n.attr("name"),value:n.val()})}),e},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(e)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;window.getComputedStyle=function(t){try{return n(t)}catch(e){return null}}}}(Zepto); 3 | -------------------------------------------------------------------------------- /Mobile_version/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Atomu Datepicker Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | 29 |
30 |
31 |

（在手机中查看效果更佳）

32 |
33 | 日期： 35 |
36 |
37 | 38 | 59 | 60 | -------------------------------------------------------------------------------- /PC_version/dateRange.css: -------------------------------------------------------------------------------- 1 | /*========== reset ==========*/ 2 | 3 | html, 4 | body, 5 | div, 6 | dl, 7 | dt, 8 | dd, 9 | ul, 10 | ol, 11 | li, 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6, 18 | pre, 19 | form, 20 | fieldset, 21 | input, 22 | textarea, 23 | p, 24 | blockquote, 25 | th, 26 | td, 27 | iframe, 28 | hr { 29 | margin: 0; 30 | padding: 0; 31 | } 32 | 33 | body { 34 | font: 12px/1.6 Tahoma, microsoft yahei, "微软雅黑", "宋体"; 35 | *font-family: "微软雅黑", "宋体"; 36 | } 37 | 38 | fieldset, 39 | img { 40 | border: 0; 41 | } 42 | 43 | address, 44 | caption, 45 | cite, 46 | dfn, 47 | em, 48 | th, 49 | var { 50 | font-style: normal; 51 | font-weight: normal; 52 | } 53 | 54 | ol, 55 | ul { 56 | list-style: none; 57 | } 58 | 59 | caption, 60 | th { 61 | text-align: left; 62 | } 63 | 64 | h1, 65 | h2, 66 | h3, 67 | h4, 68 | h5, 69 | h6 { 70 | font-size: 100%; 71 | } 72 | 73 | table { 74 | border-collapse: collapse; 75 | border-spacing: 0; 76 | } 77 | 78 | select, 79 | input, 80 | label, 81 | button, 82 | textarea { 83 | margin: 0; 84 | padding: 0; 85 | font: normal normal normal "微软雅黑", arial, Simsun, Arial Unicode MS, Mingliu, Arial; 86 | overflow: visible; 87 | } 88 | 89 | input { 90 | padding: 2px 0 1px; 91 | *padding: 4px 0 0; 92 | _padding: 4px 0 0; 93 | _height: 21px; 94 | } 95 | 96 | 97 | /** 98 | * GRI主题 99 | */ 100 | 101 | .gri_contrast { 102 | float: left; 103 | margin: 4px 8px 0 8px; 104 | line-height: 20px; 105 | color: #666; 106 | cursor: pointer; 107 | font: 12px/1.5 Tahoma, Helvetica, 'SimSun', sans-serif; 108 | } 109 | 110 | .gri_date { 111 | /* margin: 4px 4px;*/ 112 | padding: 0 26px 0 6px; 113 | width: 195px; 114 | height: 20px; 115 | line-height: 20px; 116 | border: 1px solid #D6D6D6; 117 | background: #FFF url('./images/icon_date.png') no-repeat 100% 50%; 118 | cursor: pointer; 119 | color: #666; 120 | } 121 | 122 | .gri_date_month { 123 | width: 180px 124 | } 125 | 126 | .gri_dateRangeCalendar { 127 | position: absolute; 128 | display: none; 129 | background: #FFF; 130 | border: 1px solid #6FB1DF; 131 | padding: 10px; 132 | -moz-box-shadow: 0px 1px 3px #6FB1DF; 133 | filter: progid: DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color="#CCCCCC"); 134 | font: 12px/1.5 Tahoma, Helvetica, 'SimSun', sans-serif; 135 | } 136 | 137 | .gri_dateRangeCalendar a { 138 | color: #369; 139 | } 140 | 141 | .gri_dateRangePicker { 142 | float: left; 143 | border: 0; 144 | margin: 0; 145 | padding: 0; 146 | } 147 | 148 | .gri_dateRangeOptions { 149 | float: left; 150 | } 151 | 152 | .gri_dateRangeOptions input.gri_dateRangeInput { 153 | width: 80px; 154 | text-align: center; 155 | border: 1px solid #DDD; 156 | } 157 | 158 | .gri_dateRangeOptions div.gri_dateRangeInput { 159 | margin-bottom: 5px; 160 | } 161 | 162 | .gri_dateRangePreMonth { 163 | float: left; 164 | width: 15px; 165 | height: 17px; 166 | background: url('./images/page.png') no-repeat 0 0; 167 | overflow: hidden; 168 | } 169 | 170 | .gri_dateRangeNextMonth { 171 | float: right; 172 | width: 15px; 173 | height: 17px; 174 | background: url('./images/page.png') no-repeat -15px 0; 175 | overflow: hidden; 176 | } 177 | 178 | .gri_dateRangePreMonth span, 179 | .gri_dateRangeNextMonth span { 180 | display: none; 181 | } 182 | 183 | .gri_dateRangeDateTable { 184 | margin: 0 10px 0 0px; 185 | padding: 0px; 186 | float: left; 187 | empty-cells: show; 188 | border-collapse: collapse; 189 | display: inline; 190 | font-size: 12px; 191 | } 192 | 193 | .gri_dateRangeDateTable td { 194 | border: 1px solid #EEE; 195 | text-align: right; 196 | cursor: pointer; 197 | padding: 1px 2px; 198 | } 199 | 200 | .gri_dateRangeDateTable th { 201 | border-top: 1px solid #DEE6F6; 202 | border-left: 1px solid #DEE6F6; 203 | background: #E0E8F7; 204 | font-weight: 400; 205 | border-left: 1px solid #DDD; 206 | } 207 | 208 | .gri_dateRangeDateTable td.gri_dateRangeGray { 209 | color: #BBB; 210 | cursor: default; 211 | } 212 | 213 | .gri_dateRangeDateTable td.gri_dateRangeToday { 214 | color: #F90; 215 | font-weight: bold; 216 | } 217 | 218 | .gri_dateRangeSelected { 219 | background-color: #007CD9; 220 | color: #FFF; 221 | } 222 | 223 | .gri_dateRangeCompare { 224 | background-color: #B9E078; 225 | color: #FFF; 226 | } 227 | 228 | .gri_dateRangeCoincide { 229 | background-color: #FFFFC4; 230 | } 231 | 232 | .gri_pn { 233 | background: url("../images/pn.png") repeat-x scroll 0 -48px #E5E5E5; 234 | color: #fff; 235 | } 236 | 237 | .gri_pnc { 238 | background: url("../images/pn.png") repeat-x scroll 0 0 #E5E5E5; 239 | } 240 | 241 | .gri_co { 242 | border: 1px solid #999999; 243 | box-shadow: 0 1px 0 #E5E5E5; 244 | cursor: pointer; 245 | font-family: Tahoma, 'Microsoft Yahei', 'Simsun'; 246 | font-size: 12px; 247 | height: 21px; 248 | overflow: hidden; 249 | vertical-align: middle 250 | } 251 | 252 | 253 | /** 254 | * ================================================= 255 | * TA主题 256 | * ================================================= 257 | */ 258 | 259 | .ta_date { 260 | border: 1px solid #d8d8d8; 261 | -webkit-border-radius: 3px; 262 | -moz-border-radius: 3px; 263 | border-radius: 3px; 264 | background-color: #fefefe; 265 | background-image: -ms-linear-gradient(top, #fafafa, #f5f5f5); 266 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#f5f5f5)); 267 | background-image: -moz-linear-gradient(top, #fafafa, #f5f5f5); 268 | background-image: -o-linear-gradient(top, #fafafa, #f5f5f5); 269 | background-image: linear-gradient(top, #fafafa, #f5f5f5); 270 | background-repeat: repeat-x; 271 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 272 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 273 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 274 | box-shadow: 0px 1px 1px rgba(218, 218, 218, 0.8); 275 | float: left; 276 | } 277 | 278 | .ta_date .date_title { 279 | font-family: Arial; 280 | font-size: 14px; 281 | color: #666666; 282 | padding: 6px 10px; 283 | *padding: 0px 10px; 284 | border-right: 1px solid #d8d8d8; 285 | vertical-align: middle; 286 | cursor: pointer; 287 | *zoom: 1; 288 | } 289 | 290 | .ta_date:hover { 291 | background-image: none; 292 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 293 | -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 294 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 295 | } 296 | 297 | .ta_date .to { 298 | padding: 0 5px; 299 | } 300 | 301 | .ta_date .opt_sel { 302 | /*====*/ 303 | width: 30px; 304 | height: 28px; 305 | line-height: 28px; 306 | display: inline-block; 307 | text-align: center; 308 | vertical-align: middle; 309 | margin-left: -4px; 310 | } 311 | 312 | .ta_date a.opt_sel:link, 313 | .ta_date a.opt_sel:visited {} 314 | 315 | .ta_date a.opt_sel:active, 316 | .ta_date a.opt_sel:hover {} 317 | 318 | .ta_date .i_orderd { 319 | display: inline-block; 320 | width: 0; 321 | height: 0; 322 | vertical-align: middle; 323 | border-top: 5px solid #727272; 324 | border-right: 5px dashed transparent; 325 | border-left: 5px dashed transparent; 326 | font-size: 0; 327 | content: ""; 328 | overflow: hidden; 329 | *margin-top: 10px; 330 | } 331 | 332 | .ta_calendar2 { 333 | *width: 536px; 334 | } 335 | 336 | .ta_calendar1 { 337 | *width: 268px; 338 | } 339 | 340 | .ta_calendar { 341 | border: 1px solid #e1e1e1; 342 | background-color: #ffffff; 343 | border: 1px solid #ccc; 344 | border: 1px solid rgba(0, 0, 0, 0.2); 345 | -webkit-border-radius: 2px; 346 | -moz-border-radius: 2px; 347 | border-radius: 2px; 348 | -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 349 | -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 350 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 351 | -webkit-background-clip: padding-box; 352 | -moz-background-clip: padding; 353 | background-clip: padding-box; 354 | font-size: 12px; 355 | text-align: left; 356 | position: absolute; 357 | z-index: 100; 358 | } 359 | 360 | .i_pre, 361 | .i_next, 362 | .ta_calendar td.ta_dateRangeSelected, 363 | .ta_calendar td.first, 364 | .ta_calendar td.last, 365 | .ta_calendar td.today { 366 | /*background:url(http://imgcache.qq.com/bossweb/mta/images/calendar_all.png) no-repeat;*/ 367 | background: url(./images/calendar_all.png) no-repeat; 368 | cursor: pointer; 369 | } 370 | 371 | .i_pre, 372 | .i_next { 373 | width: 23px; 374 | height: 23px; 375 | display: inline-block; 376 | } 377 | 378 | .i_pre { 379 | background-position: 0 0; 380 | } 381 | 382 | .i_pre:hover { 383 | background-position: -46px 0px; 384 | } 385 | 386 | .i_next { 387 | background-position: -23px 0; 388 | } 389 | 390 | .i_next:hover { 391 | background-position: -69px 0px; 392 | } 393 | 394 | .ta_calendar td.ta_dateRangeSelected { 395 | background-position: -164px 2px; 396 | color: #fff; 397 | } 398 | 399 | .ta_calendar td.ta_dateRangeGray { 400 | color: #BBB; 401 | cursor: default; 402 | } 403 | 404 | .ta_calendar td.first { 405 | color: #6590c1; 406 | background-position: -128px 2px; 407 | } 408 | 409 | .ta_calendar td.last { 410 | color: #6590c1; 411 | background-position: -200px 2px; 412 | } 413 | 414 | .ta_calendar td.today { 415 | color: #fff; 416 | background-position: -92px 2px; 417 | } 418 | 419 | .ta_calendar .dis { 420 | color: #9e9e9e; 421 | } 422 | 423 | .ta_calendar table { 424 | font-size: 12px; 425 | float: left; 426 | margin: 0 8px; 427 | _display: inline; 428 | border-spacing: 0 7px; 429 | border-collapse: collapse; 430 | } 431 | 432 | .ta_calendar table caption { 433 | text-align: center; 434 | height: 35px; 435 | line-height: 35px; 436 | font-size: 14px; 437 | } 438 | 439 | .ta_calendar table thead tr { 440 | border: 1px solid #e1e1e1; 441 | background: #f7f8fa; 442 | -webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 1.0); 443 | -moz-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 1.0); 444 | box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 1.0); 445 | box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); 446 | } 447 | 448 | .ta_calendar table thead th { 449 | line-height: 20px; 450 | padding: 4px 10px; 451 | color: #444; 452 | cursor: pointer; 453 | text-align: left; 454 | border-top: 1px solid #e1e1e1; 455 | border-bottom: 1px solid #e1e1e1; 456 | } 457 | 458 | .ta_calendar table.calendar-month { 459 | font-size: 12px; 460 | float: left; 461 | margin: 0 8px; 462 | _display: inline; 463 | border-spacing: 7px; 464 | border-collapse: separate; 465 | margin-bottom: 10px; 466 | } 467 | 468 | .calendar-month caption { 469 | border-bottom: 1px solid #E1E1E1; 470 | *padding-bottom: 0px; 471 | } 472 | 473 | .calendar-month tbody td { 474 | line-height: 30px; 475 | padding: 4px 11px; 476 | text-align: center; 477 | white-space: nowrap; 478 | font-family: "΢���ź�"; 479 | cursor: pointer; 480 | } 481 | 482 | .calendar-month td.hover, 483 | .calendar-month td:hover, 484 | .calendar-month caption span:hover { 485 | background: #; 486 | color: #6590c1; 487 | border: 1px solid #6590c1; 488 | padding: 3px 10px; 489 | border-radius: 2px; 490 | cursor: pointer; 491 | } 492 | 493 | .calendar .dis:hover { 494 | color: #9e9e9e; 495 | border: 1px solid #d3d5d6; 496 | padding: 3px 10px; 497 | } 498 | 499 | .calendar-month td.current { 500 | background: #6590c1; 501 | color: #fff; 502 | border-radius: 2px; 503 | } 504 | 505 | 506 | /*年月选择按钮*/ 507 | 508 | .ta_calendar .select { 509 | position: relative; 510 | padding: 3px 10px; 511 | width: 30px; 512 | height: 20px; 513 | border: 1px solid #c2c7cc; 514 | border-radius: 2px; 515 | line-height: 20px; 516 | cursor: pointer; 517 | *zoom: 1; 518 | background: #fafbfc; 519 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f8)); 520 | background: -moz-linear-gradient(top, #ffffff, #f5f5f8); 521 | background: -ms-linear-gradient(top, #ffffff, #f5f5f8); 522 | background: -o-linear-gradient(top, #ffffff, #f5f5f8); 523 | background: linear-gradient(top, #ffffff, #f5f5f8); 524 | } 525 | 526 | .ta_calendar .select:hover { 527 | border-color: #6590c1; 528 | background: #eff1f3; 529 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7fa), to(#e8eaee)); 530 | background: -moz-linear-gradient(top, #f7f7fa, #e8eaee); 531 | background: -ms-linear-gradient(top, #f7f7fa, #e8eaee); 532 | background: -o-linear-gradient(top, #f7f7fa, #e8eaee); 533 | background: linear-gradient(top, #f7f7fa, #e8eaee); 534 | } 535 | 536 | .ta_calendar .select:active { 537 | border-color: #c2c7cc; 538 | background: #f0f1f4; 539 | box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05); 540 | } 541 | 542 | .ta_calendar .dropdown { 543 | position: absolute; 544 | width: 150px; 545 | background: #fff; 546 | border: 1px solid #ccc; 547 | border: 1px solid rgba(0, 0, 0, 0.2); 548 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 549 | z-index: 100; 550 | } 551 | 552 | .ta_calendar .dropdown .list_menu { 553 | padding: 3px 0; 554 | max-height: 240px; 555 | overflow: auto; 556 | } 557 | 558 | .ta_calendar .dropdown .list_menu li { 559 | *line-height: 20px; 560 | } 561 | 562 | .ta_calendar .dropdown .list_menu li a { 563 | display: block; 564 | line-height: 20px; 565 | color: #383d49; 566 | text-decoration: none; 567 | text-align: center; 568 | white-space: nowrap; 569 | text-overflow: ellipsis; 570 | overflow: hidden; 571 | } 572 | 573 | .ta_calendar .dropdown .list_menu li a:hover { 574 | background: #f4f5f8; 575 | color: #383d49; 576 | text-decoration: none; 577 | } 578 | 579 | .ta_calendar .select_wrap { 580 | position: relative; 581 | display: inline-block; 582 | *display: inline; 583 | *zoom: 1; 584 | vertical-align: middle; 585 | font-size: 12px; 586 | } 587 | 588 | .ta_calendar .select_wrap .dropdown { 589 | display: none; 590 | left: -1px; 591 | top: 100%; 592 | width: 100%; 593 | border-radius: 2px; 594 | } 595 | 596 | .ta_calendar .select_wrap.open { 597 | *z-index: 100; 598 | } 599 | 600 | .ta_calendar .select_wrap.open .dropdown { 601 | display: block; 602 | } 603 | 604 | .ta_calendar table thead th.sun { 605 | border-left: 1px solid #e1e1e1; 606 | } 607 | 608 | .ta_calendar table thead th.sat { 609 | border-right: 1px solid #e1e1e1; 610 | } 611 | 612 | .ta_calendar table tbody td { 613 | line-height: 20px; 614 | padding: 4px 11px; 615 | text-align: center; 616 | white-space: nowrap; 617 | font-family: "Tahoma"; 618 | } 619 | 620 | .ta_calendar_cont { 621 | position: relative; 622 | } 623 | 624 | .ta_calendar_cont .i_pre, 625 | .ta_calendar_cont .i_next { 626 | position: absolute; 627 | top: 7px; 628 | } 629 | 630 | .ta_calendar_cont .i_pre { 631 | left: 10px; 632 | } 633 | 634 | .ta_calendar_cont .i_next { 635 | right: 10px; 636 | } 637 | 638 | .ta_calendar_footer { 639 | border-top: 1px solid #e5e5e5; 640 | background: #fafafa; 641 | padding-top: 6px; 642 | height: 34px; 643 | } 644 | 645 | .ta_calendar_footer .frm_btn { 646 | float: right; 647 | padding-right: 10px; 648 | } 649 | 650 | .ta_calendar_footer .frm_btn input { 651 | margin-left: 3px; 652 | } 653 | 654 | .ta_calendar_footer .frm_msg { 655 | float: left; 656 | padding-left: 10px; 657 | vertical-align: middle; 658 | } 659 | 660 | .ta_calendar_footer .ipt_text_s { 661 | padding: 4px 4px; 662 | } 663 | 664 | .ta_ipt_text, 665 | .ta_ipt_textarea, 666 | .ta_ipt_text_s { 667 | border: 1px solid #CCCCCC; 668 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 669 | color: #555555; 670 | font-size: 12px; 671 | height: 16px; 672 | line-height: 16px; 673 | padding: 6px 4px; 674 | position: relative; 675 | transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 676 | vertical-align: middle; 677 | width: 180px; 678 | z-index: 2; 679 | } 680 | 681 | .ta_ipt_text_s { 682 | width: 80px; 683 | } 684 | 685 | .ta_btn { 686 | -moz-border-bottom-colors: none; 687 | -moz-border-left-colors: none; 688 | -moz-border-right-colors: none; 689 | -moz-border-top-colors: none; 690 | background-color: #F5F5F5; 691 | background-image: -moz-linear-gradient(center top, #FEFEFE, #F5F5F5); 692 | background-repeat: repeat-x; 693 | border-color: #CACACA #CACACA #B3B3B3; 694 | border-image: none; 695 | border-radius: 2px 2px 2px 2px; 696 | border-style: solid; 697 | border-width: 1px; 698 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); 699 | color: #333333; 700 | cursor: pointer; 701 | display: inline-block; 702 | font-family: "΢���ź�", "����"; 703 | font-size: 12px; 704 | line-height: 20px; 705 | margin-bottom: 0; 706 | outline: 0 none; 707 | padding: 3px 12px; 708 | text-align: center; 709 | } 710 | 711 | .ta_btn:hover, 712 | .ta_btn:active, 713 | .ta_btn.active, 714 | .ta_btn.disabled, 715 | .ta_btn[disabled] { 716 | color: #333333; 717 | } 718 | 719 | .ta_btn:hover { 720 | background-color: #FEFEFE; 721 | background-image: none; 722 | color: #333333; 723 | text-decoration: none; 724 | transition: background-position 0.1s linear 0s; 725 | } 726 | 727 | .ta_btn:focus { 728 | outline: thin dotted #333333; 729 | outline-offset: -2px; 730 | } 731 | 732 | .ta_btn.active, 733 | .ta_btn:active { 734 | background-color: #E6E6E6; 735 | background-image: none; 736 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05); 737 | outline: 0 none; 738 | } 739 | 740 | .ta_btn.disabled, 741 | .ta_btn[disabled] { 742 | background-color: #E6E6E6; 743 | background-image: none; 744 | box-shadow: none; 745 | cursor: default; 746 | opacity: 0.65; 747 | } 748 | 749 | .ta_btn { 750 | margin: 2px 5px 0 0; 751 | vertical-align: top; 752 | } 753 | 754 | .ta_btn:hover { 755 | background-position: 0 -16px; 756 | } 757 | 758 | .ta_btn_primary { 759 | background-color: #B4D66F; 760 | background-image: -moz-linear-gradient(center top, #C7E184, #A2CC59); 761 | border: 1px solid #88AB4A; 762 | color: #56740F; 763 | } 764 | 765 | .ta_btn_primary:hover { 766 | background-color: #5C96DB; 767 | background-image: -moz-linear-gradient(center top, #74A5ED, #4789CD); 768 | border: 1px solid #286AB1; 769 | color: #FFFFFF; 770 | } 771 | 772 | .cf:after { 773 | clear: both; 774 | } 775 | 776 | .cf:before, 777 | .cf:after { 778 | content: ""; 779 | display: table; 780 | } 781 | 782 | .cf:before, 783 | .cf:after { 784 | content: ""; 785 | display: table; 786 | } -------------------------------------------------------------------------------- /PC_version/dateRange.js: -------------------------------------------------------------------------------- 1 | /** 2 | *======================================================================= 3 | *日期选择器js组件。 4 | *@author ：johnnyzheng(johnnyzheng@tencent.com) 郑灿双 5 | *@version ： 2012-07-11 6 | *@modification list：2012-08-16 规范样式名称 7 | * 2013-01-04 增加主题设置接口 8 | * 2013-01-31 增加自定义灰掉周末 周几的选项，增加自动初始化自动提交的功能 9 | * 2013-03-15 支持一个页面多个日期选择器，快捷日期选择 10 | * 2013-03-26 增加确认、取消按钮的隐藏，而直接自动提交 11 | * 2013-08-01 扩展接口，增加最近90天，增加自定义可选时间 12 | * 2013-08-12 日期选择器框体宽度超出视窗大小的时候制动鼓靠右对齐 13 | * 2014-02-25 增加业务接口：获取当前日期对象的的选中日期 14 | * 2014-10-13 扩展参数，支持日期下拉选择自定义年和月份，配合theme:ta来使用。 15 | * 2015-11-17 重新整理代码 16 | *======================================================================= 17 | */ 18 | /** 19 | * @description 整个日期选择器对象的构造函数入口，支持丰富的接口参数传递，大多数提供默认配置，可传入覆盖 20 | * @param {String} inputId 日期选择器ID 21 | * @param {object} options 配置数组 22 | */ 23 | function pickerDateRange(inputId, options) { 24 | /** 25 | * 默认配置参数数据，每个参数涵义在后解释 26 | */ 27 | var defaults = { 28 | aToday: 'aToday', //今天 29 | aYesterday: 'aYesterday', //昨天 30 | aRecent7Days: 'aRecent7Days', //最近7天 31 | aRecent14Days: 'aRecent14Days', //最近14天 32 | aRecent30Days: 'aRecent30Days', //最近30天 33 | aRecent90Days: 'aRecent90Days', //最近90天 34 | startDate: '', // 开始日期 35 | endDate: '', // 结束日期 36 | startCompareDate: '', // 对比开始日期 37 | endCompareDate: '', // 对比结束日期 38 | minValidDate: '315507600', //最小可用时间，控制日期选择器的可选力度 39 | maxValidDate: '', // 最大可用时间，与stopToday 配置互斥 40 | startDateId: 'startDate', // 开始日期输入框ID 41 | startCompareDateId: 'startCompareDate', // 对比开始日期输入框ID 42 | endDateId: 'endDate', // 结束日期输入框ID 43 | endCompareDateId: 'endCompareDate', // 对比结束日期输入框ID 44 | target: '', // 日期选择框的目标，一般为
的ID值 45 | needCompare: false, // 是否需要进行日期对比 46 | suffix: '', //相应控件的后缀 47 | inputTrigger: 'input_trigger', 48 | compareTrigger: 'compare_trigger', 49 | compareCheckboxId: 'needCompare', // 比较选择框 50 | calendars: 2, // 展示的月份数，最大是2 51 | dayRangeMax: 0, // 日期最大范围(以天计算) 52 | monthRangeMax: 12, // 日期最大范围(以月计算) 53 | dateTable: 'dateRangeDateTable', // 日期表格的CSS类 54 | selectCss: 'dateRangeSelected', // 时间选择的样式 55 | compareCss: 'dateRangeCompare', // 比较时间选择的样式 56 | coincideCss: 'dateRangeCoincide', // 重合部分的样式 57 | firstCss: 'first', //起始样式 58 | lastCss: 'last', //结束样式 59 | clickCss: 'today', //点击样式 60 | disableGray: 'dateRangeGray', // 非当前月的日期样式 61 | isToday: 'dateRangeToday', // 今天日期的样式 62 | joinLineId: 'joinLine', 63 | isSingleDay: false, 64 | defaultText: ' 至 ', 65 | singleCompare: false, 66 | stopToday: true, 67 | isTodayValid: false, 68 | weekendDis: false, //灰掉周末不可选。 69 | disCertainDay: [], //不可用的周日期设置数组，如：[1,3]是要周一， 周三 两天不可选，每个周的周一，周三都不可选择。 70 | disCertainDate: [], //不可用的日期设置数组，如:[1,3]是要1号，3号 两天不可选，特别的，[true,1,3]则反之，只有1，3可选，其余不可选。 71 | shortOpr: false, //结合单天日期选择的短操作，不需要确定和取消的操作按钮。 72 | noCalendar: false, //日期输入框是否展示 73 | theme: 'ta', //日期选择器的主题，目前支持 'gri' / 'ta' 74 | magicSelect: false, //用户自定义选择年、月，与{theme:ta}配合使用。 75 | autoCommit: false, //加载后立马自动提交 76 | autoSubmit: false, //没有确定，取消按钮，直接提交 77 | replaceBtn: 'btn_compare', 78 | success: function(obj) { 79 | return true; 80 | }, //回调函数，选择日期之后执行何种操作 81 | }; 82 | //将对象赋给__method变量 83 | var __method = this; 84 | 85 | this.inputId = inputId; 86 | this.inputCompareId = inputId + 'Compare'; 87 | this.compareInputDiv = 'div_compare_' + inputId; 88 | // 配置参数 89 | this.mOpts = $.extend({}, defaults, options); 90 | //默认日历参数最大是3 91 | this.mOpts.calendars = Math.min(this.mOpts.calendars, 3); 92 | //根据不同主题需要初始化的变量 93 | this.mOpts.compareCss = this.mOpts.theme == 'ta' ? this.mOpts.selectCss : this.mOpts.compareCss 94 | //昨天,今天,最近7天,最近14天,最近30天 95 | this.periodObj = {}; 96 | this.periodObj[__method.mOpts.aToday] = 0; 97 | this.periodObj[__method.mOpts.aYesterday] = 1; 98 | this.periodObj[__method.mOpts.aRecent7Days] = 6; 99 | this.periodObj[__method.mOpts.aRecent14Days] = 13; 100 | this.periodObj[__method.mOpts.aRecent30Days] = 29; 101 | this.periodObj[__method.mOpts.aRecent90Days] = 89; 102 | // 记录初始默认时间 103 | this.startDefDate = ''; 104 | // 随机ID后缀 105 | var suffix = '' == this.mOpts.suffix ? (new Date()).getTime() : this.mOpts.suffix; 106 | // 日期选择框DIV的ID 107 | this.calendarId = 'calendar_' + suffix; 108 | // 日期列表DIV的ID 109 | this.dateListId = 'dateRangePicker_' + suffix; 110 | // 日期比较层 111 | this.dateRangeCompareDiv = 'dateRangeCompareDiv_' + suffix; 112 | //日期选择层 113 | this.dateRangeDiv = 'dateRangeDiv_' + suffix; 114 | // 日期对比选择控制的checkbox 115 | this.compareCheckBoxDiv = 'dateRangeCompareCheckBoxDiv_' + suffix; 116 | // 时间选择的确认按钮 117 | this.submitBtn = 'submit_' + suffix; 118 | // 日期选择框关闭按钮 119 | this.closeBtn = 'closeBtn_' + suffix; 120 | // 上一个月的按钮 121 | this.preMonth = 'dateRangePreMonth_' + suffix; 122 | // 下一个月的按钮 123 | this.nextMonth = 'dateRangeNextMonth_' + suffix; 124 | // 表单中开始、结束、开始对比、结束对比时间 125 | this.startDateId = this.mOpts.startDateId + '_' + suffix; 126 | this.endDateId = this.mOpts.endDateId + '_' + suffix; 127 | this.compareCheckboxId = this.mOpts.compareCheckboxId + '_' + suffix; 128 | this.startCompareDateId = this.mOpts.startCompareDateId + '_' + suffix; 129 | this.endCompareDateId = this.mOpts.endCompareDateId + '_' + suffix; 130 | // 初始化日期选择器面板的HTML代码串 131 | var wrapper = { 132 | gri: [ 133 | '
', 134 | '
', 135 | '', 151 | '
' 152 | ], 153 | ta: [ 154 | '
', 155 | '
', 156 | //'
', 157 | '
', 158 | '', 176 | '
' 177 | ] 178 | }; 179 | 180 | 181 | //对比日期框体的html串 182 | var checkBoxWrapper = { 183 | gri: [ 184 | '', 187 | '' 188 | ], 189 | ta: [ 190 | '', 193 | '
', 194 | ' ', 195 | ' ', 196 | ' ', 197 | ' ', 198 | '
' 199 | ] 200 | }; 201 | //把checkbox放到页面的相应位置,放置到inputid后面 added by johnnyzheng 202 | 203 | if (this.mOpts.theme == 'ta') { 204 | $(checkBoxWrapper[this.mOpts.theme].join('')).insertAfter($('#div_' + this.inputId)); 205 | } else { 206 | $(checkBoxWrapper[this.mOpts.theme].join('')).insertAfter($('#' + this.inputId)); 207 | } 208 | //根据传入参数决定是否展示日期输入框 209 | if (this.mOpts.noCalendar) { 210 | $('#' + this.inputId).css('display', 'none'); 211 | $('#' + this.compareCheckboxId).parent().css('display', 'none'); 212 | } 213 | // 把时间选择框放到页面中 214 | $(0 < $('#appendParent').length ? '#appendParent' : document.body).append(wrapper[this.mOpts.theme].join('')); 215 | $('#' + this.calendarId).css('z-index', 9999); 216 | // 初始化目标地址的元素 217 | if (1 > $('#' + this.mOpts.startDateId).length) { 218 | $('' != this.mOpts.target ? '#' + this.mOpts.target : 'body').append(''); 219 | } else { 220 | $('#' + this.mOpts.startDateId).val(this.mOpts.startDate); 221 | } 222 | if (1 > $('#' + this.mOpts.endDateId).length) { 223 | $('' != this.mOpts.target ? '#' + this.mOpts.target : 'body').append(''); 224 | } else { 225 | $('#' + this.mOpts.endDateId).val(this.mOpts.endDate); 226 | } 227 | if (1 > $('#' + this.mOpts.compareCheckboxId).length) { 228 | $('' != this.mOpts.target ? '#' + this.mOpts.target : 'body').append(''); 229 | } 230 | // 如果不需要比较日期，则需要隐藏比较部分的内容 231 | if (false == this.mOpts.needCompare) { 232 | $('#' + this.compareInputDiv).css('display', 'none'); 233 | $('#' + this.compareCheckBoxDiv).css('display', 'none'); 234 | $('#' + this.dateRangeCompareDiv).css('display', 'none'); 235 | $('#' + this.compareCheckboxId).attr('disabled', true); 236 | $('#' + this.startCompareDateId).attr('disabled', true); 237 | $('#' + this.endCompareDateId).attr('disabled', true); 238 | //隐藏对比的checkbox 239 | $('#' + this.compareCheckboxId).parent().css('display', 'none'); 240 | $('#' + this.mOpts.replaceBtn).length > 0 && $('#' + this.mOpts.replaceBtn).hide(); 241 | } else { 242 | if (1 > $('#' + this.mOpts.startCompareDateId).length) { 243 | $('' != this.mOpts.target ? '#' + this.mOpts.target : 'body').append(''); 244 | } else { 245 | $('#' + this.mOpts.startCompareDateId).val(this.mOpts.startCompareDate); 246 | } 247 | if (1 > $('#' + this.mOpts.endCompareDateId).length) { 248 | $('' != this.mOpts.target ? '#' + this.mOpts.target : 'body').append(''); 249 | } else { 250 | $('#' + this.mOpts.endCompareDateId).val(this.mOpts.endCompareDate); 251 | } 252 | if ('' == this.mOpts.startCompareDate || '' == this.mOpts.endCompareDate) { 253 | $('#' + this.compareCheckboxId).attr('checked', false); 254 | $('#' + this.mOpts.compareCheckboxId).attr('checked', false); 255 | } else { 256 | $('#' + this.compareCheckboxId).attr('checked', true); 257 | $('#' + this.mOpts.compareCheckboxId).attr('checked', true); 258 | } 259 | 260 | } 261 | // 输入框焦点定在第一个输入框 262 | this.dateInput = this.startDateId; 263 | // 为新的输入框加背景色 264 | this.changeInput(this.dateInput); 265 | 266 | // 开始时间 input 的 click 事件 267 | $('#' + this.startDateId).bind('click', function() { 268 | // 如果用户在选择基准结束时间时，换到对比时间了，则 269 | if (__method.endCompareDateId == __method.dateInput) { 270 | $('#' + __method.startCompareDateId).val(__method.startDefDate); 271 | } 272 | __method.startDefDate = ''; 273 | __method.removeCSS(1); 274 | //__method.addCSS(1); 275 | __method.changeInput(__method.startDateId); 276 | return false; 277 | }); 278 | $('#' + this.calendarId).bind('click', function(event) { 279 | //event.preventDefault(); 280 | // 防止冒泡 281 | event.stopPropagation(); 282 | }); 283 | // 开始比较时间 input 的 click 事件 284 | $('#' + this.startCompareDateId).bind('click', function() { 285 | // 如果用户在选择基准结束时间时，换到对比时间了，则 286 | if (__method.endDateId == __method.dateInput) { 287 | $('#' + __method.startDateId).val(__method.startDefDate); 288 | } 289 | __method.startDefDate = ''; 290 | __method.removeCSS(0); 291 | //__method.addCSS(0); 292 | __method.changeInput(__method.startCompareDateId); 293 | return false; 294 | }); 295 | /** 296 | * 设置回调句柄，点击成功后，返回一个时间对象，包含开始结束时间 297 | * 和对比开始结束时间 298 | */ 299 | $('#' + this.submitBtn).bind('click', function() { 300 | __method.close(1); 301 | __method.mOpts.success({ 302 | 'startDate': $('#' + __method.mOpts.startDateId).val(), 303 | 'endDate': $('#' + __method.mOpts.endDateId).val(), 304 | 'needCompare': $('#' + __method.mOpts.compareCheckboxId).val(), 305 | 'startCompareDate': $('#' + __method.mOpts.startCompareDateId).val(), 306 | 'endCompareDate': $('#' + __method.mOpts.endCompareDateId).val() 307 | }); 308 | return false; 309 | }); 310 | // 日期选择关闭按钮的 click 事件 311 | $('#' + this.closeBtn).bind('click', function() { 312 | __method.close(); 313 | return false; 314 | }); 315 | // 为输入框添加click事件 316 | $('#' + this.inputId).bind('click', function() { 317 | __method.init(); 318 | __method.show(false, __method); 319 | return false; 320 | }); 321 | $('#' + this.mOpts.inputTrigger).bind('click', function() { 322 | __method.init(); 323 | __method.show(false, __method); 324 | return false; 325 | }); 326 | $('#' + this.mOpts.compareTrigger).bind('click', function() { 327 | __method.init(true); 328 | __method.show(true, __method); 329 | return false; 330 | }); 331 | // 为输入框添加click事件 332 | $('#' + this.inputCompareId).bind('click', function() { 333 | __method.init(true); 334 | __method.show(true, __method); 335 | return false; 336 | }); 337 | 338 | //判断是否是实时数据,如果是将时间默认填充进去 added by johnnyzheng 12-06 339 | if (this.mOpts.singleCompare) { 340 | if (this.mOpts.theme === 'ta') { 341 | $('#' + __method.startDateId).val(__method.mOpts.startDate); 342 | $('#' + __method.endDateId).val(__method.mOpts.startDate); 343 | $('#' + __method.startCompareDateId).val(__method.mOpts.startCompareDate); 344 | $('#' + __method.endCompareDateId).val(__method.mOpts.startCompareDate); 345 | } else { 346 | $('#' + __method.startDateId).val(__method.mOpts.startDate); 347 | $('#' + __method.endDateId).val(__method.mOpts.startDate); 348 | $('#' + __method.startCompareDateId).val(__method.mOpts.startCompareDate); 349 | $('#' + __method.endCompareDateId).val(__method.mOpts.startCompareDate); 350 | $('#' + this.compareCheckboxId).attr('checked', true); 351 | $('#' + this.mOpts.compareCheckboxId).attr('checked', true); 352 | } 353 | 354 | 355 | } 356 | // 时间对比 357 | $('#' + this.dateRangeCompareDiv).css('display', $('#' + this.compareCheckboxId).attr('checked') ? '' : 'none'); 358 | $('#' + this.compareInputDiv).css('display', $('#' + this.compareCheckboxId).attr('checked') ? '' : 'none'); 359 | $('#' + this.compareCheckboxId).bind('click', function() { 360 | $('#' + __method.inputCompareId).css('display', this.checked ? '' : 'none'); 361 | // 隐藏对比时间选择 362 | $('#' + __method.dateRangeCompareDiv).css('display', this.checked ? '' : 'none'); 363 | $('#' + __method.compareInputDiv).css('display', this.checked ? '' : 'none'); 364 | // 把两个对比时间框置为不可用 365 | $('#' + __method.startCompareDateId).css('disabled', this.checked ? false : true); 366 | $('#' + __method.endCompareDateId).css('disabled', this.checked ? false : true); 367 | // 修改表单的 checkbox 状态 368 | $('#' + __method.mOpts.compareCheckboxId).attr('checked', $('#' + __method.compareCheckboxId).attr('checked')); 369 | // 修改表单的值 370 | $('#' + __method.mOpts.compareCheckboxId).val($('#' + __method.compareCheckboxId).attr('checked') ? 1 : 0); 371 | // 初始化选框背景 372 | if ($('#' + __method.compareCheckboxId).attr('checked')) { 373 | sDate = __method.str2date($('#' + __method.startDateId).val()); 374 | sTime = sDate.getTime(); 375 | eDate = __method.str2date($('#' + __method.endDateId).val()); 376 | eTime = eDate.getTime(); 377 | scDate = $('#' + __method.startCompareDateId).val(); 378 | ecDate = $('#' + __method.endCompareDateId).val(); 379 | if ('' == scDate || '' == ecDate) { 380 | ecDate = __method.str2date(__method.date2ymd(sDate).join('-')); 381 | ecDate.setDate(ecDate.getDate() - 1); 382 | scDate = __method.str2date(__method.date2ymd(sDate).join('-')); 383 | scDate.setDate(scDate.getDate() - ((eTime - sTime) / 86400000) - 1); 384 | //这里要和STATS_START_TIME的时间进行对比，如果默认填充的对比时间在这个时间之前 added by johnnyzheng 385 | if (ecDate.getTime() < __method.mOpts.minValidDate * 1000) { 386 | scDate = sDate; 387 | ecDate = eDate; 388 | } 389 | if (ecDate.getTime() >= __method.mOpts.minValidDate * 1000 && scDate.getTime() < __method.mOpts.minValidDate * 1000) { 390 | scDate.setTime(__method.mOpts.minValidDate * 1000) 391 | scDate = __method.str2date(__method.date2ymd(scDate).join('-')); 392 | ecDate.setDate(scDate.getDate() + ((eTime - sTime) / 86400000) - 1); 393 | } 394 | $('#' + __method.startCompareDateId).val(__method.formatDate(__method.date2ymd(scDate).join('-'))); 395 | $('#' + __method.endCompareDateId).val(__method.formatDate(__method.date2ymd(ecDate).join('-'))); 396 | } 397 | __method.addCSS(1); 398 | // 输入框焦点切换到比较开始时间 399 | __method.changeInput(__method.startCompareDateId); 400 | 401 | } else { 402 | __method.removeCSS(1); 403 | // 输入框焦点切换到开始时间 404 | __method.changeInput(__method.startDateId); 405 | } 406 | //用户点击默认自动提交 added by johnnyzheng 12-08 407 | __method.close(1); 408 | __method.mOpts.success({ 409 | 'startDate': $('#' + __method.mOpts.startDateId).val(), 410 | 'endDate': $('#' + __method.mOpts.endDateId).val(), 411 | 'needCompare': $('#' + __method.mOpts.compareCheckboxId).val(), 412 | 'startCompareDate': $('#' + __method.mOpts.startCompareDateId).val(), 413 | 'endCompareDate': $('#' + __method.mOpts.endCompareDateId).val() 414 | }); 415 | }); 416 | 417 | // 初始化开始 418 | this.init(); 419 | // 关闭日期选择框，并把结果反显到输入框 420 | this.close(1); 421 | if (this.mOpts.replaceBtn && $('#' + this.mOpts.replaceBtn).length > 0) { 422 | $('#' + __method.compareCheckboxId).hide(); 423 | $('.contrast').hide(); 424 | $('#' + this.mOpts.replaceBtn).bind('click', function() { 425 | var self = this; 426 | $('#' + __method.compareCheckboxId).attr('checked') ? $('#' + __method.compareCheckboxId).removeAttr('checked') : $('#' + __method.compareCheckboxId).attr('checked', 'checked'); 427 | $('#' + __method.compareCheckboxId).click(); 428 | $('#' + __method.compareCheckboxId).attr('checked') ? function() { 429 | $('#' + __method.compareCheckboxId).removeAttr('checked'); 430 | $('.contrast').hide(); 431 | $(self).text('按时间对比'); 432 | }() : function() { 433 | $('#' + __method.compareCheckboxId).attr('checked', 'checked'); 434 | $('.contrast').show(); 435 | $(self).text('取消对比'); 436 | }(); 437 | }); 438 | } 439 | 440 | if (this.mOpts.autoCommit) { 441 | this.mOpts.success({ 442 | 'startDate': $('#' + __method.mOpts.startDateId).val(), 443 | 'endDate': $('#' + __method.mOpts.endDateId).val(), 444 | 'needCompare': $('#' + __method.mOpts.compareCheckboxId).val(), 445 | 'startCompareDate': $('#' + __method.mOpts.startCompareDateId).val(), 446 | 'endCompareDate': $('#' + __method.mOpts.endCompareDateId).val() 447 | }); 448 | } 449 | //让用户点击页面即可关闭弹窗 450 | $(document).bind('click', function() { 451 | __method.close(); 452 | }); 453 | }; 454 | 455 | /** 456 | * @description 日期选择器的初始化方法，对象原型扩展 457 | * @param {Boolean} isCompare 标识当前初始化选择面板是否是对比日期 458 | */ 459 | pickerDateRange.prototype.init = function(isCompare) { 460 | var __method = this; 461 | var minDate, maxDate; 462 | var isNeedCompare = typeof(isCompare) != 'undefined' ? isCompare && $("#" + __method.compareCheckboxId).attr('checked') : $("#" + __method.compareCheckboxId).attr('checked'); 463 | // 清空日期列表的内容 464 | $("#" + this.dateListId).empty(); 465 | 466 | // 如果开始日期为空，则取当天的日期为开始日期 467 | var endDate = '' == this.mOpts.endDate ? (new Date()) : this.str2date(this.mOpts.endDate); 468 | // 日历结束时间 469 | this.calendar_endDate = new Date(endDate.getFullYear(), endDate.getMonth() + 1, 0); 470 | 471 | //如果是magicSelect 自定义年和月份，则自定义填充日期 472 | if (this.mOpts.magicSelect && this.mOpts.theme == 'ta') { 473 | var i = 0; 474 | do { 475 | var td = null; 476 | if (i == 0) { 477 | td = this.fillDate(this.str2date($('#' + this.endDateId).val()).getFullYear(), this.str2date($('#' + this.endDateId).val()).getMonth(), i); 478 | $("#" + this.dateListId).append(td); 479 | } else { 480 | td = this.fillDate(this.str2date($('#' + this.startDateId).val()).getFullYear(), this.str2date($('#' + this.startDateId).val()).getMonth(), i); 481 | var firstTd = (this.mOpts.theme == 'ta' ? $("#" + this.dateListId).find('table').get(0) : $("#" + this.dateListId).find('td').get(0)); 482 | $(firstTd).before(td); 483 | } 484 | i++; 485 | } while (i < 2); 486 | // 日历开始时间 487 | this.calendar_startDate = new Date(this.str2date($('#' + this.startDateId).val()).getFullYear(), this.str2date($('#' + this.startDateId).val()).getMonth(), 1); 488 | 489 | } else { 490 | // 计算并显示以 endDate 为结尾的最近几个月的日期列表 491 | for (var i = 0; i < this.mOpts.calendars; i++) { 492 | var td = null; 493 | if (this.mOpts.theme == 'ta') { 494 | td = this.fillDate(endDate.getFullYear(), endDate.getMonth(), i); 495 | } else { 496 | td = document.createElement('td'); 497 | $(td).append(this.fillDate(endDate.getFullYear(), endDate.getMonth(), i)); 498 | $(td).css('vertical-align', 'top'); 499 | } 500 | if (0 == i) { 501 | $("#" + this.dateListId).append(td); 502 | } else { 503 | var firstTd = (this.mOpts.theme == 'ta' ? $("#" + this.dateListId).find('table').get(0) : $("#" + this.dateListId).find('td').get(0)); 504 | $(firstTd).before(td); 505 | } 506 | endDate.setMonth(endDate.getMonth() - 1, 1); 507 | } 508 | // 日历开始时间 509 | this.calendar_startDate = new Date(endDate.getFullYear(), endDate.getMonth() + 1, 1); 510 | } 511 | 512 | // 上一个月 513 | $('#' + this.preMonth).bind('click', function() { 514 | __method.calendar_endDate.setMonth(__method.calendar_endDate.getMonth() - 1, 1); 515 | __method.mOpts.endDate = __method.date2ymd(__method.calendar_endDate).join('-'); 516 | __method.init(isCompare); 517 | //如果是单月选择的时候，要控制input输入框 added by johnnyzheng 2011-12-19 518 | if (1 == __method.mOpts.calendars) { 519 | if ('' == $('#' + __method.startDateId).val()) { 520 | __method.changeInput(__method.startDateId); 521 | } else { 522 | __method.changeInput(__method.endDateId); 523 | } 524 | } 525 | return false; 526 | }); 527 | // 下一个月 528 | $('#' + this.nextMonth).bind('click', function() { 529 | __method.calendar_endDate.setMonth(__method.calendar_endDate.getMonth() + 1, 1); 530 | __method.mOpts.endDate = __method.date2ymd(__method.calendar_endDate).join('-'); 531 | __method.init(isCompare); 532 | //如果是单月选择的时候，要控制input输入框 added by johnnyzheng 2011-12-19 533 | if (1 == __method.mOpts.calendars) { 534 | if ('' == $('#' + __method.startDateId).val()) { 535 | __method.changeInput(__method.startDateId); 536 | } else { 537 | __method.changeInput(__method.endDateId); 538 | } 539 | } 540 | return false; 541 | }); 542 | 543 | //如果有用户自定义选择月份，则为其绑定事件 544 | if (this.mOpts.magicSelect) this.bindChangeForSelect(); 545 | 546 | 547 | // 初始化时间选区背景 548 | if (this.endDateId != this.dateInput && this.endCompareDateId != this.dateInput) { 549 | (isNeedCompare && typeof(isCompare) != 'undefined') ? this.addCSS(1): this.addCSS(0); 550 | } 551 | 552 | if (isNeedCompare && typeof(isCompare) != 'undefined') { 553 | __method.addCSS(1); 554 | } else { 555 | __method.addCSS(0); 556 | 557 | } 558 | 559 | // 隐藏对比日期框 560 | $('#' + __method.inputCompareId).css('display', isNeedCompare ? '' : 'none'); 561 | $('#' + this.compareInputDiv).css('display', $('#' + this.compareCheckboxId).attr('checked') ? '' : 'none'); 562 | //昨天，今天，最近7天，最近30天快捷的点击，样式要自己定义，id可以传递默认，也可覆盖 563 | for (var property in __method.periodObj) { 564 | if ($('#' + property).length > 0) { 565 | $('#' + property).unbind('click'); 566 | $('#' + property).bind('click', function() { 567 | //处理点击样式 568 | var cla = __method.mOpts.theme == 'ta' ? 'active' : 'a'; 569 | $(this).parent().nextAll().removeClass(cla); 570 | $(this).parent().prevAll().removeClass(cla); 571 | $(this).parent().addClass(cla); 572 | //拼接提交时间串 573 | var timeObj = __method.getSpecialPeriod(__method.periodObj[$(this).attr('id')]); 574 | $('#' + __method.startDateId).val(__method.formatDate(timeObj.otherday)); 575 | $('#' + __method.endDateId).val(__method.formatDate(timeObj.today)); 576 | $('#' + __method.mOpts.startDateId).val($('#' + __method.startDateId).val()); 577 | $('#' + __method.mOpts.endDateId).val($('#' + __method.endDateId).val()); 578 | __method.mOpts.theme == 'ta' ? $('#' + __method.compareInputDiv).hide() : $('#' + __method.inputCompareId).css('display', 'none'); 579 | $('#' + __method.compareCheckboxId).attr('checked', false); 580 | $('#' + __method.mOpts.compareCheckboxId).attr('checked', false); 581 | $('#' + this.compareInputDiv).css('display', $('#' + this.compareCheckboxId).attr('checked') ? '' : 'none'); 582 | __method.close(1); 583 | //于此同时清空对比时间框的时间 584 | $('#' + __method.startCompareDateId).val(''); 585 | $('#' + __method.endCompareDateId).val(''); 586 | $('#' + __method.mOpts.startCompareDateId).val(''); 587 | $('#' + __method.mOpts.endCompareDateId).val(''); 588 | $('#' + __method.mOpts.compareCheckboxId).val(0); 589 | 590 | if ($('#' + __method.mOpts.replaceBtn).length > 0) { 591 | $('.contrast').hide(); 592 | $('#' + __method.mOpts.replaceBtn).text('按时间对比'); 593 | } 594 | //点击提交 595 | __method.mOpts.success({ 596 | 'startDate': $('#' + __method.mOpts.startDateId).val(), 597 | 'endDate': $('#' + __method.mOpts.endDateId).val(), 598 | 'needCompare': $('#' + __method.mOpts.compareCheckboxId).val(), 599 | 'startCompareDate': $('#' + __method.mOpts.startCompareDateId).val(), 600 | 'endCompareDate': $('#' + __method.mOpts.endCompareDateId).val() 601 | }); 602 | }); 603 | } 604 | } 605 | 606 | // 让用户手动关闭或提交日历，每次初始化的时候绑定，关闭的时候解绑 by zacharycai 607 | $(document).bind('click', function() { 608 | __method.close(); 609 | }); 610 | 611 | //完全清空日期控件的值 by zacharycai 612 | $('#' + this.inputId).bind('change', function() { 613 | if ($(this).val() === '') { 614 | $('#' + __method.startDateId).val(''); 615 | $('#' + __method.endDateId).val(''); 616 | $('#' + __method.startCompareDateId).val(''); 617 | $('#' + __method.endCompareDateId).val(''); 618 | } 619 | }) 620 | }; 621 | 622 | pickerDateRange.prototype.bindChangeForSelect = function() { 623 | var __method = this; 624 | //气泡弹窗 625 | var _popup = function(btn, ctn, wrap, css) { 626 | css = css || 'open'; 627 | var ITEMS_TIMEOUT = null, 628 | time_out = 500; 629 | 630 | function hidePop() { 631 | $('#' + ctn).removeClass(css); 632 | } 633 | 634 | function showPop() { 635 | $('#' + ctn).addClass(css); 636 | } 637 | 638 | function isPopShow() { 639 | return $('#' + ctn).attr('class') == css; 640 | } 641 | 642 | 643 | $("#" + btn).click(function() { 644 | isPopShow() ? hidePop() : showPop(); 645 | }).mouseover(function() { 646 | clearTimeout(ITEMS_TIMEOUT); 647 | }).mouseout(function() { 648 | ITEMS_TIMEOUT = setTimeout(hidePop, time_out); 649 | }); 650 | 651 | $('#' + wrap).mouseover(function() { 652 | clearTimeout(ITEMS_TIMEOUT); 653 | }).mouseout(function() { 654 | ITEMS_TIMEOUT = setTimeout(hidePop, time_out); 655 | }); 656 | }; 657 | 658 | //自定义选择的触发动作 659 | try { 660 | $("#" + this.dateListId).find('div[id*="selected"]').each(function() { 661 | //绑定pop 662 | var _match = $(this).attr('id').match(/(\w+)_(\d)/i); 663 | if (_match) { 664 | var _name = _match[1]; //名称 665 | var _idx = _match[2]; //下标 666 | 667 | if (_name == 'yselected') { 668 | _popup('_ybtn_' + _idx, $(this).attr('id'), '_yctn_' + _idx); 669 | } else if (_name == 'mselected') { 670 | _popup('_mbtn_' + _idx, $(this).attr('id'), '_mctn_' + _idx); 671 | } 672 | 673 | $(this).find('li a').each(function() { 674 | $(this).click(function() { 675 | var match = $(this).parents('.select_wrap').attr('id').match(/(\w+)_(\d)/i); 676 | //if(match){ 677 | var name = match[1]; //名称 678 | var idx = match[2]; //下标 679 | var nt = null; 680 | if (idx ^ 1 == 0) { 681 | //开始 682 | if (name == 'yselected') { 683 | __method.calendar_startDate.setYear($(this).text() * 1, 1); 684 | //__method.calendar_startDate.setMonth(__method.str2date($('#'+__method.startDateId).val()).getMonth(), 1); 685 | } else if (name = 'mselected') { 686 | //__method.calendar_startDate.setYear(__method.str2date($('#'+__method.startDateId).val()).getFullYear(), 1); 687 | __method.calendar_startDate.setMonth($(this).text() * 1 - 1, 1); 688 | } 689 | __method.mOpts.startDate = __method.date2ymd(__method.calendar_startDate).join('-'); 690 | nt = __method.fillDate(__method.calendar_startDate.getFullYear(), __method.calendar_startDate.getMonth(), idx); 691 | } else { 692 | //结束 693 | if (name == 'yselected') { 694 | __method.calendar_endDate.setYear($(this).text() * 1, 1); 695 | //__method.calendar_endDate.setMonth(__method.str2date($('#'+__method.endDateId).val()).getMonth(), 1); 696 | } else if (name = 'mselected') { 697 | //__method.calendar_endDate.setYear(__method.str2date($('#'+__method.endDateId).val()).getFullYear(), 1); 698 | __method.calendar_endDate.setMonth($(this).text() * 1 - 1, 1); 699 | } 700 | __method.mOpts.endDate = __method.date2ymd(__method.calendar_endDate).join('-'); 701 | nt = __method.fillDate(__method.calendar_endDate.getFullYear(), __method.calendar_endDate.getMonth(), idx); 702 | } 703 | var tb = $("#" + __method.dateListId).find('table').get(idx ^ 1); 704 | $(tb).replaceWith(nt); 705 | //} 706 | __method.removeCSS(0); 707 | __method.bindChangeForSelect(); 708 | }); 709 | }); 710 | } 711 | }); 712 | } catch (e) { 713 | window.console && console.log(e); 714 | } 715 | } 716 | /** 717 | * @description 计算今天，昨天，最近7天，最近30天返回的时间范围 718 | * @param {Num} period 快捷选择的时间段，今天、昨天、最近7天、最近30天 719 | */ 720 | pickerDateRange.prototype.getSpecialPeriod = function(period) { 721 | var __method = this; 722 | var date = new Date(); 723 | //如果今天不可用，则从昨天向前推 added by johnnyzheng 12-07 724 | (true == __method.mOpts.isTodayValid && ('' != __method.mOpts.isTodayValid) || 2 > period) ? '' : date.setTime(date.getTime() - (1 * 24 * 60 * 60 * 1000)); 725 | var timeStamp = ((date.getTime() - (period * 24 * 60 * 60 * 1000)) < (__method.mOpts.minValidDate * 1000)) ? (__method.mOpts.minValidDate * 1000) : (date.getTime() - (period * 24 * 60 * 60 * 1000)); 726 | var todayStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); 727 | date.setTime(timeStamp); 728 | var otherdayStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); 729 | if (period == __method.periodObj.aYesterday) { 730 | todayStr = otherdayStr; 731 | } 732 | return { 733 | today: todayStr, 734 | otherday: otherdayStr 735 | }; 736 | } 737 | 738 | pickerDateRange.prototype.getCurrentDate = function() { 739 | return { 740 | 'startDate': $('#' + this.mOpts.startDateId).val(), 741 | 'endDate': $('#' + this.mOpts.endDateId).val(), 742 | 'needCompare': $('#' + this.mOpts.compareCheckboxId).val(), 743 | 'startCompareDate': $('#' + this.mOpts.startCompareDateId).val(), 744 | 'endCompareDate': $('#' + this.mOpts.endCompareDateId).val() 745 | }; 746 | }; 747 | 748 | /** 749 | * @description 移除选择日期面板的样式 750 | * @param {Boolean} isCompare 是否是对比日期面板 751 | * @param {String} specialClass 特殊的样式，这里默认是常规和对比日期两种样式的重合样式 752 | */ 753 | pickerDateRange.prototype.removeCSS = function(isCompare, specialClass) { 754 | // 初始化对比时间重合部分的样式类 755 | if ('undefined' == typeof(specialClass)) { 756 | specialClass = this.mOpts.theme + '_' + this.mOpts.coincideCss; 757 | } 758 | // 是否移除对比部分的样式:0 日期选择;1 对比日期选择 759 | if ('undefined' == typeof(isCompare)) { 760 | isCompare = 0; 761 | } 762 | 763 | // 整个日期列表的开始日期 764 | var s_date = this.calendar_startDate; 765 | var e_date = this.calendar_endDate; 766 | //如果是用户自定义选择的话，需要充值样式边界日期 767 | if (this.mOpts.magicSelect) { 768 | s_date = this.str2date($('#' + this.startDateId).val()); 769 | e_date = this.str2date($('#' + this.endDateId).val()); 770 | } 771 | var bDate = new Date(s_date.getFullYear(), s_date.getMonth(), s_date.getDate()); 772 | var cla = ''; 773 | // 从开始日期循环到结束日期 774 | for (var d = new Date(bDate); d.getTime() <= e_date.getTime(); d.setDate(d.getDate() + 1)) { 775 | if (0 == isCompare) { 776 | // 移除日期样式 777 | cla = this.mOpts.theme + '_' + this.mOpts.selectCss; 778 | } else { 779 | // 移除对比日期样式 780 | cla = this.mOpts.theme + '_' + this.mOpts.compareCss; 781 | } 782 | // 移除指定样式 783 | $('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(cla); 784 | $('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(this.mOpts.firstCss).removeClass(this.mOpts.lastCss).removeClass(this.mOpts.clickCss); 785 | } 786 | }; 787 | 788 | /** 789 | * @description 为选中的日期加上样式：1=比较时间；0=时间范围 790 | * @param {Boolean} isCompare 是否是对比日期面板 791 | * @param {String} specialClass 特殊的样式，这里默认是常规和对比日期两种样式的重合样式 792 | */ 793 | pickerDateRange.prototype.addCSS = function(isCompare, specialClass) { 794 | 795 | // 初始化对比时间重合部分的样式类 796 | if ('undefined' == typeof(specialClass)) { 797 | specialClass = this.mOpts.theme + '_' + this.mOpts.coincideCss; 798 | } 799 | // 是否移除对比部分的样式:0 日期选择;1 对比日期选择 800 | if ('undefined' == typeof(isCompare)) { 801 | isCompare = 0; 802 | } 803 | // 获取4个日期 804 | var startDate = this.str2date($('#' + this.startDateId).val()); 805 | var endDate = this.str2date($('#' + this.endDateId).val()); 806 | var startCompareDate = this.str2date($('#' + this.startCompareDateId).val()); 807 | var endCompareDate = this.str2date($('#' + this.endCompareDateId).val()); 808 | 809 | // 循环开始日期 810 | var sDate = 0 == isCompare ? startDate : startCompareDate; 811 | // 循环结束日期 812 | var eDate = 0 == isCompare ? endDate : endCompareDate; 813 | var cla = ''; 814 | for (var d = new Date(sDate); d.getTime() <= eDate.getTime(); d.setDate(d.getDate() + 1)) { 815 | if (0 == isCompare) { 816 | // 添加日期样式 817 | cla = this.mOpts.theme + '_' + this.mOpts.selectCss; 818 | $('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(this.mOpts.firstCss).removeClass(this.mOpts.lastCss).removeClass(this.mOpts.clickCss); 819 | $('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).removeClass(cla); 820 | } else { 821 | // 添加对比日期样式 822 | cla = this.mOpts.theme + '_' + this.mOpts.compareCss; 823 | } 824 | 825 | $('#' + this.calendarId + '_' + this.date2ymd(d).join('-')).attr('class', cla); 826 | } 827 | if (this.mOpts.theme == 'ta') { 828 | //为开始结束添加特殊样式 829 | $('#' + this.calendarId + '_' + this.date2ymd(new Date(sDate)).join('-')).removeClass().addClass(this.mOpts.firstCss); 830 | $('#' + this.calendarId + '_' + this.date2ymd(new Date(eDate)).join('-')).removeClass().addClass(this.mOpts.lastCss); 831 | //如果开始结束时间相同 832 | sDate.getTime() == eDate.getTime() && $('#' + this.calendarId + '_' + this.date2ymd(new Date(eDate)).join('-')).removeClass().addClass(this.mOpts.clickCss); 833 | } 834 | }; 835 | 836 | /** 837 | * @description 判断开始、结束日期是否处在允许的范围内 838 | * @param {String} startYmd 开始时间字符串 839 | * @param {String} endYmd 结束时间字符串 840 | */ 841 | pickerDateRange.prototype.checkDateRange = function(startYmd, endYmd) { 842 | var sDate = this.str2date(startYmd); 843 | var eDate = this.str2date(endYmd); 844 | var sTime = sDate.getTime(); 845 | var eTime = eDate.getTime(); 846 | var minEDate, maxEDate; 847 | 848 | if (eTime >= sTime) { 849 | // 判断是否超过最大日期外 850 | maxEDate = this.str2date(startYmd); 851 | maxEDate.setMonth(maxEDate.getMonth() + this.mOpts.monthRangeMax); 852 | maxEDate.setDate(maxEDate.getDate() + this.mOpts.dayRangeMax - 1); 853 | if (maxEDate.getTime() < eTime) { 854 | alert('结束日期不能大于：' + this.date2ymd(maxEDate).join('-')); 855 | return false; 856 | } 857 | } else { 858 | // 判断是否超过最大日期外 859 | maxEDate = this.str2date(startYmd); 860 | maxEDate.setMonth(maxEDate.getMonth() - this.mOpts.monthRangeMax); 861 | maxEDate.setDate(maxEDate.getDate() - this.mOpts.dayRangeMax + 1); 862 | if (maxEDate.getTime() > eTime) { 863 | alert('开始日期不能小于：' + this.date2ymd(maxEDate).join('-')); 864 | return false; 865 | } 866 | } 867 | return true; 868 | } 869 | 870 | /** 871 | * @description 选择日期 872 | * @param {String} ymd 时间字符串 873 | */ 874 | pickerDateRange.prototype.selectDate = function(ymd) { 875 | //点击日期点的时候添加对应输入框的样式，而不是之前的 聚焦到输入框时显示样式 by zacharycai 876 | this.changeInput(this.dateInput); 877 | // 格式化日期 878 | var ymdFormat = this.formatDate(ymd); 879 | 880 | // start <-> end 切换 881 | if (this.startDateId == this.dateInput) { 882 | // 移除样式 883 | this.removeCSS(0); 884 | this.removeCSS(1); 885 | // 为当前点加样式 886 | $('#' + this.calendarId + '_' + ymd).attr('class', (this.mOpts.theme == 'ta' ? this.mOpts.clickCss : this.mOpts.theme + '_' + this.mOpts.selectCss)); 887 | // 获取开始时间的初始值 888 | this.startDefDate = $('#' + this.dateInput).val(); 889 | // 更改对应输入框的值 890 | $('#' + this.dateInput).val(ymdFormat); 891 | // 切换输入框焦点,如果是实时数据那么选择一天的数据 892 | if (true == this.mOpts.singleCompare || true == this.mOpts.isSingleDay) { 893 | this.dateInput = this.startDateId; 894 | $('#' + this.endDateId).val(ymdFormat); 895 | (this.mOpts.shortOpr || this.mOpts.autoSubmit) && this.close(1); 896 | this.mOpts.success({ 897 | 'startDate': $('#' + this.mOpts.startDateId).val(), 898 | 'endDate': $('#' + this.mOpts.endDateId).val(), 899 | 'needCompare': $('#' + this.mOpts.compareCheckboxId).val(), 900 | 'startCompareDate': $('#' + this.mOpts.startCompareDateId).val(), 901 | 'endCompareDate': $('#' + this.mOpts.endCompareDateId).val() 902 | }); 903 | 904 | } else { 905 | this.dateInput = this.endDateId; 906 | } 907 | 908 | } else if (this.endDateId == this.dateInput) { 909 | // 如果开始时间未选 910 | if ('' == $('#' + this.startDateId).val()) { 911 | this.dateInput = this.startDateId; 912 | this.selectDate(ymd); 913 | return false; 914 | } 915 | // 判断用户选择的时间范围 916 | if (false == this.checkDateRange($('#' + this.startDateId).val(), ymd)) { 917 | return false; 918 | } 919 | // 如果结束时间小于开始时间 920 | if (-1 == this.compareStrDate(ymd, $('#' + this.startDateId).val())) { 921 | // 更改对应输入框的值(结束时间) 922 | $('#' + this.dateInput).val($('#' + this.startDateId).val()); 923 | // 更改对应输入框的值(开始时间) 924 | $('#' + this.startDateId).val(ymdFormat); 925 | ymdFormat = $('#' + this.dateInput).val(); 926 | } 927 | // 更改对应输入框的值 928 | $('#' + this.dateInput).val(ymdFormat); 929 | // 切换输入框焦点 930 | this.dateInput = this.startDateId; 931 | this.removeCSS(0); 932 | this.addCSS(0); 933 | //this.addCSS(0, this.mOpts.coincideCss); 934 | this.startDefDate = ''; 935 | if (this.mOpts.autoSubmit) { 936 | this.close(1); 937 | this.mOpts.success({ 938 | 'startDate': $('#' + this.mOpts.startDateId).val(), 939 | 'endDate': $('#' + this.mOpts.endDateId).val(), 940 | 'needCompare': $('#' + this.mOpts.compareCheckboxId).val(), 941 | 'startCompareDate': $('#' + this.mOpts.startCompareDateId).val(), 942 | 'endCompareDate': $('#' + this.mOpts.endCompareDateId).val() 943 | }); 944 | } 945 | } else if (this.startCompareDateId == this.dateInput) { 946 | // 移除样式 947 | this.removeCSS(1); 948 | this.removeCSS(0); 949 | // 为当前点加样式 950 | $('#' + this.calendarId + '_' + ymd).attr('class', (this.mOpts.theme == 'ta' ? this.mOpts.clickCss : this.mOpts.theme + '_' + this.mOpts.compareCss)); 951 | // 获取开始时间的初始值 952 | this.startDefDate = $('#' + this.dateInput).val(); 953 | // 更改对应输入框的值 954 | $('#' + this.dateInput).val(ymdFormat); 955 | // 切换输入框焦点 956 | if (true == this.mOpts.singleCompare || true == this.mOpts.isSingleDay) { 957 | this.dateInput = this.startCompareDateId; 958 | $('#' + this.endCompareDateId).val(ymdFormat); 959 | (this.mOpts.shortOpr || this.mOpts.autoSubmit) && this.close(1); 960 | this.mOpts.success({ 961 | 'startDate': $('#' + this.mOpts.startDateId).val(), 962 | 'endDate': $('#' + this.mOpts.endDateId).val(), 963 | 'needCompare': $('#' + this.mOpts.compareCheckboxId).val(), 964 | 'startCompareDate': $('#' + this.mOpts.startCompareDateId).val(), 965 | 'endCompareDate': $('#' + this.mOpts.endCompareDateId).val() 966 | }); 967 | } else { 968 | this.dateInput = this.endCompareDateId; 969 | } 970 | 971 | } else if (this.endCompareDateId == this.dateInput) { 972 | // 如果开始时间未选 973 | if ('' == $('#' + this.startCompareDateId).val()) { 974 | this.dateInput = this.startCompareDateId; 975 | this.selectDate(ymd); 976 | return false; 977 | } 978 | // 判断用户选择的时间范围 979 | if (false == this.checkDateRange($('#' + this.startCompareDateId).val(), ymd)) { 980 | return false; 981 | } 982 | // 如果结束时间小于开始时间 983 | if (-1 == this.compareStrDate(ymd, $('#' + this.startCompareDateId).val())) { 984 | // 更改对应输入框的值(结束时间) 985 | $('#' + this.dateInput).val($('#' + this.startCompareDateId).val()); 986 | // 更改对应输入框的值(开始时间) 987 | $('#' + this.startCompareDateId).val(ymdFormat); 988 | ymdFormat = $('#' + this.dateInput).val(); 989 | } 990 | // 更改对应输入框的值 991 | $('#' + this.dateInput).val(ymdFormat); 992 | // 切换输入框焦点 993 | this.dateInput = this.startCompareDateId; 994 | //this.addCSS(1, this.mOpts.coincideCss); 995 | this.removeCSS(1); 996 | this.addCSS(1); 997 | this.startDefDate = ''; 998 | if (this.mOpts.autoSubmit) { 999 | this.close(1); 1000 | this.mOpts.success({ 1001 | 'startDate': $('#' + this.mOpts.startDateId).val(), 1002 | 'endDate': $('#' + this.mOpts.endDateId).val(), 1003 | 'needCompare': $('#' + this.mOpts.compareCheckboxId).val(), 1004 | 'startCompareDate': $('#' + this.mOpts.startCompareDateId).val(), 1005 | 'endCompareDate': $('#' + this.mOpts.endCompareDateId).val() 1006 | }); 1007 | } 1008 | } 1009 | // 切换到下一个输入框 1010 | // this.changeInput(this.dateInput); 1011 | }; 1012 | 1013 | /** 1014 | * @description显示日期选择框 1015 | * @param {Boolean} isCompare 是否是对比日期选择框 1016 | * @param {Object} __method 时期选择器超级对象 1017 | */ 1018 | pickerDateRange.prototype.show = function(isCompare, __method) { 1019 | $('#' + __method.dateRangeDiv).css('display', isCompare ? 'none' : ''); 1020 | $('#' + __method.dateRangeCompareDiv).css('display', isCompare ? '' : 'none'); 1021 | var pos = isCompare ? $('#' + this.inputCompareId).offset() : $('#' + this.inputId).offset(); 1022 | var offsetHeight = isCompare ? $('#' + this.inputCompareId).height() : $('#' + this.inputId).height(); 1023 | var clientWidth = parseInt($(document.body)[0].clientWidth); 1024 | var left = pos.left; 1025 | $("#" + this.calendarId).css('display', 'block'); 1026 | if (true == this.mOpts.singleCompare || true == this.mOpts.isSingleDay) { 1027 | $('#' + this.endDateId).css('display', 'none'); 1028 | $('#' + this.endCompareDateId).css('display', 'none'); 1029 | $('#' + this.mOpts.joinLineId).css('display', 'none'); 1030 | $('.' + this.mOpts.joinLineId).css('display', 'none'); 1031 | } 1032 | // 如果和输入框左对齐时超出了宽度范围，则右对齐 1033 | if (0 < clientWidth && $("#" + this.calendarId).width() + pos.left > clientWidth) { 1034 | left = pos.left + $('#' + this.inputId).width() - $("#" + this.calendarId).width() + ((/msie/i.test(navigator.userAgent) && !(/opera/i.test(navigator.userAgent))) ? 5 : 0); 1035 | __method.mOpts.theme == 'ta' && (left += 50); 1036 | } 1037 | $("#" + this.calendarId).css('left', left + 'px'); 1038 | //$("#" + this.calendarId).css('top', pos.top + (offsetHeight ? offsetHeight- 1 : (__method.mOpts.theme=='ta'?35:22)) + 'px'); 1039 | $("#" + this.calendarId).css('top', pos.top + (__method.mOpts.theme == 'ta' ? 35 : 22) + 'px'); 1040 | //第一次显示的时候，一定要初始化输入框 1041 | isCompare ? this.changeInput(this.startCompareDateId) : this.changeInput(this.startDateId); 1042 | return false; 1043 | }; 1044 | 1045 | /** 1046 | * @description 关闭日期选择框 1047 | * @param {Boolean} btnSubmit 是否是点击确定按钮关闭的 1048 | */ 1049 | pickerDateRange.prototype.close = function(btnSubmit) { 1050 | var __method = this; 1051 | //by zacharycai 关闭后就解绑了 1052 | //$(document).unbind('click'); 1053 | 1054 | // 把开始、结束时间显示到输入框 (PS:如果选择的今日，昨日，则只填入一个日期) 1055 | // 如果开始和结束同个时间也照样分段by zacharycai 1056 | //$('#' + this.inputId).val($('#' + this.startDateId).val() + ($('#' + this.startDateId).val() == $('#' + this.endDateId).val() ? '' : this.mOpts.defaultText + $('#' + this.endDateId).val())); 1057 | if (btnSubmit) { 1058 | //如果是单日快捷选择 1059 | if (this.mOpts.shortOpr === true) { 1060 | $('#' + this.inputId).val($('#' + this.startDateId).val()); 1061 | $('#' + this.inputCompareId).val($('#' + this.startCompareDateId).val()); 1062 | } else { 1063 | $('#' + this.inputId).val($('#' + this.startDateId).val() + ('' == $('#' + this.endDateId).val() ? '' : this.mOpts.defaultText + $('#' + this.endDateId).val())); 1064 | } 1065 | //判断当前天是否可选，来决定从后往前推修改日期是从哪一点开始 1066 | var nDateTime = ((true == this.mOpts.isTodayValid && '' != this.mOpts.isTodayValid)) ? new Date().getTime() : new Date().getTime() - (1 * 24 * 60 * 60 * 1000); 1067 | var bDateTime = this.str2date($('#' + this.startDateId).val()).getTime(); 1068 | var eDateTime = this.str2date($('#' + this.endDateId).val()).getTime(); 1069 | //如果endDateTime小于bDateTime 相互交换 1070 | if (eDateTime < bDateTime) { 1071 | var tmp = $('#' + this.startDateId).val(); 1072 | $('#' + this.startDateId).val($('#' + this.endDateId).val()); 1073 | $('#' + this.endDateId).val(tmp); 1074 | } 1075 | var _val = this.mOpts.shortOpr == true ? $('#' + this.startDateId).val() : ($('#' + this.startDateId).val() + ('' == $('#' + this.endDateId).val() ? '' : this.mOpts.defaultText + $('#' + this.endDateId).val())); 1076 | // 把开始、结束时间显示到输入框 (PS:如果选择的今日，昨日，则只填入一个日期) 1077 | var input = document.getElementById(this.inputId); 1078 | if (input && input.tagName == 'INPUT') { 1079 | $('#' + this.inputId).val(_val); 1080 | $('#' + this.inputCompareId).is(':visible') && $('#' + this.inputCompareId).val(_compareVal); 1081 | } else { 1082 | $('#' + this.inputId).html(_val); 1083 | $('#' + this.inputCompareId).is(':visible') && $('#' + this.inputCompareId).html(_compareVal); 1084 | } 1085 | // //在js侧就做好日期校准，以前面的日期选择的跨度为准，如果后面的跨度超过了当前可用时间，则以当前可用时间向前推 added by johnnyzheng 11-29 1086 | if (this.mOpts.theme != 'ta') { 1087 | if ('' != $('#' + this.startCompareDateId).val() && '' != $('#' + this.endCompareDateId).val()) { 1088 | var bcDateTime = this.str2date($('#' + this.startCompareDateId).val()).getTime(); 1089 | var ecDateTime = this.str2date($('#' + this.endCompareDateId).val()).getTime(); 1090 | var _ecDateTime = bcDateTime + eDateTime - bDateTime; 1091 | if (_ecDateTime > nDateTime) { 1092 | //如果计算得到的时间超过了当前可用时间，那么就和服务器端保持一致，将当前可用的天数向前推日期选择器的跨度 added by johnnyzheng 11-29 1093 | _ecDateTime = nDateTime; 1094 | $('#' + this.startCompareDateId).val(this.formatDate(this.date2ymd(new Date(_ecDateTime + bDateTime - eDateTime)).join('-'))); 1095 | } 1096 | $('#' + this.endCompareDateId).val(this.formatDate(this.date2ymd(new Date(_ecDateTime)).join('-'))); 1097 | 1098 | //把开始结束对比时间大小重新矫正一下 1099 | var bcDateTime = this.str2date($('#' + this.startCompareDateId).val()).getTime(); 1100 | var ecDateTime = this.str2date($('#' + this.endCompareDateId).val()).getTime(); 1101 | if (ecDateTime < bcDateTime) { 1102 | var tmp = $('#' + this.startCompareDateId).val(); 1103 | $('#' + this.startCompareDateId).val($('#' + this.endCompareDateId).val()); 1104 | $('#' + this.endCompareDateId).val(tmp); 1105 | } 1106 | } 1107 | } 1108 | //把对比时间填入输入框 (PS:如果选择今日，昨日，则只填入一个日期) 1109 | //$('#' + this.inputCompareId).val($('#' + this.startCompareDateId).val() + this.mOpts.defaultText + $('#' + this.endCompareDateId).val()); 1110 | var _compareVal = this.mOpts.shortOpr == true ? $('#' + this.startCompareDateId).val() : ($('#' + this.startCompareDateId).val() + ('' == $('#' + this.endCompareDateId).val() ? '' : this.mOpts.defaultText + $('#' + this.endCompareDateId).val())); 1111 | if (input && input.tagName == 'INPUT') { 1112 | $('#' + this.inputCompareId).val(_compareVal); 1113 | } else { 1114 | $('#' + this.inputCompareId).html(_compareVal); 1115 | } 1116 | // 计算相隔天数 1117 | var step = (bDateTime - eDateTime) / 86400000; 1118 | 1119 | // 更改目标元素值 1120 | $('#' + this.mOpts.startDateId).val($('#' + this.startDateId).val()); 1121 | $('#' + this.mOpts.endDateId).val($('#' + this.endDateId).val()); 1122 | $('#' + this.mOpts.startCompareDateId).val($('#' + this.startCompareDateId).val()); 1123 | $('#' + this.mOpts.endCompareDateId).val($('#' + this.endCompareDateId).val()); 1124 | //点击确定按钮进行查询后将取消所有的今天 昨天 最近7天的快捷链接 added by johnnyzheng 11-29 1125 | for (var property in this.periodObj) { 1126 | if ($('#' + this.mOpts[property])) { 1127 | $('#' + this.mOpts[property]).parent().removeClass('a'); 1128 | } 1129 | } 1130 | } 1131 | // 隐藏日期选择框 延迟200ms 关闭日期选择框 1132 | $("#" + __method.calendarId).css('display', 'none'); 1133 | return false; 1134 | }; 1135 | 1136 | /** 1137 | * @description 日期填充函数 1138 | * @param {Num} year 年 1139 | * @param {Num} month 月 1140 | */ 1141 | pickerDateRange.prototype.fillDate = function(year, month, index) { 1142 | var __method = this; 1143 | var isTaTheme = this.mOpts.theme == 'ta'; 1144 | // 当月第一天 1145 | var firstDayOfMonth = new Date(year, month, 1); 1146 | var dateBegin = new Date(year, month, 1); 1147 | var w = dateBegin.getDay(); 1148 | // 计算应该开始的日期 1149 | dateBegin.setDate(1 - w); 1150 | 1151 | // 当月最后一天 1152 | var lastDayOfMonth = new Date(year, month + 1, 0); 1153 | var dateEnd = new Date(year, month + 1, 0); 1154 | w = dateEnd.getDay(); 1155 | // 计算应该结束的日期 1156 | dateEnd.setDate(dateEnd.getDate() + 6 - w); 1157 | 1158 | var today = new Date(); 1159 | var dToday = today.getDate(); 1160 | var mToday = today.getMonth(); 1161 | var yToday = today.getFullYear(); 1162 | 1163 | var table = document.createElement('table'); 1164 | if (isTaTheme) { 1165 | table.className = this.mOpts.dateTable; 1166 | 1167 | cap = document.createElement('caption'); 1168 | 1169 | //如果是magicSelect，用户自定义的选择年和月份 1170 | if (this.mOpts.magicSelect) { 1171 | var yh = ['
' + year + '
    '] 1172 | var mh = ['
    ' + (month + 1) + '
      '] 1173 | 1174 | //var yh = ['']; 1176 | i = 1; 1177 | yt = yToday; 1178 | do { 1179 | //yh.push(''); 1180 | //mh.push(''); 1181 | yh.push('
    • ' + (yt--) + '
      • '); 1182 | mh.push('
    • ' + (i++) + '
      • '); 1183 | } while (i <= 12); 1184 | //yh.push(''); 1185 | //mh.push(''); 1186 | yh.push('
    '); 1187 | mh.push('
'); 1188 | $(cap).append(yh.join('') + ' 年 ' + mh.join('') + ' 月 '); 1189 | 1190 | } else { 1191 | $(cap).append(year + '年' + (month + 1) + '月'); 1192 | } 1193 | 1194 | $(table).append(cap); 1195 | thead = document.createElement('thead'); 1196 | tr = document.createElement('tr'); 1197 | var days = ['日', '一', '二', '三', '四', '五', '六']; 1198 | for (var i = 0; i < 7; i++) { 1199 | th = document.createElement('th'); 1200 | $(th).append(days[i]); 1201 | $(tr).append(th); 1202 | } 1203 | $(thead).append(tr); 1204 | $(table).append(thead); 1205 | 1206 | tr = document.createElement('tr'); 1207 | td = document.createElement('td'); 1208 | // 如果是最后一个月的日期，则加上下一个月的链接 1209 | if (!this.mOpts.magicSelect) { 1210 | if (0 == index) { 1211 | $(td).append(''); 1212 | } 1213 | // 如果是第一个月的日期，则加上上一个月的链接 1214 | if (index + 1 == this.mOpts.calendars) { 1215 | $(td).append(''); 1216 | } 1217 | } 1218 | 1219 | // $(td).append('' + year + '年' + (month + 1) + '月' + ''); 1220 | $(td).attr('colSpan', 7); 1221 | $(td).css('text-align', 'center'); 1222 | $(tr).append(td); 1223 | $(table).append(tr); 1224 | } else { 1225 | table.className = this.mOpts.theme + '_' + this.mOpts.dateTable; 1226 | 1227 | tr = document.createElement('tr'); 1228 | td = document.createElement('td'); 1229 | // 如果是最后一个月的日期，则加上下一个月的链接 1230 | if (0 == index) { 1231 | $(td).append('next'); 1232 | } 1233 | // 如果是第一个月的日期，则加上上一个月的链接 1234 | if (index + 1 == this.mOpts.calendars) { 1235 | $(td).append('pre'); 1236 | } 1237 | $(td).append(year + '年' + (month + 1) + '月'); 1238 | $(td).attr('colSpan', 7); 1239 | $(td).css('text-align', 'center'); 1240 | $(td).css('background-color', '#F9F9F9'); 1241 | $(tr).append(td); 1242 | $(table).append(tr); 1243 | 1244 | var days = ['日', '一', '二', '三', '四', '五', '六']; 1245 | tr = document.createElement('tr'); 1246 | for (var i = 0; i < 7; i++) { 1247 | td = document.createElement('td'); 1248 | $(td).append(days[i]); 1249 | $(tr).append(td); 1250 | } 1251 | $(table).append(tr); 1252 | } 1253 | // 当前月的所有日期(包括空白位置填充的日期) 1254 | var tdClass = '', 1255 | deviation = 0, 1256 | ymd = ''; 1257 | for (var d = dateBegin; d.getTime() <= dateEnd.getTime(); d.setDate(d.getDate() + 1)) { 1258 | if (d.getTime() < firstDayOfMonth.getTime()) { // 当前月之前的日期 1259 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1260 | deviation = '-1'; 1261 | } else if (d.getTime() > lastDayOfMonth.getTime()) { // 当前月之后的日期 1262 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1263 | deviation = '1'; 1264 | } else if ((this.mOpts.stopToday == true && d.getTime() > today.getTime()) || d.getTime() < __method.mOpts.minValidDate * 1000 || ('' !== __method.mOpts.maxValidDate && d.getTime() > __method.mOpts.maxValidDate * 1000)) { // 当前时间之后的日期，或者开启统计之前的日期 1265 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1266 | deviation = '2'; 1267 | } else { // 当前月日期 1268 | deviation = '0'; 1269 | if (d.getDate() == dToday && d.getMonth() == mToday && d.getFullYear() == yToday) { 1270 | if (true == this.mOpts.isTodayValid) { 1271 | tdClass = this.mOpts.theme + '_' + this.mOpts.isToday; 1272 | } else { 1273 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1274 | deviation = '2'; 1275 | } 1276 | } else { 1277 | tdClass = ''; 1278 | } 1279 | //让周末不可选不可选 1280 | if (this.mOpts.weekendDis && (d.getDay() == 6 || d.getDay() == 0)) { 1281 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1282 | deviation = '3'; 1283 | } 1284 | //让周几不可选 1285 | if (this.mOpts.disCertainDay && this.mOpts.disCertainDay.length > 0) { 1286 | for (var p in this.mOpts.disCertainDay) { 1287 | if (!isNaN(this.mOpts.disCertainDay[p]) && d.getDay() === this.mOpts.disCertainDay[p]) { 1288 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1289 | deviation = '4'; 1290 | } 1291 | } 1292 | } 1293 | //让几号不可选 1294 | if (this.mOpts.disCertainDate && this.mOpts.disCertainDate.length > 0) { 1295 | var isDisabled = false; 1296 | 1297 | for (var p in this.mOpts.disCertainDate) { 1298 | if (!isNaN(this.mOpts.disCertainDate[p]) || isNaN(parseInt(this.mOpts.disCertainDate[p]))) { 1299 | if (this.mOpts.disCertainDate[0] === true) { 1300 | isDisabled = !!(d.getDate() !== this.mOpts.disCertainDate[p]); 1301 | if (!isDisabled) { 1302 | break; 1303 | } 1304 | } else { 1305 | isDisabled = !!(d.getDate() === this.mOpts.disCertainDate[p]); 1306 | if (isDisabled) { 1307 | break; 1308 | } 1309 | } 1310 | 1311 | } 1312 | } 1313 | 1314 | if (isDisabled) { 1315 | tdClass = this.mOpts.theme + '_' + this.mOpts.disableGray; 1316 | deviation = '4'; 1317 | } 1318 | 1319 | } 1320 | } 1321 | 1322 | // 如果是周日 1323 | if (0 == d.getDay()) { 1324 | tr = document.createElement('tr'); 1325 | } 1326 | 1327 | td = document.createElement('td'); 1328 | td.innerHTML = d.getDate(); 1329 | if ('' != tdClass) { 1330 | $(td).attr('class', tdClass); 1331 | } 1332 | 1333 | // 只有当前月可以点击 1334 | if (0 == deviation) { 1335 | ymd = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); 1336 | $(td).attr('id', __method.calendarId + '_' + ymd); 1337 | $(td).css('cursor', 'pointer'); 1338 | (function(ymd) { 1339 | $(td).bind("click", ymd, function() { 1340 | __method.selectDate(ymd); 1341 | return false; 1342 | }); 1343 | })(ymd); 1344 | } 1345 | 1346 | $(tr).append(td); 1347 | 1348 | // 如果是周六 1349 | if (6 == d.getDay()) { 1350 | $(table).append(tr); 1351 | } 1352 | } 1353 | 1354 | return table; 1355 | }; 1356 | 1357 | /** 1358 | * @description 把时间字串转成时间格式 1359 | * @param {String} str 时间字符串 1360 | */ 1361 | pickerDateRange.prototype.str2date = function(str) { 1362 | var ar = str.split('-'); 1363 | // 返回日期格式 1364 | return new Date(ar[0], ar[1] - 1, ar[2]); 1365 | }; 1366 | 1367 | /** 1368 | * @description 比较两个时间字串的大小:1 大于; 0 等于; -1 小于 1369 | * @param {String} b 待比较时间串1 1370 | * @param {String} e 待比较时间串2 1371 | */ 1372 | pickerDateRange.prototype.compareStrDate = function(b, e) { 1373 | var bDate = this.str2date(b); 1374 | var eDate = this.str2date(e); 1375 | 1376 | // 1 大于; 0 等于; -1 小于 1377 | if (bDate.getTime() > eDate.getTime()) { 1378 | return 1; 1379 | } else if (bDate.getTime() == eDate.getTime()) { 1380 | return 0; 1381 | } else { 1382 | return -1; 1383 | } 1384 | }; 1385 | 1386 | /** 1387 | * @description 把时间格式转成对象 1388 | * @param {Date} d 时间 1389 | */ 1390 | pickerDateRange.prototype.date2ymd = function(d) { 1391 | return [d.getFullYear(), (d.getMonth() + 1), d.getDate()]; 1392 | }; 1393 | 1394 | /** 1395 | * @description 切换焦点到当前输入框 1396 | * @param {String} 日期框体ID 1397 | */ 1398 | pickerDateRange.prototype.changeInput = function(ipt) { 1399 | // 强制修改为开始输入框 1400 | if (true == this.mOpts.isSingleDay) { 1401 | ipt = this.startDateId; 1402 | } 1403 | // 所有4个输入框 1404 | var allInputs = [this.startDateId, this.startCompareDateId, this.endDateId, this.endCompareDateId]; 1405 | 1406 | // 如果 ipt 是日期输入框，则为日期样式，否则为对比日期样式 1407 | var cla = ''; 1408 | if (ipt == this.startDateId || ipt == this.endDateId) { 1409 | cla = this.mOpts.theme + '_' + this.mOpts.selectCss; 1410 | } else { 1411 | cla = this.mOpts.theme + '_' + this.mOpts.compareCss; 1412 | } 1413 | if (ipt == this.endDateId && this.mOpts.singleCompare) { 1414 | cla = this.mOpts.theme + '_' + this.mOpts.compareCss; 1415 | } 1416 | 1417 | // 移除所有输入框的附加样式 1418 | for (var i in allInputs) { 1419 | $('#' + allInputs[i]).removeClass(this.mOpts.theme + '_' + this.mOpts.selectCss); 1420 | $('#' + allInputs[i]).removeClass(this.mOpts.theme + '_' + this.mOpts.compareCss); 1421 | } 1422 | 1423 | // 为指定输入框添加样式 1424 | $('#' + ipt).addClass(cla); 1425 | //背景图repeat 1426 | $('#' + ipt).css('background-repeat', 'repeat'); 1427 | // 把输入焦点移到指定输入框 1428 | this.dateInput = ipt; 1429 | }; 1430 | 1431 | /** 1432 | * @description 日期格式化，加前导零 1433 | */ 1434 | pickerDateRange.prototype.formatDate = function(ymd) { 1435 | return ymd.replace(/(\d{4})\-(\d{1,2})\-(\d{1,2})/g, function(ymdFormatDate, y, m, d) { 1436 | if (m < 10) { 1437 | m = '0' + m; 1438 | } 1439 | if (d < 10) { 1440 | d = '0' + d; 1441 | } 1442 | return y + '-' + m + '-' + d; 1443 | }); 1444 | }; -------------------------------------------------------------------------------- /PC_version/images/calendar_all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/PC_version/images/calendar_all.png -------------------------------------------------------------------------------- /PC_version/images/icon_date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/PC_version/images/icon_date.png -------------------------------------------------------------------------------- /PC_version/images/page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/PC_version/images/page.png -------------------------------------------------------------------------------- /PC_version/images/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnnyzheng/DatePicker/135be4dd57d3646ef7f1e265b05ac7ed00c1fb87/PC_version/images/px.png -------------------------------------------------------------------------------- /PC_version/sample.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | DatePicker Demo 6 | 7 | 8 | 9 | 61 | 62 | 63 | 64 |

DatePicker Demo

65 |
66 | 67 |

一、区间时间段的选择：

68 |
69 | 开始时间 : 2015-10-15 70 |
71 | 结束时间 : 2015-11-11 72 |
73 |
74 | 75 |
76 | 77 | 78 | 79 | 80 |
81 |
82 | 96 |
97 |

98 | 示例代码：(更多参数，参见用户手册) 99 |

100 | 101 | <script type="text/javascript"> 102 |
103 | var dateRange = new pickerDateRange('date', { 104 |
105 | isTodayValid : true, 106 |
107 | stopToday : true, 108 |
109 | startDate : '2015-10-15', 110 |
111 | endDate : '2015-11-11', 112 |
113 | defaultText : ' 至 ', 114 |
115 | inputTrigger : 'input_trigger_demo1', //这个结构完全由业务系统自己定义 116 |
117 | success : function(obj) { 118 |
119 | //设置回调句柄 120 |
121 | } 122 |
123 | }); 124 |
125 | </script> 126 |
127 | 128 | 129 | 130 | 131 |

二、单天快捷选择：

132 |
133 | 开始时间 : 2015-11-15 134 |
135 | 结束时间 : 2015-11-15 136 |
137 |
138 | 139 |
140 | 141 | 142 | 143 | 144 |
145 |
146 | 162 |
163 |

164 | 示例代码：(更多参数，参见用户手册) 165 |

166 | 167 | <script type="text/javascript"> 168 |
169 | var dateRange = new pickerDateRange('date', { 170 |
171 | isTodayValid : true, 172 |
173 | startDate : '2015-11-15', 174 |
175 | endDate : '2015-11-15', 176 |
177 | defaultText : ' 至 ', 178 |
179 | isSingleDay : true, 180 |
181 | shortOpr : true, 182 |
183 | autoSubmit:true, 184 |
185 | shortOpr : true, 186 |
187 | inputTrigger : 'input_trigger_demo2', //这个结构完全由业务系统自己定义 188 |
189 | success : function(obj) { 190 |
191 | //设置回调句柄 192 |
193 | } 194 |
195 | }); 196 |
197 | </script> 198 |
199 | 200 | 201 | 202 | 203 | 204 |

三、单选周期性日期不可选择：

205 |
206 | 开始时间 : 2015-11-13 207 |
208 | 结束时间 : 2015-11-13 209 |
210 |
211 | 212 |
213 | 214 | 215 | 216 | 217 |
218 |
219 | 235 |
236 |

237 | 示例代码：(更多参数，参见用户手册) 238 |

239 | 240 | <script type="text/javascript"> 241 |
242 | var dateRange = new pickerDateRange('date', { 243 |
244 | isTodayValid : true, 245 |
246 | startDate : '2015-11-15', 247 |
248 | endDate : '2015-11-15', 249 |
250 | defaultText : ' 至 ', 251 |
252 | isSingleDay : true, 253 |
254 | disCertainDate : [5,15,25], //每月5，15，25日不可选 255 |
256 | inputTrigger : 'input_trigger_demo3', //这个结构完全由业务系统自己定义 257 |
258 | success : function(obj) { 259 |
260 | //设置回调句柄 261 |
262 | } 263 |
264 | }); 265 |
266 | </script> 267 |
268 | 269 | 270 | 271 | 272 | 273 | 274 |

四、自定义时间段选择：

275 |
276 | 开始时间 : 2015-10-13 277 |
278 | 结束时间 : 2015-11-13 279 |
280 |
281 | 282 |
283 | 284 | 285 | 286 | 287 |
288 |
289 | 303 |
304 |

305 | 示例代码：(更多参数，参见用户手册) 306 |

307 | 308 | <script type="text/javascript"> 309 |
310 | var dateRange = new pickerDateRange('date', { 311 |
312 | isTodayValid : true, 313 |
314 | startDate : '2015-11-15', 315 |
316 | endDate : '2015-11-15', 317 |
318 | defaultText : ' 至 ', 319 |
320 | magicSelect : true, 321 |
322 | inputTrigger : 'input_trigger_demo4', //这个结构完全由业务系统自己定义 323 |
324 | success : function(obj) { 325 |
326 | //设置回调句柄 327 |
328 | } 329 |
330 | }); 331 |
332 | </script> 333 |
334 | 335 | 336 | 337 |
338 | 339 | 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

组件说明

2 | 　　日期选择组件，覆盖大部分的日期选择的交互和功能，特别适合基于日期操作的配置类或数据展示类PC端系统或者应用，或者手机端的有日期点选操作的H5应用。 3 | 4 |

文件列表

5 | PC_version（适用PC端的日期选择组件） 6 | + jquery.min.js是官方jQuery1.7.2的压缩版。 7 | + dateRange.js是日期选择器的主JS库。 8 | + dateRange.css 是日期选择器的样式列表。 9 | + ./images 是组件用到的图片资源。 10 | + sample.html 示例页面 11 | 12 | Mobile_version（适用Mobile端的日期选择组件） 13 | + css 样式文件 14 | + images 图片文件 15 | + js 组件用到的移动端dom操作类库zepto.js（必选），还有解决click事件在移动端延迟300ms的fastclick.js（可选） 16 | + sample.html 示例页面 17 | 18 | 19 |

PC_Version使用说明（适用PC端的日期选择组件）

20 | 21 | ### 调用示例（最简单的调用示例）： ### 22 | var dateRange = new pickerDateRange('date_demo3', { 23 | isTodayValid : true, 24 | startDate : '2015-11-14', 25 | endDate : '2015-11-21', 26 | success : function(obj) { 27 | //TODO user define callback handler; 28 | } 29 | }); 30 | 31 | ### 重点参数: ### 32 | #### startDate #### 33 | 这是日期选择器初始化时候，必须传入的开始日期的参数，与endDate成对出现，格式如:'2015-10-10'。 34 | #### calendars #### 35 | 这是定义日期选择面板的月份选择栏位有多少个，默认是两个，即默认展示本月和上一个月的自然日选择。 36 | #### dayRangeMax #### 37 | 控制用户最大可选天数的范围，默认是0，即不限制，假如用户设置为30，那么日期选择器的开始日期和结束日期的最大天数跨度，不得超过30天 38 | #### isTodayValid ##### 39 | 控制今日是否可选的配置项，一般如果系统中提供实时或者今天的日期相关功能，则设置为true，默认是false 40 | #### stopToday #### 41 | 控制日期选择器的可选粒度，如果此配置项配置为true，则表示今天之后的日期将不可选择。 42 | #### isSingleDay #### 43 | 判断此日期选择器是日期复选还是单选，默然是复选，如设置为true，则此日期选择器是单选。 44 | #### weekendDis #### 45 | 有些业务场景是周末不可选的情况，将此配置项设置为true，就可以达到这个效果。 46 | #### disCertainDay #### 47 | 设置一周中周期性的某几天不可选择，如设置为[1,3]，则代表每周的周一、周三不可选择。 48 | #### disCertainDate #### 49 | 设置每个月中周期性的某几天不可选择，如设置为[5,15,25]，则代表每月的5日、15日、25日不可选择。 50 | #### shortOpr #### 51 | 区间选择一天，需要点选两次来确定，如果希望以此点击完成选择操作，则设置为true，默认是false，【确定】【取消】不会隐藏。 52 | #### magicSelect #### 53 | 日期选择器默认切换月份和年份，只能通过向前和向后的按钮，如果希望自定义下拉选择，则可以设置为true， 54 | 就可以通过下来选择自定义一定范围的月份和年，默认是false。 55 | #### autoCommit #### 56 | 日期选择器默认初始化后，并不会提交callback handler的事件，有一些场景希望在业务初始化完毕后就调用， 57 | 比如某些报表系统，希望默认页面完成加载就执行查询，则可以在初始化日期选择器的时候设置为true，默认是false。 58 | #### autoSubmit #### 59 | 隐藏【确定】【取消】按钮，并且直接执行callback handler，默认是false。 60 | #### success #### 61 | 这个是日期选择器最重要的参数之一，绑定日期切换后的回调函数，比如执行查询操作等操作。回调参数会传递当前选择的日期实体。 62 | ###### --- 更多调用示例和参数组合，可参见sample.html --- ###### 63 |

返回值说明

64 | 在回调函数中会讲选择的日期实体回传，供在回调内部访问操作 65 | 66 | retObj = { 67 | startDate:'2015-10-10', 68 | endDate:'2015-10-17', 69 | needCompare:true, 70 | startCompareDate:'2015-10-01', 71 | endCompareDate:'2015-10-08' 72 | } 73 | 74 |

Mobile_Version使用说明（适用Mobile端的日期选择组件）

75 |

调用示例（最简单的调用示例）:

76 | 77 | new atomuDatePicker({ 78 | 'containerId': 'date_container', 79 | 'triggerId' : 'date_trigger', 80 | 'isSingleDay' : true, 81 | 'stopToday' : false, 82 | 'clickSubmit':true, //点选立即提交 83 | 'defaultDate' : '2015-12-31', 84 | 'callback':function(dateObj){ 85 | //todo callback 86 | } 87 | }); 88 | 89 | ### 重点参数: 90 | #### containerId #### 91 | 容器id，用于放日期选择html面板的占位元素ID。 92 | #### defaultDate #### 93 | 默认选中的日期，接受字符串，格式为“2015-12-31”。 94 | #### stopToday #### 95 | 用于控制可选粒度，今天之后的日期是否可选，默认不可选，如需要可选，设置为false。 96 | #### clickSubmit #### 97 | 点击即可提交，不需要【确定】【取消】按钮，设置为true。 98 | #### stopToday #### 99 | 控制日期选择器的可选粒度，如果此配置项配置为true，则表示今天之后的日期将不可选择。 100 | #### ctnCss、wrapCss、selectCss等 #### 101 | 组件预设了一些支持调用方自定义样式的key，来覆盖日期选择器预设的样式。 102 | #### autoSubmit #### 103 | 日期选择器默认初始化后，并不会提交callback handler的事件，有一些场景希望在业务初始化完毕后就调用， 104 | 比如某些报表系统，希望默认页面完成加载就执行查询，则可以在初始化日期选择器的时候设置为true，默认是false。 105 | ###### --- 更多调用示例和参数组合，可参见sample.html --- ###### 106 |

返回值说明

107 | 在回调函数中会讲选择的日期实体回传，供在回调内部访问操作 108 | 
retObj = ‘2015-12-31’
109 | 110 |

欢迎捐赠

111 | 捐赠码 112 | --------------------------------------------------------------------------------