DatePicker.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("../utils");
  26. var import_utils2 = require("./utils");
  27. var import_use_expose = require("../composables/use-expose");
  28. var import_picker = require("../picker");
  29. const currentYear = new Date().getFullYear();
  30. const [name] = (0, import_utils.createNamespace)("date-picker");
  31. var stdin_default = (0, import_vue2.defineComponent)({
  32. name,
  33. props: (0, import_utils.extend)({}, import_utils2.sharedProps, {
  34. type: (0, import_utils.makeStringProp)("datetime"),
  35. modelValue: Date,
  36. minDate: {
  37. type: Date,
  38. default: () => new Date(currentYear - 10, 0, 1),
  39. validator: import_utils.isDate
  40. },
  41. maxDate: {
  42. type: Date,
  43. default: () => new Date(currentYear + 10, 11, 31),
  44. validator: import_utils.isDate
  45. }
  46. }),
  47. emits: ["confirm", "cancel", "change", "update:modelValue"],
  48. setup(props, {
  49. emit,
  50. slots
  51. }) {
  52. const formatValue = (value) => {
  53. if ((0, import_utils.isDate)(value)) {
  54. const timestamp = (0, import_utils.clamp)(value.getTime(), props.minDate.getTime(), props.maxDate.getTime());
  55. return new Date(timestamp);
  56. }
  57. return void 0;
  58. };
  59. const picker = (0, import_vue2.ref)();
  60. const currentDate = (0, import_vue2.ref)(formatValue(props.modelValue));
  61. const getBoundary = (type, value) => {
  62. const boundary = props[`${type}Date`];
  63. const year = boundary.getFullYear();
  64. let month = 1;
  65. let date = 1;
  66. let hour = 0;
  67. let minute = 0;
  68. if (type === "max") {
  69. month = 12;
  70. date = (0, import_utils2.getMonthEndDay)(value.getFullYear(), value.getMonth() + 1);
  71. hour = 23;
  72. minute = 59;
  73. }
  74. if (value.getFullYear() === year) {
  75. month = boundary.getMonth() + 1;
  76. if (value.getMonth() + 1 === month) {
  77. date = boundary.getDate();
  78. if (value.getDate() === date) {
  79. hour = boundary.getHours();
  80. if (value.getHours() === hour) {
  81. minute = boundary.getMinutes();
  82. }
  83. }
  84. }
  85. }
  86. return {
  87. [`${type}Year`]: year,
  88. [`${type}Month`]: month,
  89. [`${type}Date`]: date,
  90. [`${type}Hour`]: hour,
  91. [`${type}Minute`]: minute
  92. };
  93. };
  94. const ranges = (0, import_vue2.computed)(() => {
  95. const {
  96. maxYear,
  97. maxDate,
  98. maxMonth,
  99. maxHour,
  100. maxMinute
  101. } = getBoundary("max", currentDate.value || props.minDate);
  102. const {
  103. minYear,
  104. minDate,
  105. minMonth,
  106. minHour,
  107. minMinute
  108. } = getBoundary("min", currentDate.value || props.minDate);
  109. let result = [{
  110. type: "year",
  111. range: [minYear, maxYear]
  112. }, {
  113. type: "month",
  114. range: [minMonth, maxMonth]
  115. }, {
  116. type: "day",
  117. range: [minDate, maxDate]
  118. }, {
  119. type: "hour",
  120. range: [minHour, maxHour]
  121. }, {
  122. type: "minute",
  123. range: [minMinute, maxMinute]
  124. }];
  125. switch (props.type) {
  126. case "date":
  127. result = result.slice(0, 3);
  128. break;
  129. case "year-month":
  130. result = result.slice(0, 2);
  131. break;
  132. case "month-day":
  133. result = result.slice(1, 3);
  134. break;
  135. case "datehour":
  136. result = result.slice(0, 4);
  137. break;
  138. }
  139. if (props.columnsOrder) {
  140. const columnsOrder = props.columnsOrder.concat(result.map((column) => column.type));
  141. result.sort((a, b) => columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type));
  142. }
  143. return result;
  144. });
  145. const originColumns = (0, import_vue2.computed)(() => ranges.value.map(({
  146. type,
  147. range: rangeArr
  148. }) => {
  149. let values = (0, import_utils2.times)(rangeArr[1] - rangeArr[0] + 1, (index) => (0, import_utils.padZero)(rangeArr[0] + index));
  150. if (props.filter) {
  151. values = props.filter(type, values);
  152. }
  153. return {
  154. type,
  155. values
  156. };
  157. }));
  158. const columns = (0, import_vue2.computed)(() => originColumns.value.map((column) => ({
  159. values: column.values.map((value) => props.formatter(column.type, value))
  160. })));
  161. const updateColumnValue = () => {
  162. const value = currentDate.value || props.minDate;
  163. const {
  164. formatter
  165. } = props;
  166. const values = originColumns.value.map((column) => {
  167. switch (column.type) {
  168. case "year":
  169. return formatter("year", `${value.getFullYear()}`);
  170. case "month":
  171. return formatter("month", (0, import_utils.padZero)(value.getMonth() + 1));
  172. case "day":
  173. return formatter("day", (0, import_utils.padZero)(value.getDate()));
  174. case "hour":
  175. return formatter("hour", (0, import_utils.padZero)(value.getHours()));
  176. case "minute":
  177. return formatter("minute", (0, import_utils.padZero)(value.getMinutes()));
  178. default:
  179. return "";
  180. }
  181. });
  182. (0, import_vue2.nextTick)(() => {
  183. var _a;
  184. (_a = picker.value) == null ? void 0 : _a.setValues(values);
  185. });
  186. };
  187. const updateInnerValue = () => {
  188. const {
  189. type
  190. } = props;
  191. const indexes = picker.value.getIndexes();
  192. const getValue = (type2) => {
  193. let index = 0;
  194. originColumns.value.forEach((column, columnIndex) => {
  195. if (type2 === column.type) {
  196. index = columnIndex;
  197. }
  198. });
  199. const {
  200. values
  201. } = originColumns.value[index];
  202. return (0, import_utils2.getTrueValue)(values[indexes[index]]);
  203. };
  204. let year;
  205. let month;
  206. let day;
  207. if (type === "month-day") {
  208. year = (currentDate.value || props.minDate).getFullYear();
  209. month = getValue("month");
  210. day = getValue("day");
  211. } else {
  212. year = getValue("year");
  213. month = getValue("month");
  214. day = type === "year-month" ? 1 : getValue("day");
  215. }
  216. const maxDay = (0, import_utils2.getMonthEndDay)(year, month);
  217. day = day > maxDay ? maxDay : day;
  218. let hour = 0;
  219. let minute = 0;
  220. if (type === "datehour") {
  221. hour = getValue("hour");
  222. }
  223. if (type === "datetime") {
  224. hour = getValue("hour");
  225. minute = getValue("minute");
  226. }
  227. const value = new Date(year, month - 1, day, hour, minute);
  228. currentDate.value = formatValue(value);
  229. };
  230. const onConfirm = () => {
  231. emit("update:modelValue", currentDate.value);
  232. emit("confirm", currentDate.value);
  233. };
  234. const onCancel = () => emit("cancel");
  235. const onChange = () => {
  236. updateInnerValue();
  237. (0, import_vue2.nextTick)(() => {
  238. updateInnerValue();
  239. (0, import_vue2.nextTick)(() => emit("change", currentDate.value));
  240. });
  241. };
  242. (0, import_vue2.onMounted)(() => {
  243. updateColumnValue();
  244. (0, import_vue2.nextTick)(updateInnerValue);
  245. });
  246. (0, import_vue2.watch)(columns, updateColumnValue);
  247. (0, import_vue2.watch)(currentDate, (value, oldValue) => emit("update:modelValue", oldValue ? value : null));
  248. (0, import_vue2.watch)(() => [props.filter, props.minDate, props.maxDate], () => {
  249. (0, import_vue2.nextTick)(updateInnerValue);
  250. });
  251. (0, import_vue2.watch)(() => props.modelValue, (value) => {
  252. var _a;
  253. value = formatValue(value);
  254. if (value && value.valueOf() !== ((_a = currentDate.value) == null ? void 0 : _a.valueOf())) {
  255. currentDate.value = value;
  256. }
  257. });
  258. (0, import_use_expose.useExpose)({
  259. getPicker: () => picker.value && (0, import_utils2.proxyPickerMethods)(picker.value, updateInnerValue)
  260. });
  261. return () => (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
  262. "ref": picker,
  263. "columns": columns.value,
  264. "onChange": onChange,
  265. "onCancel": onCancel,
  266. "onConfirm": onConfirm
  267. }, (0, import_utils.pick)(props, import_utils2.pickerInheritKeys)), slots);
  268. }
  269. });