util.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. class Calendar {
  2. constructor({
  3. date,
  4. selected,
  5. startDate,
  6. endDate,
  7. range,
  8. // multipleStatus
  9. } = {}) {
  10. // 当前日期
  11. this.date = this.getDate(new Date()) // 当前初入日期
  12. // 打点信息
  13. this.selected = selected || [];
  14. // 范围开始
  15. this.startDate = startDate
  16. // 范围结束
  17. this.endDate = endDate
  18. this.range = range
  19. // 多选状态
  20. this.cleanMultipleStatus()
  21. // 每周日期
  22. this.weeks = {}
  23. // this._getWeek(this.date.fullDate)
  24. // this.multipleStatus = multipleStatus
  25. this.lastHover = false
  26. }
  27. /**
  28. * 设置日期
  29. * @param {Object} date
  30. */
  31. setDate(date) {
  32. this.selectDate = this.getDate(date)
  33. this._getWeek(this.selectDate.fullDate)
  34. }
  35. /**
  36. * 清理多选状态
  37. */
  38. cleanMultipleStatus() {
  39. this.multipleStatus = {
  40. before: '',
  41. after: '',
  42. data: []
  43. }
  44. }
  45. /**
  46. * 重置开始日期
  47. */
  48. resetSatrtDate(startDate) {
  49. // 范围开始
  50. this.startDate = startDate
  51. }
  52. /**
  53. * 重置结束日期
  54. */
  55. resetEndDate(endDate) {
  56. // 范围结束
  57. this.endDate = endDate
  58. }
  59. /**
  60. * 获取任意时间
  61. */
  62. getDate(date, AddDayCount = 0, str = 'day') {
  63. if (!date) {
  64. date = new Date()
  65. }
  66. if (typeof date !== 'object') {
  67. date = date.replace(/-/g, '/')
  68. }
  69. const dd = new Date(date)
  70. switch (str) {
  71. case 'day':
  72. dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
  73. break
  74. case 'month':
  75. if (dd.getDate() === 31 && AddDayCount>0) {
  76. dd.setDate(dd.getDate() + AddDayCount)
  77. } else {
  78. const preMonth = dd.getMonth()
  79. dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
  80. const nextMonth = dd.getMonth()
  81. // 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
  82. if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){
  83. dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount))
  84. }
  85. // 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
  86. if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){
  87. dd.setMonth(nextMonth-(nextMonth-preMonth-AddDayCount))
  88. }
  89. }
  90. break
  91. case 'year':
  92. dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
  93. break
  94. }
  95. const y = dd.getFullYear()
  96. const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
  97. const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
  98. return {
  99. fullDate: y + '-' + m + '-' + d,
  100. year: y,
  101. month: m,
  102. date: d,
  103. day: dd.getDay()
  104. }
  105. }
  106. /**
  107. * 获取上月剩余天数
  108. */
  109. _getLastMonthDays(firstDay, full) {
  110. let dateArr = []
  111. for (let i = firstDay; i > 0; i--) {
  112. const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
  113. dateArr.push({
  114. date: beforeDate,
  115. month: full.month - 1,
  116. disable: true
  117. })
  118. }
  119. return dateArr
  120. }
  121. /**
  122. * 获取本月天数
  123. */
  124. _currentMonthDys(dateData, full) {
  125. let dateArr = []
  126. let fullDate = this.date.fullDate
  127. for (let i = 1; i <= dateData; i++) {
  128. let isinfo = false
  129. let nowDate = full.year + '-' + (full.month < 10 ?
  130. full.month : full.month) + '-' + (i < 10 ?
  131. '0' + i : i)
  132. // 是否今天
  133. let isDay = fullDate === nowDate
  134. // 获取打点信息
  135. let info = this.selected && this.selected.find((item) => {
  136. if (this.dateEqual(nowDate, item.date)) {
  137. return item
  138. }
  139. })
  140. // 日期禁用
  141. let disableBefore = true
  142. let disableAfter = true
  143. if (this.startDate) {
  144. // let dateCompBefore = this.dateCompare(this.startDate, fullDate)
  145. // disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
  146. disableBefore = this.dateCompare(this.startDate, nowDate)
  147. }
  148. if (this.endDate) {
  149. // let dateCompAfter = this.dateCompare(fullDate, this.endDate)
  150. // disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
  151. disableAfter = this.dateCompare(nowDate, this.endDate)
  152. }
  153. let multiples = this.multipleStatus.data
  154. let checked = false
  155. let multiplesStatus = -1
  156. if (this.range) {
  157. if (multiples) {
  158. multiplesStatus = multiples.findIndex((item) => {
  159. return this.dateEqual(item, nowDate)
  160. })
  161. }
  162. if (multiplesStatus !== -1) {
  163. checked = true
  164. }
  165. }
  166. let data = {
  167. fullDate: nowDate,
  168. year: full.year,
  169. date: i,
  170. multiple: this.range ? checked : false,
  171. beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
  172. afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
  173. month: full.month,
  174. disable: !(disableBefore && disableAfter),
  175. isDay,
  176. userChecked: false
  177. }
  178. if (info) {
  179. data.extraInfo = info
  180. }
  181. dateArr.push(data)
  182. }
  183. return dateArr
  184. }
  185. /**
  186. * 获取下月天数
  187. */
  188. _getNextMonthDays(surplus, full) {
  189. let dateArr = []
  190. for (let i = 1; i < surplus + 1; i++) {
  191. dateArr.push({
  192. date: i,
  193. month: Number(full.month) + 1,
  194. disable: true
  195. })
  196. }
  197. return dateArr
  198. }
  199. /**
  200. * 获取当前日期详情
  201. * @param {Object} date
  202. */
  203. getInfo(date) {
  204. if (!date) {
  205. date = new Date()
  206. }
  207. const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
  208. return dateInfo
  209. }
  210. /**
  211. * 比较时间大小
  212. */
  213. dateCompare(startDate, endDate) {
  214. // 计算截止时间
  215. startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
  216. // 计算详细项的截止时间
  217. endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
  218. if (startDate <= endDate) {
  219. return true
  220. } else {
  221. return false
  222. }
  223. }
  224. /**
  225. * 比较时间是否相等
  226. */
  227. dateEqual(before, after) {
  228. // 计算截止时间
  229. before = new Date(before.replace('-', '/').replace('-', '/'))
  230. // 计算详细项的截止时间
  231. after = new Date(after.replace('-', '/').replace('-', '/'))
  232. if (before.getTime() - after.getTime() === 0) {
  233. return true
  234. } else {
  235. return false
  236. }
  237. }
  238. /**
  239. * 比较真实起始日期
  240. */
  241. isLogicBefore(currentDay, before, after) {
  242. let logicBefore = before
  243. if (before && after) {
  244. logicBefore = this.dateCompare(before, after) ? before : after
  245. }
  246. return this.dateEqual(logicBefore, currentDay)
  247. }
  248. isLogicAfter(currentDay, before, after) {
  249. let logicAfter = after
  250. if (before && after) {
  251. logicAfter = this.dateCompare(before, after) ? after : before
  252. }
  253. return this.dateEqual(logicAfter, currentDay)
  254. }
  255. /**
  256. * 获取日期范围内所有日期
  257. * @param {Object} begin
  258. * @param {Object} end
  259. */
  260. geDateAll(begin, end) {
  261. var arr = []
  262. var ab = begin.split('-')
  263. var ae = end.split('-')
  264. var db = new Date()
  265. db.setFullYear(ab[0], ab[1] - 1, ab[2])
  266. var de = new Date()
  267. de.setFullYear(ae[0], ae[1] - 1, ae[2])
  268. var unixDb = db.getTime() - 24 * 60 * 60 * 1000
  269. var unixDe = de.getTime() - 24 * 60 * 60 * 1000
  270. for (var k = unixDb; k <= unixDe;) {
  271. k = k + 24 * 60 * 60 * 1000
  272. arr.push(this.getDate(new Date(parseInt(k))).fullDate)
  273. }
  274. return arr
  275. }
  276. /**
  277. * 获取多选状态
  278. */
  279. setMultiple(fullDate) {
  280. let {
  281. before,
  282. after
  283. } = this.multipleStatus
  284. if (!this.range) return
  285. if (before && after) {
  286. if (!this.lastHover) {
  287. this.lastHover = true
  288. return
  289. }
  290. this.multipleStatus.before = fullDate
  291. this.multipleStatus.after = ''
  292. this.multipleStatus.data = []
  293. this.multipleStatus.fulldate = ''
  294. this.lastHover = false
  295. } else {
  296. if (!before) {
  297. this.multipleStatus.before = fullDate
  298. this.lastHover = false
  299. } else {
  300. this.multipleStatus.after = fullDate
  301. if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
  302. this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
  303. .after);
  304. } else {
  305. this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
  306. .before);
  307. }
  308. this.lastHover = true
  309. }
  310. }
  311. this._getWeek(fullDate)
  312. }
  313. /**
  314. * 鼠标 hover 更新多选状态
  315. */
  316. setHoverMultiple(fullDate) {
  317. let {
  318. before,
  319. after
  320. } = this.multipleStatus
  321. if (!this.range) return
  322. if (this.lastHover) return
  323. if (!before) {
  324. this.multipleStatus.before = fullDate
  325. } else {
  326. this.multipleStatus.after = fullDate
  327. if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
  328. this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
  329. } else {
  330. this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
  331. }
  332. }
  333. this._getWeek(fullDate)
  334. }
  335. /**
  336. * 更新默认值多选状态
  337. */
  338. setDefaultMultiple(before, after) {
  339. this.multipleStatus.before = before
  340. this.multipleStatus.after = after
  341. if (before && after) {
  342. if (this.dateCompare(before, after)) {
  343. this.multipleStatus.data = this.geDateAll(before, after);
  344. this._getWeek(after)
  345. } else {
  346. this.multipleStatus.data = this.geDateAll(after, before);
  347. this._getWeek(before)
  348. }
  349. }
  350. }
  351. /**
  352. * 获取每周数据
  353. * @param {Object} dateData
  354. */
  355. _getWeek(dateData) {
  356. const {
  357. fullDate,
  358. year,
  359. month,
  360. date,
  361. day
  362. } = this.getDate(dateData)
  363. let firstDay = new Date(year, month - 1, 1).getDay()
  364. let currentDay = new Date(year, month, 0).getDate()
  365. let dates = {
  366. lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
  367. currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
  368. nextMonthDays: [], // 下个月开始几天
  369. weeks: []
  370. }
  371. let canlender = []
  372. const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
  373. dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
  374. canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
  375. let weeks = {}
  376. // 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
  377. for (let i = 0; i < canlender.length; i++) {
  378. if (i % 7 === 0) {
  379. weeks[parseInt(i / 7)] = new Array(7)
  380. }
  381. weeks[parseInt(i / 7)][i % 7] = canlender[i]
  382. }
  383. this.canlender = canlender
  384. this.weeks = weeks
  385. }
  386. //静态方法
  387. // static init(date) {
  388. // if (!this.instance) {
  389. // this.instance = new Calendar(date);
  390. // }
  391. // return this.instance;
  392. // }
  393. }
  394. export default Calendar