index.js 13 KB

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