人人商城

calendar.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. var $$ = function(id) {
  2. return "string" == typeof id ? document.getElementById(id) : id;
  3. };
  4. var Class = {
  5. create: function() {
  6. return function() {
  7. this.initialize.apply(this, arguments);
  8. }
  9. }
  10. }
  11. Object.extend = function(destination, source) {
  12. for (var property in source) {
  13. destination[property] = source[property];
  14. }
  15. return destination;
  16. }
  17. var Calendar = Class.create();
  18. Calendar.prototype = {
  19. initialize: function(container, options) {
  20. this.Container = $$(container); //table结构容器
  21. this.Days = []; //日期列表
  22. this.SetOptions(options);
  23. this.Year = this.options.Year;
  24. this.Month = this.options.Month;
  25. this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
  26. this.onSelectDay = this.options.onSelectDay;
  27. this.onToday = this.options.onToday;
  28. this.onFinish = this.options.onFinish;
  29. this.Draw();
  30. },
  31. SetOptions: function(options) {
  32. this.options = { //默认值
  33. Year: new Date().getFullYear(),
  34. Month: new Date().getMonth() + 1,
  35. SelectDay: null,
  36. //选择日期
  37. onSelectDay: function() {},
  38. onToday: function() {},
  39. onFinish: function() {}
  40. };
  41. Object.extend(this.options, options || {});
  42. },
  43. //上月
  44. PreMonth: function() {
  45. //取得上月日期对象
  46. var d = new Date(this.Year, this.Month - 2, 1);
  47. //设置属性
  48. this.Year = d.getFullYear();
  49. this.Month = d.getMonth() + 1;
  50. //重绘日历
  51. this.Draw();
  52. },
  53. //下一个月
  54. NextMonth: function() {
  55. var d = new Date(this.Year, this.Month, 1);
  56. this.Year = d.getFullYear();
  57. this.Month = d.getMonth() + 1;
  58. this.Draw();
  59. },
  60. Draw: function() {
  61. //保存日期列表
  62. var arr = [];
  63. //用当月第一天在一周中的日期值作为当月离第一天的天数
  64. for (var i = 1,
  65. firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++) {
  66. arr.push("");
  67. }
  68. //用当月最后一天在一个月中的日期值作为当月的天数
  69. for (var i = 1,
  70. monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++) {
  71. arr.push(i);
  72. }
  73. // /
  74. var frag = document.createDocumentFragment();
  75. this.Days = [];
  76. while (arr.length > 0) {
  77. //每个星期插入一个tr
  78. var row = document.createElement("tr");
  79. //星期
  80. for (var i = 1; i <= 7; i++) {
  81. var cell = document.createElement("td");
  82. cell.innerHTML = "";
  83. if (arr.length > 0) {
  84. var d = arr.shift();
  85. cell.innerHTML = d;
  86. if (d > 0) {
  87. this.Days[d] = cell;
  88. //获取今日
  89. if (this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())) {
  90. this.onToday(cell);
  91. }
  92. //判断用户是否作了选择
  93. if (this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), this.SelectDay)) {
  94. this.onSelectDay(cell);
  95. }
  96. }
  97. }
  98. row.appendChild(cell);
  99. }
  100. frag.appendChild(row);
  101. }
  102. //此先清空然后再插入(ie的table不能用innerHTML)
  103. while (this.Container.hasChildNodes()) {
  104. this.Container.removeChild(this.Container.firstChild);
  105. }
  106. this.Container.appendChild(frag);
  107. this.onFinish();
  108. },
  109. //判断是否同一日
  110. IsSame: function(d1, d2) {
  111. return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
  112. }
  113. };