DatePicker.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. import _construct from "@babel/runtime/helpers/esm/construct";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createNamespace } from '../utils';
  4. import { isDate } from '../utils/validate/date';
  5. import { padZero } from '../utils/format/string';
  6. import { getTrueValue, getMonthEndDay } from './utils';
  7. import { sharedProps, TimePickerMixin } from './shared';
  8. var currentYear = new Date().getFullYear();
  9. var _createNamespace = createNamespace('date-picker'),
  10. createComponent = _createNamespace[0];
  11. export default createComponent({
  12. mixins: [TimePickerMixin],
  13. props: _extends({}, sharedProps, {
  14. type: {
  15. type: String,
  16. default: 'datetime'
  17. },
  18. minDate: {
  19. type: Date,
  20. default: function _default() {
  21. return new Date(currentYear - 10, 0, 1);
  22. },
  23. validator: isDate
  24. },
  25. maxDate: {
  26. type: Date,
  27. default: function _default() {
  28. return new Date(currentYear + 10, 11, 31);
  29. },
  30. validator: isDate
  31. }
  32. }),
  33. watch: {
  34. filter: 'updateInnerValue',
  35. minDate: function minDate() {
  36. var _this = this;
  37. this.$nextTick(function () {
  38. _this.updateInnerValue();
  39. });
  40. },
  41. maxDate: function maxDate(value) {
  42. if (this.innerValue.valueOf() >= value.valueOf()) {
  43. this.innerValue = value;
  44. } else {
  45. this.updateInnerValue();
  46. }
  47. },
  48. value: function value(val) {
  49. val = this.formatValue(val);
  50. if (val && val.valueOf() !== this.innerValue.valueOf()) {
  51. this.innerValue = val;
  52. }
  53. }
  54. },
  55. computed: {
  56. ranges: function ranges() {
  57. var _this$getBoundary = this.getBoundary('max', this.innerValue ? this.innerValue : this.minDate),
  58. maxYear = _this$getBoundary.maxYear,
  59. maxDate = _this$getBoundary.maxDate,
  60. maxMonth = _this$getBoundary.maxMonth,
  61. maxHour = _this$getBoundary.maxHour,
  62. maxMinute = _this$getBoundary.maxMinute;
  63. var _this$getBoundary2 = this.getBoundary('min', this.innerValue ? this.innerValue : this.minDate),
  64. minYear = _this$getBoundary2.minYear,
  65. minDate = _this$getBoundary2.minDate,
  66. minMonth = _this$getBoundary2.minMonth,
  67. minHour = _this$getBoundary2.minHour,
  68. minMinute = _this$getBoundary2.minMinute;
  69. var result = [{
  70. type: 'year',
  71. range: [minYear, maxYear]
  72. }, {
  73. type: 'month',
  74. range: [minMonth, maxMonth]
  75. }, {
  76. type: 'day',
  77. range: [minDate, maxDate]
  78. }, {
  79. type: 'hour',
  80. range: [minHour, maxHour]
  81. }, {
  82. type: 'minute',
  83. range: [minMinute, maxMinute]
  84. }];
  85. switch (this.type) {
  86. case 'date':
  87. result = result.slice(0, 3);
  88. break;
  89. case 'year-month':
  90. result = result.slice(0, 2);
  91. break;
  92. case 'month-day':
  93. result = result.slice(1, 3);
  94. break;
  95. case 'datehour':
  96. result = result.slice(0, 4);
  97. break;
  98. }
  99. if (this.columnsOrder) {
  100. var columnsOrder = this.columnsOrder.concat(result.map(function (column) {
  101. return column.type;
  102. }));
  103. result.sort(function (a, b) {
  104. return columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type);
  105. });
  106. }
  107. return result;
  108. }
  109. },
  110. methods: {
  111. formatValue: function formatValue(value) {
  112. var _this2 = this;
  113. if (!isDate(value)) {
  114. return null;
  115. }
  116. var minDate = new Date(this.minDate);
  117. var maxDate = new Date(this.maxDate);
  118. var dateMethods = {
  119. year: 'getFullYear',
  120. month: 'getMonth',
  121. day: 'getDate',
  122. hour: 'getHours',
  123. minute: 'getMinutes'
  124. };
  125. if (this.originColumns) {
  126. var dateColumns = this.originColumns.map(function (_ref, index) {
  127. var type = _ref.type,
  128. values = _ref.values;
  129. var range = _this2.ranges[index].range;
  130. var minDateVal = minDate[dateMethods[type]]();
  131. var maxDateVal = maxDate[dateMethods[type]]();
  132. var min = type === 'month' ? +values[0] - 1 : +values[0];
  133. var max = type === 'month' ? +values[values.length - 1] - 1 : +values[values.length - 1];
  134. return {
  135. type: type,
  136. values: [minDateVal < range[0] ? Math.max(minDateVal, min) : min || minDateVal, maxDateVal > range[1] ? Math.min(maxDateVal, max) : max || maxDateVal]
  137. };
  138. });
  139. if (this.type === 'month-day') {
  140. var year = (this.innerValue || this.minDate).getFullYear();
  141. dateColumns.unshift({
  142. type: 'year',
  143. values: [year, year]
  144. });
  145. }
  146. var dates = Object.keys(dateMethods).map(function (type) {
  147. var _dateColumns$filter$;
  148. return (_dateColumns$filter$ = dateColumns.filter(function (item) {
  149. return item.type === type;
  150. })[0]) == null ? void 0 : _dateColumns$filter$.values;
  151. }).filter(function (item) {
  152. return item;
  153. });
  154. minDate = _construct(Date, dates.map(function (val) {
  155. return getTrueValue(val[0]);
  156. }));
  157. maxDate = _construct(Date, dates.map(function (val) {
  158. return getTrueValue(val[1]);
  159. }));
  160. }
  161. value = Math.max(value, minDate.getTime());
  162. value = Math.min(value, maxDate.getTime());
  163. return new Date(value);
  164. },
  165. getBoundary: function getBoundary(type, value) {
  166. var _ref2;
  167. var boundary = this[type + "Date"];
  168. var year = boundary.getFullYear();
  169. var month = 1;
  170. var date = 1;
  171. var hour = 0;
  172. var minute = 0;
  173. if (type === 'max') {
  174. month = 12;
  175. date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
  176. hour = 23;
  177. minute = 59;
  178. }
  179. if (value.getFullYear() === year) {
  180. month = boundary.getMonth() + 1;
  181. if (value.getMonth() + 1 === month) {
  182. date = boundary.getDate();
  183. if (value.getDate() === date) {
  184. hour = boundary.getHours();
  185. if (value.getHours() === hour) {
  186. minute = boundary.getMinutes();
  187. }
  188. }
  189. }
  190. }
  191. return _ref2 = {}, _ref2[type + "Year"] = year, _ref2[type + "Month"] = month, _ref2[type + "Date"] = date, _ref2[type + "Hour"] = hour, _ref2[type + "Minute"] = minute, _ref2;
  192. },
  193. updateInnerValue: function updateInnerValue() {
  194. var _this3 = this;
  195. var type = this.type;
  196. var indexes = this.getPicker().getIndexes();
  197. var getValue = function getValue(type) {
  198. var index = 0;
  199. _this3.originColumns.forEach(function (column, columnIndex) {
  200. if (type === column.type) {
  201. index = columnIndex;
  202. }
  203. });
  204. var values = _this3.originColumns[index].values;
  205. return getTrueValue(values[indexes[index]]);
  206. };
  207. var year;
  208. var month;
  209. var day;
  210. if (type === 'month-day') {
  211. year = (this.innerValue || this.minDate).getFullYear();
  212. month = getValue('month');
  213. day = getValue('day');
  214. } else {
  215. year = getValue('year');
  216. month = getValue('month');
  217. day = type === 'year-month' ? 1 : getValue('day');
  218. }
  219. var maxDay = getMonthEndDay(year, month);
  220. day = day > maxDay ? maxDay : day;
  221. var hour = 0;
  222. var minute = 0;
  223. if (type === 'datehour') {
  224. hour = getValue('hour');
  225. }
  226. if (type === 'datetime') {
  227. hour = getValue('hour');
  228. minute = getValue('minute');
  229. }
  230. var value = new Date(year, month - 1, day, hour, minute);
  231. this.innerValue = this.formatValue(value);
  232. },
  233. onChange: function onChange(picker) {
  234. var _this4 = this;
  235. this.updateInnerValue();
  236. this.$nextTick(function () {
  237. _this4.$nextTick(function () {
  238. // https://github.com/vant-ui/vant/issues/9775
  239. _this4.updateInnerValue();
  240. _this4.$emit('change', picker);
  241. });
  242. });
  243. },
  244. updateColumnValue: function updateColumnValue() {
  245. var _this5 = this;
  246. var value = this.innerValue ? this.innerValue : this.minDate;
  247. var formatter = this.formatter;
  248. var values = this.originColumns.map(function (column) {
  249. switch (column.type) {
  250. case 'year':
  251. return formatter('year', "" + value.getFullYear());
  252. case 'month':
  253. return formatter('month', padZero(value.getMonth() + 1));
  254. case 'day':
  255. return formatter('day', padZero(value.getDate()));
  256. case 'hour':
  257. return formatter('hour', padZero(value.getHours()));
  258. case 'minute':
  259. return formatter('minute', padZero(value.getMinutes()));
  260. default:
  261. // no default
  262. return null;
  263. }
  264. });
  265. this.$nextTick(function () {
  266. _this5.getPicker().setValues(values);
  267. });
  268. }
  269. }
  270. });