index.js 12 KB

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