index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. import { VantComponent } from '../common/component';
  2. import { ROW_HEIGHT, getPrevDay, getNextDay, getToday, compareDay, copyDates, calcDateNum, formatMonthTitle, compareMonth, getMonths, getDayByOffset, } from './utils';
  3. import Toast from '../toast/toast';
  4. import { requestAnimationFrame } from '../common/utils';
  5. const initialMinDate = getToday().getTime();
  6. const initialMaxDate = (() => {
  7. const now = getToday();
  8. return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()).getTime();
  9. })();
  10. const getTime = (date) => date instanceof Date ? date.getTime() : date;
  11. VantComponent({
  12. props: {
  13. title: {
  14. type: String,
  15. value: '日期选择',
  16. },
  17. color: String,
  18. show: {
  19. type: Boolean,
  20. observer(val) {
  21. if (val) {
  22. this.initRect();
  23. this.scrollIntoView();
  24. }
  25. },
  26. },
  27. formatter: null,
  28. confirmText: {
  29. type: String,
  30. value: '确定',
  31. },
  32. confirmDisabledText: {
  33. type: String,
  34. value: '确定',
  35. },
  36. rangePrompt: String,
  37. showRangePrompt: {
  38. type: Boolean,
  39. value: true,
  40. },
  41. defaultDate: {
  42. type: null,
  43. value: getToday().getTime(),
  44. observer(val) {
  45. this.setData({ currentDate: val });
  46. this.scrollIntoView();
  47. },
  48. },
  49. allowSameDay: Boolean,
  50. type: {
  51. type: String,
  52. value: 'single',
  53. observer: 'reset',
  54. },
  55. minDate: {
  56. type: Number,
  57. value: initialMinDate,
  58. },
  59. maxDate: {
  60. type: Number,
  61. value: initialMaxDate,
  62. },
  63. position: {
  64. type: String,
  65. value: 'bottom',
  66. },
  67. rowHeight: {
  68. type: null,
  69. value: ROW_HEIGHT,
  70. },
  71. round: {
  72. type: Boolean,
  73. value: true,
  74. },
  75. poppable: {
  76. type: Boolean,
  77. value: true,
  78. },
  79. showMark: {
  80. type: Boolean,
  81. value: true,
  82. },
  83. showTitle: {
  84. type: Boolean,
  85. value: true,
  86. },
  87. showConfirm: {
  88. type: Boolean,
  89. value: true,
  90. },
  91. showSubtitle: {
  92. type: Boolean,
  93. value: true,
  94. },
  95. safeAreaInsetBottom: {
  96. type: Boolean,
  97. value: true,
  98. },
  99. closeOnClickOverlay: {
  100. type: Boolean,
  101. value: true,
  102. },
  103. maxRange: {
  104. type: null,
  105. value: null,
  106. },
  107. minRange: {
  108. type: Number,
  109. value: 1,
  110. },
  111. firstDayOfWeek: {
  112. type: Number,
  113. value: 0,
  114. },
  115. readonly: Boolean,
  116. },
  117. data: {
  118. subtitle: '',
  119. currentDate: null,
  120. scrollIntoView: '',
  121. },
  122. watch: {
  123. minDate() {
  124. this.initRect();
  125. },
  126. maxDate() {
  127. this.initRect();
  128. },
  129. },
  130. created() {
  131. this.setData({
  132. currentDate: this.getInitialDate(this.data.defaultDate),
  133. });
  134. },
  135. mounted() {
  136. if (this.data.show || !this.data.poppable) {
  137. this.initRect();
  138. this.scrollIntoView();
  139. }
  140. },
  141. methods: {
  142. reset() {
  143. this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
  144. this.scrollIntoView();
  145. },
  146. initRect() {
  147. if (this.contentObserver != null) {
  148. this.contentObserver.disconnect();
  149. }
  150. const contentObserver = this.createIntersectionObserver({
  151. thresholds: [0, 0.1, 0.9, 1],
  152. observeAll: true,
  153. });
  154. this.contentObserver = contentObserver;
  155. contentObserver.relativeTo('.van-calendar__body');
  156. contentObserver.observe('.month', (res) => {
  157. if (res.boundingClientRect.top <= res.relativeRect.top) {
  158. // @ts-ignore
  159. this.setData({ subtitle: formatMonthTitle(res.dataset.date) });
  160. }
  161. });
  162. },
  163. limitDateRange(date, minDate = null, maxDate = null) {
  164. minDate = minDate || this.data.minDate;
  165. maxDate = maxDate || this.data.maxDate;
  166. if (compareDay(date, minDate) === -1) {
  167. return minDate;
  168. }
  169. if (compareDay(date, maxDate) === 1) {
  170. return maxDate;
  171. }
  172. return date;
  173. },
  174. getInitialDate(defaultDate = null) {
  175. const { type, minDate, maxDate, allowSameDay } = this.data;
  176. if (!defaultDate)
  177. return [];
  178. const now = getToday().getTime();
  179. if (type === 'range') {
  180. if (!Array.isArray(defaultDate)) {
  181. defaultDate = [];
  182. }
  183. const [startDay, endDay] = defaultDate || [];
  184. const startDate = getTime(startDay || now);
  185. const start = this.limitDateRange(startDate, minDate, allowSameDay ? startDate : getPrevDay(new Date(maxDate)).getTime());
  186. const date = getTime(endDay || now);
  187. const end = this.limitDateRange(date, allowSameDay ? date : getNextDay(new Date(minDate)).getTime());
  188. return [start, end];
  189. }
  190. if (type === 'multiple') {
  191. if (Array.isArray(defaultDate)) {
  192. return defaultDate.map((date) => this.limitDateRange(date));
  193. }
  194. return [this.limitDateRange(now)];
  195. }
  196. if (!defaultDate || Array.isArray(defaultDate)) {
  197. defaultDate = now;
  198. }
  199. return this.limitDateRange(defaultDate);
  200. },
  201. scrollIntoView() {
  202. requestAnimationFrame(() => {
  203. const { currentDate, type, show, poppable, minDate, maxDate } = this.data;
  204. if (!currentDate)
  205. return;
  206. // @ts-ignore
  207. const targetDate = type === 'single' ? currentDate : currentDate[0];
  208. const displayed = show || !poppable;
  209. if (!targetDate || !displayed) {
  210. return;
  211. }
  212. const months = getMonths(minDate, maxDate);
  213. months.some((month, index) => {
  214. if (compareMonth(month, targetDate) === 0) {
  215. this.setData({ scrollIntoView: `month${index}` });
  216. return true;
  217. }
  218. return false;
  219. });
  220. });
  221. },
  222. onOpen() {
  223. this.$emit('open');
  224. },
  225. onOpened() {
  226. this.$emit('opened');
  227. },
  228. onClose() {
  229. this.$emit('close');
  230. },
  231. onClosed() {
  232. this.$emit('closed');
  233. },
  234. onClickDay(event) {
  235. if (this.data.readonly) {
  236. return;
  237. }
  238. let { date } = event.detail;
  239. const { type, currentDate, allowSameDay } = this.data;
  240. if (type === 'range') {
  241. // @ts-ignore
  242. const [startDay, endDay] = currentDate;
  243. if (startDay && !endDay) {
  244. const compareToStart = compareDay(date, startDay);
  245. if (compareToStart === 1) {
  246. const { days } = this.selectComponent('.month').data;
  247. days.some((day, index) => {
  248. const isDisabled = day.type === 'disabled' &&
  249. getTime(startDay) < getTime(day.date) &&
  250. getTime(day.date) < getTime(date);
  251. if (isDisabled) {
  252. ({ date } = days[index - 1]);
  253. }
  254. return isDisabled;
  255. });
  256. this.select([startDay, date], true);
  257. }
  258. else if (compareToStart === -1) {
  259. this.select([date, null]);
  260. }
  261. else if (allowSameDay) {
  262. this.select([date, date], true);
  263. }
  264. }
  265. else {
  266. this.select([date, null]);
  267. }
  268. }
  269. else if (type === 'multiple') {
  270. let selectedIndex;
  271. // @ts-ignore
  272. const selected = currentDate.some((dateItem, index) => {
  273. const equal = compareDay(dateItem, date) === 0;
  274. if (equal) {
  275. selectedIndex = index;
  276. }
  277. return equal;
  278. });
  279. if (selected) {
  280. // @ts-ignore
  281. const cancelDate = currentDate.splice(selectedIndex, 1);
  282. this.setData({ currentDate });
  283. this.unselect(cancelDate);
  284. }
  285. else {
  286. // @ts-ignore
  287. this.select([...currentDate, date]);
  288. }
  289. }
  290. else {
  291. this.select(date, true);
  292. }
  293. },
  294. unselect(dateArray) {
  295. const date = dateArray[0];
  296. if (date) {
  297. this.$emit('unselect', copyDates(date));
  298. }
  299. },
  300. select(date, complete) {
  301. if (complete && this.data.type === 'range') {
  302. const valid = this.checkRange(date);
  303. if (!valid) {
  304. // auto selected to max range if showConfirm
  305. if (this.data.showConfirm) {
  306. this.emit([
  307. date[0],
  308. getDayByOffset(date[0], this.data.maxRange - 1),
  309. ]);
  310. }
  311. else {
  312. this.emit(date);
  313. }
  314. return;
  315. }
  316. }
  317. this.emit(date);
  318. if (complete && !this.data.showConfirm) {
  319. this.onConfirm();
  320. }
  321. },
  322. emit(date) {
  323. this.setData({
  324. currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
  325. });
  326. this.$emit('select', copyDates(date));
  327. },
  328. checkRange(date) {
  329. const { maxRange, rangePrompt, showRangePrompt } = this.data;
  330. if (maxRange && calcDateNum(date) > maxRange) {
  331. if (showRangePrompt) {
  332. Toast({
  333. context: this,
  334. message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
  335. });
  336. }
  337. this.$emit('over-range');
  338. return false;
  339. }
  340. return true;
  341. },
  342. onConfirm() {
  343. if (this.data.type === 'range' &&
  344. !this.checkRange(this.data.currentDate)) {
  345. return;
  346. }
  347. wx.nextTick(() => {
  348. // @ts-ignore
  349. this.$emit('confirm', copyDates(this.data.currentDate));
  350. });
  351. },
  352. onClickSubtitle(event) {
  353. this.$emit('click-subtitle', event);
  354. },
  355. },
  356. });