selectable.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /**
  2. * @Author: drfu*
  3. * @Description: 禁用、启用日期选择
  4. * @Date: 2020-10-08 21:22:09*
  5. * @Last Modified by: drfu
  6. * @Last Modified time: 2020-10-08 21:25:00
  7. * */
  8. import { getCalendarData, dateUtil, logger } from '../utils/index'
  9. import { renderCalendar } from '../render'
  10. function convertEnableAreaToTimestamp(timearea = []) {
  11. const start = timearea[0].split('-')
  12. const end = timearea[1].split('-')
  13. if (start.length !== 3 || end.length !== 3) {
  14. logger.warn('enableArea() 参数格式为: ["2018-2-1", "2018-3-1"]')
  15. return {}
  16. }
  17. const startTimestamp = dateUtil
  18. .newDate(start[0], start[1], start[2])
  19. .getTime()
  20. const endTimestamp = dateUtil.newDate(end[0], end[1], end[2]).getTime()
  21. return {
  22. start,
  23. end,
  24. startTimestamp,
  25. endTimestamp
  26. }
  27. }
  28. function isValiditeOfDateArea(dateArea) {
  29. const {
  30. start,
  31. end,
  32. startTimestamp,
  33. endTimestamp
  34. } = convertEnableAreaToTimestamp(dateArea)
  35. if (!start || !end) return
  36. const datesCountOfStart = dateUtil.getDatesCountOfMonth(start[0], start[1])
  37. const datesCountOfEnd = dateUtil.getDatesCountOfMonth(end[0], end[1])
  38. if (start[2] > datesCountOfStart || start[2] < 1) {
  39. logger.warn('enableArea() 开始日期错误,指定日期不在指定月份天数范围内')
  40. return false
  41. } else if (start[1] > 12 || start[1] < 1) {
  42. logger.warn('enableArea() 开始日期错误,月份超出1-12月份')
  43. return false
  44. } else if (end[2] > datesCountOfEnd || end[2] < 1) {
  45. logger.warn('enableArea() 截止日期错误,指定日期不在指定月份天数范围内')
  46. return false
  47. } else if (end[1] > 12 || end[1] < 1) {
  48. logger.warn('enableArea() 截止日期错误,月份超出1-12月份')
  49. return false
  50. } else if (startTimestamp > endTimestamp) {
  51. logger.warn('enableArea()参数最小日期大于了最大日期')
  52. return false
  53. } else {
  54. return true
  55. }
  56. }
  57. function handleDisableMode(calendarConfig) {
  58. const { disableMode } = calendarConfig
  59. if (!disableMode) return {}
  60. const disableBound =
  61. dateUtil.getTimeStamp(disableMode.date) || dateUtil.todayTimestamp()
  62. return {
  63. disableBound,
  64. disableType: disableMode.type
  65. }
  66. }
  67. function disabledByConfig(dateInfo, currentDate, calendarConfig) {
  68. const date = { ...dateInfo }
  69. const { disableType, disableBound } = handleDisableMode(calendarConfig)
  70. if (
  71. (disableType === 'before' && disableBound && currentDate < disableBound) ||
  72. (disableType === 'after' && disableBound && currentDate > disableBound)
  73. ) {
  74. date.disable = true
  75. } else {
  76. date.disable = false
  77. }
  78. return date
  79. }
  80. export default () => {
  81. return {
  82. name: 'enable',
  83. beforeRender(calendarData = {}, calendarConfig = {}) {
  84. const {
  85. dates,
  86. enableArea,
  87. enableDates,
  88. disableDates,
  89. renderCausedBy
  90. } = calendarData
  91. const _dates = [...dates].map(date => {
  92. let item = { ...date }
  93. const timeStr = dateUtil.toTimeStr(date)
  94. const timestamp = +dateUtil.getTimeStamp(item)
  95. if (renderCausedBy === 'enableDates') {
  96. if (enableDates && enableDates.length) {
  97. if (enableDates.includes(timeStr)) {
  98. item.disable = false
  99. } else {
  100. item.disable = true
  101. }
  102. return item
  103. }
  104. } else if (renderCausedBy === 'enableArea') {
  105. if (enableArea && enableArea.length) {
  106. const [startTimestamp, endTimestamp] = enableArea || []
  107. const ifOutofArea =
  108. +startTimestamp > timestamp || timestamp > +endTimestamp
  109. item.disable = ifOutofArea
  110. return item
  111. }
  112. } else if (renderCausedBy === 'disableDates') {
  113. if (disableDates && disableDates.length) {
  114. if (disableDates && disableDates.includes(timeStr)) {
  115. item.disable = true
  116. } else {
  117. item.disable = false
  118. }
  119. return item
  120. }
  121. }
  122. return disabledByConfig(item, timestamp, calendarConfig)
  123. })
  124. return {
  125. calendarData: {
  126. ...calendarData,
  127. dates: _dates
  128. },
  129. calendarConfig
  130. }
  131. },
  132. methods(component) {
  133. return {
  134. enableArea: (dateArea = []) => {
  135. if (dateArea.length === 2) {
  136. const validate = isValiditeOfDateArea(dateArea)
  137. if (validate) {
  138. const existCalendarData = getCalendarData('calendar', component)
  139. const {
  140. startTimestamp,
  141. endTimestamp
  142. } = convertEnableAreaToTimestamp(dateArea)
  143. return renderCalendar.call(component, {
  144. ...existCalendarData,
  145. renderCausedBy: 'enableArea',
  146. enableArea: [startTimestamp, endTimestamp]
  147. })
  148. }
  149. } else {
  150. return Promise.inject(
  151. 'enableArea()参数需为时间范围数组,形如:["2018-8-4" , "2018-8-24"]'
  152. )
  153. }
  154. },
  155. enableDates: (toSet = []) => {
  156. if (!toSet.length) return
  157. const existCalendarData = getCalendarData('calendar', component)
  158. const { enableDates = [] } = existCalendarData || {}
  159. let toSetDates = toSet.map(item => {
  160. let date = { ...item }
  161. if (typeof date === 'string') {
  162. return dateUtil.transformDateRow2Dict(item)
  163. }
  164. return item
  165. })
  166. if (enableDates.length) {
  167. toSetDates = dateUtil.uniqueArrayByDate([
  168. ...toSetDates,
  169. ...enableDates.map(d => dateUtil.transformDateRow2Dict(d))
  170. ])
  171. }
  172. return renderCalendar.call(component, {
  173. ...existCalendarData,
  174. renderCausedBy: 'enableDates',
  175. enableDates: toSetDates.map(date => {
  176. if (typeof date !== 'string') {
  177. return dateUtil.toTimeStr(date)
  178. }
  179. return date
  180. })
  181. })
  182. },
  183. disableDates: toSet => {
  184. const existCalendarData = getCalendarData('calendar', component)
  185. const { disableDates = [], dates = [] } = existCalendarData || {}
  186. let toSetDates = toSet.map(item => {
  187. let date = { ...item }
  188. if (typeof date === 'string') {
  189. return dateUtil.transformDateRow2Dict(item)
  190. }
  191. return item
  192. })
  193. if (disableDates && disableDates.length) {
  194. toSetDates = dateUtil.uniqueArrayByDate([
  195. ...toSetDates,
  196. ...disableDates.map(d => dateUtil.transformDateRow2Dict(d))
  197. ])
  198. }
  199. return renderCalendar.call(component, {
  200. ...existCalendarData,
  201. renderCausedBy: 'disableDates',
  202. dates,
  203. disableDates: toSetDates.map(date => {
  204. if (typeof date !== 'string') {
  205. return dateUtil.toTimeStr(date)
  206. }
  207. return date
  208. })
  209. })
  210. }
  211. }
  212. }
  213. }
  214. }