calendar.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. // pages/clock/clock-tongji/calendar/calendar.js
  2. let first = true
  3. Component({
  4. /**
  5. * 组件的属性列表
  6. */
  7. properties: {
  8. list: {
  9. type: Array,
  10. value: []
  11. },
  12. },
  13. /**
  14. * 组件的初始数据
  15. */
  16. data: {
  17. weeks: ["一", "二", "三", "四", "五", "六", "日"],
  18. selectedIndex: '',
  19. selectedDay: {},
  20. // 日期list
  21. calendarDays: [],
  22. defaultMonth: '',
  23. defaultDate: '',
  24. blue: ''
  25. },
  26. ready() {
  27. },
  28. /**
  29. * 组件的方法列表
  30. */
  31. methods: {
  32. init(e) {
  33. this.setData({
  34. defaultMonth: e.getMonth() + 1,
  35. defaultDate: e.getDate(),
  36. })
  37. this.getMonthDaysCurrent(e)
  38. },
  39. // 所选时间对应月份日期
  40. getMonthDaysCurrent(e) {
  41. let year = e.getFullYear()
  42. let month = e.getMonth() + 1
  43. let date = e.getDate()
  44. let day = e.getDay() // 周几
  45. let days = new Date(year, month, 0).getDate() //当月天数(即下个月0号=当月最后一天)
  46. let firstDayDate = new Date(year, month - 1, 1) // 当月1号
  47. let firstDay = firstDayDate.getDay() //当月1号对应的星期
  48. let lastDate = new Date(year, month - 1, days) //当月最后一天日期
  49. let lastDay = lastDate.getDay() //当月最后一天对应的星期
  50. let calendarDays = []
  51. this.setData({
  52. selectedIndex: '',
  53. blue: ''
  54. })
  55. // 上个月显示的天数及日期
  56. for (let i = firstDay - 2; i >= 0; i--) {
  57. let date = new Date(year, month - 1, -i)
  58. //console.log(date, date.getMonth() + 1)
  59. calendarDays.push({
  60. 'year': date.getFullYear(),
  61. 'month': date.getMonth() + 1,
  62. 'date': date.getDate(),
  63. 'day': date.getDay(),
  64. 'current': false,
  65. })
  66. }
  67. // 当月显示的日期
  68. for (let i = 1; i <= days; i++) {
  69. let index = calendarDays.push({
  70. 'year': year,
  71. 'month': month,
  72. 'date': i,
  73. 'day': new Date(year, month - 1, i).getDay(),
  74. 'current': true,
  75. })
  76. if (i == date) {
  77. this.setData({
  78. selectedDay: calendarDays[index - 1]
  79. })
  80. }
  81. if (month === this.data.defaultMonth && i === this.data.defaultDate) {
  82. if (first) {
  83. first = false
  84. this.setData({
  85. selectedIndex: index - 1,
  86. blue: index - 1,
  87. })
  88. }
  89. }
  90. }
  91. // 下个月显示的天数及日期
  92. for (let i = 1; i <= 7 - lastDay; i++) {
  93. let date = new Date(year, month, i)
  94. calendarDays.push({
  95. 'year': date.getFullYear(),
  96. 'month': date.getMonth() + 1,
  97. 'date': date.getDate(),
  98. 'day': date.getDay(),
  99. 'current': false,
  100. })
  101. }
  102. this.setData({
  103. calendarDays,
  104. month
  105. })
  106. },
  107. // 手动选中日期
  108. clickDate(e) {
  109. let index = e.currentTarget.dataset.index
  110. let list = this.data.calendarDays
  111. if (list[index].current) {
  112. this.triggerEvent('day', list[index])
  113. this.setData({
  114. calendarDays: list,
  115. selectedIndex: index,
  116. selectedDay: list[index]
  117. })
  118. }
  119. },
  120. next() {
  121. this.getMonthDaysCurrent(new Date(this.data.selectedDay.year, this.data.selectedDay.month, 1))
  122. },
  123. last() {
  124. this.getMonthDaysCurrent(new Date(this.data.selectedDay.year, this.data.selectedDay.month - 2, 1))
  125. }
  126. }
  127. })