util.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. import CALENDAR from './calendar.js'
  2. class Calendar {
  3. constructor({
  4. date,
  5. selected,
  6. startDate,
  7. endDate,
  8. range
  9. } = {}) {
  10. // 当前日期
  11. this.date = this.getDate(date) // 当前初入日期
  12. // 打点信息
  13. this.selected = selected || [];
  14. // 范围开始
  15. this.startDate = startDate
  16. // 范围结束
  17. this.endDate = endDate
  18. this.range = range
  19. // 多选状态
  20. this.multipleStatus = {
  21. before: '',
  22. after: '',
  23. data: []
  24. }
  25. // 每周日期
  26. this.weeks = {}
  27. this._getWeek(this.date.fullDate)
  28. }
  29. /**
  30. * 获取任意时间
  31. */
  32. getDate(date, AddDayCount = 0, str = 'day') {
  33. if (!date) {
  34. date = new Date()
  35. }
  36. if (typeof date !== 'object') {
  37. date = date.replace(/-/g, '/')
  38. }
  39. const dd = new Date(date)
  40. switch (str) {
  41. case 'day':
  42. dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
  43. break
  44. case 'month':
  45. if (dd.getDate() === 31) {
  46. dd.setDate(dd.getDate() + AddDayCount)
  47. } else {
  48. dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
  49. }
  50. break
  51. case 'year':
  52. dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
  53. break
  54. }
  55. const y = dd.getFullYear()
  56. const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
  57. const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
  58. return {
  59. fullDate: y + '-' + m + '-' + d,
  60. year: y,
  61. month: m,
  62. date: d,
  63. day: dd.getDay()
  64. }
  65. }
  66. /**
  67. * 获取上月剩余天数
  68. */
  69. _getLastMonthDays(firstDay, full) {
  70. let dateArr = []
  71. for (let i = firstDay; i > 0; i--) {
  72. const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
  73. dateArr.push({
  74. date: beforeDate,
  75. month: full.month - 1,
  76. lunar: this.getlunar(full.year, full.month - 1, beforeDate),
  77. disable: true
  78. })
  79. }
  80. return dateArr
  81. }
  82. /**
  83. * 获取本月天数
  84. */
  85. _currentMonthDys(dateData, full) {
  86. let dateArr = []
  87. let fullDate = this.date.fullDate
  88. for (let i = 1; i <= dateData; i++) {
  89. let isinfo = false
  90. let nowDate = full.year + '-' + (full.month < 10 ?
  91. full.month : full.month) + '-' + (i < 10 ?
  92. '0' + i : i)
  93. // 是否今天
  94. let isDay = fullDate === nowDate
  95. // 获取打点信息
  96. let info = this.selected && this.selected.find((item) => {
  97. if (this.dateEqual(nowDate, item.date)) {
  98. return item
  99. }
  100. })
  101. // 日期禁用
  102. let disableBefore = true
  103. let disableAfter = true
  104. if (this.startDate) {
  105. let dateCompBefore = this.dateCompare(this.startDate, fullDate)
  106. disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
  107. }
  108. if (this.endDate) {
  109. let dateCompAfter = this.dateCompare(fullDate, this.endDate)
  110. disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
  111. }
  112. let multiples = this.multipleStatus.data
  113. let checked = false
  114. let multiplesStatus = -1
  115. if (this.range) {
  116. if (multiples) {
  117. multiplesStatus = multiples.findIndex((item) => {
  118. return this.dateEqual(item, nowDate)
  119. })
  120. }
  121. if (multiplesStatus !== -1) {
  122. checked = true
  123. }
  124. }
  125. let data = {
  126. fullDate: nowDate,
  127. year: full.year,
  128. date: i,
  129. multiple: this.range ? checked : false,
  130. month: full.month,
  131. lunar: this.getlunar(full.year, full.month, i),
  132. disable: !disableBefore || !disableAfter,
  133. isDay
  134. }
  135. if (info) {
  136. data.extraInfo = info
  137. }
  138. dateArr.push(data)
  139. }
  140. return dateArr
  141. }
  142. /**
  143. * 获取下月天数
  144. */
  145. _getNextMonthDays(surplus, full) {
  146. let dateArr = []
  147. for (let i = 1; i < surplus + 1; i++) {
  148. dateArr.push({
  149. date: i,
  150. month: Number(full.month) + 1,
  151. lunar: this.getlunar(full.year, Number(full.month) + 1, i),
  152. disable: true
  153. })
  154. }
  155. return dateArr
  156. }
  157. /**
  158. * 设置日期
  159. * @param {Object} date
  160. */
  161. setDate(date) {
  162. this._getWeek(date)
  163. }
  164. /**
  165. * 获取当前日期详情
  166. * @param {Object} date
  167. */
  168. getInfo(date) {
  169. if (!date) {
  170. date = new Date()
  171. }
  172. const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
  173. return dateInfo
  174. }
  175. /**
  176. * 比较时间大小
  177. */
  178. dateCompare(startDate, endDate) {
  179. // 计算截止时间
  180. startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
  181. // 计算详细项的截止时间
  182. endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
  183. if (startDate <= endDate) {
  184. return true
  185. } else {
  186. return false
  187. }
  188. }
  189. /**
  190. * 比较时间是否相等
  191. */
  192. dateEqual(before, after) {
  193. // 计算截止时间
  194. before = new Date(before.replace('-', '/').replace('-', '/'))
  195. // 计算详细项的截止时间
  196. after = new Date(after.replace('-', '/').replace('-', '/'))
  197. if (before.getTime() - after.getTime() === 0) {
  198. return true
  199. } else {
  200. return false
  201. }
  202. }
  203. /**
  204. * 获取日期范围内所有日期
  205. * @param {Object} begin
  206. * @param {Object} end
  207. */
  208. geDateAll(begin, end) {
  209. var arr = []
  210. var ab = begin.split('-')
  211. var ae = end.split('-')
  212. var db = new Date()
  213. db.setFullYear(ab[0], ab[1] - 1, ab[2])
  214. var de = new Date()
  215. de.setFullYear(ae[0], ae[1] - 1, ae[2])
  216. var unixDb = db.getTime() - 24 * 60 * 60 * 1000
  217. var unixDe = de.getTime() - 24 * 60 * 60 * 1000
  218. for (var k = unixDb; k <= unixDe;) {
  219. k = k + 24 * 60 * 60 * 1000
  220. arr.push(this.getDate(new Date(parseInt(k))).fullDate)
  221. }
  222. return arr
  223. }
  224. /**
  225. * 计算阴历日期显示
  226. */
  227. getlunar(year, month, date) {
  228. return CALENDAR.solar2lunar(year, month, date)
  229. }
  230. /**
  231. * 设置打点
  232. */
  233. setSelectInfo(data, value) {
  234. this.selected = value
  235. this._getWeek(data)
  236. }
  237. /**
  238. * 获取多选状态
  239. */
  240. setMultiple(fullDate) {
  241. let {
  242. before,
  243. after
  244. } = this.multipleStatus
  245. if (!this.range) return
  246. if (before && after) {
  247. this.multipleStatus.before = ''
  248. this.multipleStatus.after = ''
  249. this.multipleStatus.data = []
  250. this._getWeek(fullDate)
  251. } else {
  252. if (!before) {
  253. this.multipleStatus.before = fullDate
  254. } else {
  255. this.multipleStatus.after = fullDate
  256. if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
  257. this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
  258. } else {
  259. this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
  260. }
  261. this._getWeek(fullDate)
  262. }
  263. }
  264. }
  265. /**
  266. * 获取每周数据
  267. * @param {Object} dateData
  268. */
  269. _getWeek(dateData) {
  270. const {
  271. fullDate,
  272. year,
  273. month,
  274. date,
  275. day
  276. } = this.getDate(dateData)
  277. let firstDay = new Date(year, month - 1, 1).getDay()
  278. let currentDay = new Date(year, month, 0).getDate()
  279. let dates = {
  280. lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
  281. currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
  282. nextMonthDays: [], // 下个月开始几天
  283. weeks: []
  284. }
  285. let canlender = []
  286. const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
  287. dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
  288. canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
  289. let weeks = {}
  290. // 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
  291. for (let i = 0; i < canlender.length; i++) {
  292. if (i % 7 === 0) {
  293. weeks[parseInt(i / 7)] = new Array(7)
  294. }
  295. weeks[parseInt(i / 7)][i % 7] = canlender[i]
  296. }
  297. this.canlender = canlender
  298. this.weeks = weeks
  299. }
  300. //静态方法
  301. // static init(date) {
  302. // if (!this.instance) {
  303. // this.instance = new Calendar(date);
  304. // }
  305. // return this.instance;
  306. // }
  307. }
  308. export default Calendar