util.js 9.5 KB

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