DatePicker.js 6.6 KB

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