index.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports["default"] = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _utils = require("../utils");
  7. var _picker = _interopRequireDefault(require("../picker"));
  8. var _shared = require("../picker/shared");
  9. var _utils2 = require("./utils");
  10. var _use = (0, _utils.use)('datetime-picker'),
  11. sfc = _use[0],
  12. bem = _use[1];
  13. var currentYear = new Date().getFullYear();
  14. var _default2 = sfc({
  15. props: (0, _extends2["default"])({}, _shared.pickerProps, {
  16. value: null,
  17. minHour: Number,
  18. minMinute: Number,
  19. type: {
  20. type: String,
  21. "default": 'datetime'
  22. },
  23. showToolbar: {
  24. type: Boolean,
  25. "default": true
  26. },
  27. format: {
  28. type: String,
  29. "default": 'YYYY.MM.DD HH时 mm分'
  30. },
  31. formatter: {
  32. type: Function,
  33. "default": function _default(type, value) {
  34. return value;
  35. }
  36. },
  37. minDate: {
  38. type: Date,
  39. "default": function _default() {
  40. return new Date(currentYear - 10, 0, 1);
  41. },
  42. validator: _utils2.isValidDate
  43. },
  44. maxDate: {
  45. type: Date,
  46. "default": function _default() {
  47. return new Date(currentYear + 10, 11, 31);
  48. },
  49. validator: _utils2.isValidDate
  50. },
  51. maxHour: {
  52. type: Number,
  53. "default": 23
  54. },
  55. maxMinute: {
  56. type: Number,
  57. "default": 59
  58. }
  59. }),
  60. data: function data() {
  61. return {
  62. innerValue: this.correctValue(this.value)
  63. };
  64. },
  65. watch: {
  66. value: function value(val) {
  67. val = this.correctValue(val);
  68. var isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf();
  69. if (!isEqual) {
  70. this.innerValue = val;
  71. if (this.type === 'time') {
  72. this.updateColumnValue(val);
  73. }
  74. }
  75. },
  76. innerValue: function innerValue(val) {
  77. this.$emit('input', val);
  78. },
  79. columns: function columns() {
  80. this.updateColumnValue(this.innerValue);
  81. }
  82. },
  83. computed: {
  84. ranges: function ranges() {
  85. if (this.type === 'time') {
  86. return [{
  87. type: 'hour',
  88. range: [this.minHour, this.maxHour]
  89. }, {
  90. type: 'minute',
  91. range: [this.minMinute, this.maxMinute]
  92. }];
  93. }
  94. var _this$getBoundary = this.getBoundary('max', this.innerValue),
  95. maxYear = _this$getBoundary.maxYear,
  96. maxDate = _this$getBoundary.maxDate,
  97. maxMonth = _this$getBoundary.maxMonth,
  98. maxHour = _this$getBoundary.maxHour,
  99. maxMinute = _this$getBoundary.maxMinute;
  100. var _this$getBoundary2 = this.getBoundary('min', this.innerValue),
  101. minYear = _this$getBoundary2.minYear,
  102. minDate = _this$getBoundary2.minDate,
  103. minMonth = _this$getBoundary2.minMonth,
  104. minHour = _this$getBoundary2.minHour,
  105. minMinute = _this$getBoundary2.minMinute;
  106. var result = [{
  107. type: 'year',
  108. range: [minYear, maxYear]
  109. }, {
  110. type: 'month',
  111. range: [minMonth, maxMonth]
  112. }, {
  113. type: 'day',
  114. range: [minDate, maxDate]
  115. }, {
  116. type: 'hour',
  117. range: [minHour, maxHour]
  118. }, {
  119. type: 'minute',
  120. range: [minMinute, maxMinute]
  121. }];
  122. if (this.type === 'date') result.splice(3, 2);
  123. if (this.type === 'year-month') result.splice(2, 3);
  124. return result;
  125. },
  126. columns: function columns() {
  127. var _this = this;
  128. var results = this.ranges.map(function (_ref) {
  129. var type = _ref.type,
  130. rangeArr = _ref.range;
  131. var values = (0, _utils2.times)(rangeArr[1] - rangeArr[0] + 1, function (index) {
  132. var value = rangeArr[0] + index;
  133. value = value < 10 ? "0" + value : "" + value;
  134. return _this.formatter(type, value);
  135. });
  136. return {
  137. values: values
  138. };
  139. });
  140. return results;
  141. }
  142. },
  143. mounted: function mounted() {
  144. this.updateColumnValue(this.innerValue);
  145. },
  146. methods: {
  147. correctValue: function correctValue(value) {
  148. // validate value
  149. var isDateType = this.type !== 'time';
  150. if (isDateType && !(0, _utils2.isValidDate)(value)) {
  151. value = this.minDate;
  152. } else if (!value) {
  153. var minHour = this.minHour;
  154. value = (minHour > 10 ? minHour : '0' + minHour) + ":00";
  155. } // time type
  156. if (!isDateType) {
  157. var _value$split = value.split(':'),
  158. hour = _value$split[0],
  159. minute = _value$split[1];
  160. hour = (0, _utils2.padZero)((0, _utils.range)(hour, this.minHour, this.maxHour));
  161. minute = (0, _utils2.padZero)((0, _utils.range)(minute, this.minMinute, this.maxMinute));
  162. return hour + ":" + minute;
  163. } // date type
  164. value = Math.max(value, this.minDate.getTime());
  165. value = Math.min(value, this.maxDate.getTime());
  166. return new Date(value);
  167. },
  168. getBoundary: function getBoundary(type, value) {
  169. var _ref2;
  170. var boundary = this[type + "Date"];
  171. var year = boundary.getFullYear();
  172. var month = 1;
  173. var date = 1;
  174. var hour = 0;
  175. var minute = 0;
  176. if (type === 'max') {
  177. month = 12;
  178. date = (0, _utils2.getMonthEndDay)(value.getFullYear(), value.getMonth() + 1);
  179. hour = 23;
  180. minute = 59;
  181. }
  182. if (value.getFullYear() === year) {
  183. month = boundary.getMonth() + 1;
  184. if (value.getMonth() + 1 === month) {
  185. date = boundary.getDate();
  186. if (value.getDate() === date) {
  187. hour = boundary.getHours();
  188. if (value.getHours() === hour) {
  189. minute = boundary.getMinutes();
  190. }
  191. }
  192. }
  193. }
  194. return _ref2 = {}, _ref2[type + "Year"] = year, _ref2[type + "Month"] = month, _ref2[type + "Date"] = date, _ref2[type + "Hour"] = hour, _ref2[type + "Minute"] = minute, _ref2;
  195. },
  196. onConfirm: function onConfirm() {
  197. this.$emit('confirm', this.innerValue);
  198. },
  199. onChange: function onChange(picker) {
  200. var _this2 = this;
  201. var value;
  202. if (this.type === 'time') {
  203. var indexes = picker.getIndexes();
  204. value = indexes[0] + this.minHour + ":" + (indexes[1] + this.minMinute);
  205. } else {
  206. var values = picker.getValues();
  207. var year = (0, _utils2.getTrueValue)(values[0]);
  208. var month = (0, _utils2.getTrueValue)(values[1]);
  209. var maxDate = (0, _utils2.getMonthEndDay)(year, month);
  210. var date = (0, _utils2.getTrueValue)(values[2]);
  211. if (this.type === 'year-month') {
  212. date = 1;
  213. }
  214. date = date > maxDate ? maxDate : date;
  215. var hour = 0;
  216. var minute = 0;
  217. if (this.type === 'datetime') {
  218. hour = (0, _utils2.getTrueValue)(values[3]);
  219. minute = (0, _utils2.getTrueValue)(values[4]);
  220. }
  221. value = new Date(year, month - 1, date, hour, minute);
  222. }
  223. this.innerValue = this.correctValue(value);
  224. this.$nextTick(function () {
  225. _this2.$nextTick(function () {
  226. _this2.$emit('change', picker);
  227. });
  228. });
  229. },
  230. updateColumnValue: function updateColumnValue(value) {
  231. var _this3 = this;
  232. var values = [];
  233. var formatter = this.formatter;
  234. if (this.type === 'time') {
  235. var pair = value.split(':');
  236. values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
  237. } else {
  238. values = [formatter('year', "" + value.getFullYear()), formatter('month', (0, _utils2.padZero)(value.getMonth() + 1)), formatter('day', (0, _utils2.padZero)(value.getDate()))];
  239. if (this.type === 'datetime') {
  240. values.push(formatter('hour', (0, _utils2.padZero)(value.getHours())), formatter('minute', (0, _utils2.padZero)(value.getMinutes())));
  241. }
  242. if (this.type === 'year-month') {
  243. values = values.slice(0, 2);
  244. }
  245. }
  246. this.$nextTick(function () {
  247. _this3.$refs.picker.setValues(values);
  248. });
  249. }
  250. },
  251. render: function render(h) {
  252. var _this4 = this;
  253. var props = {};
  254. Object.keys(_shared.pickerProps).forEach(function (key) {
  255. props[key] = _this4[key];
  256. });
  257. return h(_picker["default"], {
  258. "class": bem(),
  259. "ref": "picker",
  260. "attrs": {
  261. "columns": this.columns
  262. },
  263. "on": {
  264. "change": this.onChange,
  265. "confirm": this.onConfirm,
  266. "cancel": function cancel() {
  267. _this4.$emit('cancel');
  268. }
  269. },
  270. "props": (0, _extends2["default"])({}, props)
  271. });
  272. }
  273. });
  274. exports["default"] = _default2;