util.js 9.5 KB

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