DatePicker.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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. datePickerProps: () => datePickerProps,
  21. default: () => stdin_default
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = 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 = (/* @__PURE__ */ new Date()).getFullYear();
  30. const [name] = (0, import_utils.createNamespace)("date-picker");
  31. const datePickerProps = (0, import_utils.extend)({}, import_utils2.sharedProps, {
  32. columnsType: {
  33. type: Array,
  34. default: () => ["year", "month", "day"]
  35. },
  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. var stdin_default = (0, import_vue.defineComponent)({
  48. name,
  49. props: datePickerProps,
  50. emits: ["confirm", "cancel", "change", "update:modelValue"],
  51. setup(props, {
  52. emit,
  53. slots
  54. }) {
  55. const currentValues = (0, import_vue.ref)(props.modelValue);
  56. const updatedByExternalSources = (0, import_vue.ref)(false);
  57. const pickerRef = (0, import_vue.ref)();
  58. const computedValues = (0, import_vue.computed)(() => updatedByExternalSources.value ? props.modelValue : currentValues.value);
  59. const isMinYear = (year) => year === props.minDate.getFullYear();
  60. const isMaxYear = (year) => year === props.maxDate.getFullYear();
  61. const isMinMonth = (month) => month === props.minDate.getMonth() + 1;
  62. const isMaxMonth = (month) => month === props.maxDate.getMonth() + 1;
  63. const getValue = (type) => {
  64. const {
  65. minDate,
  66. columnsType
  67. } = props;
  68. const index = columnsType.indexOf(type);
  69. const value = computedValues.value[index];
  70. if (value) {
  71. return +value;
  72. }
  73. switch (type) {
  74. case "year":
  75. return minDate.getFullYear();
  76. case "month":
  77. return minDate.getMonth() + 1;
  78. case "day":
  79. return minDate.getDate();
  80. }
  81. };
  82. const genYearOptions = () => {
  83. const minYear = props.minDate.getFullYear();
  84. const maxYear = props.maxDate.getFullYear();
  85. return (0, import_utils2.genOptions)(minYear, maxYear, "year", props.formatter, props.filter, computedValues.value);
  86. };
  87. const genMonthOptions = () => {
  88. const year = getValue("year");
  89. const minMonth = isMinYear(year) ? props.minDate.getMonth() + 1 : 1;
  90. const maxMonth = isMaxYear(year) ? props.maxDate.getMonth() + 1 : 12;
  91. return (0, import_utils2.genOptions)(minMonth, maxMonth, "month", props.formatter, props.filter, computedValues.value);
  92. };
  93. const genDayOptions = () => {
  94. const year = getValue("year");
  95. const month = getValue("month");
  96. const minDate = isMinYear(year) && isMinMonth(month) ? props.minDate.getDate() : 1;
  97. const maxDate = isMaxYear(year) && isMaxMonth(month) ? props.maxDate.getDate() : (0, import_utils2.getMonthEndDay)(year, month);
  98. return (0, import_utils2.genOptions)(minDate, maxDate, "day", props.formatter, props.filter, computedValues.value);
  99. };
  100. const confirm = () => {
  101. var _a;
  102. return (_a = pickerRef.value) == null ? void 0 : _a.confirm();
  103. };
  104. const getSelectedDate = () => currentValues.value;
  105. const columns = (0, import_vue.computed)(() => props.columnsType.map((type) => {
  106. switch (type) {
  107. case "year":
  108. return genYearOptions();
  109. case "month":
  110. return genMonthOptions();
  111. case "day":
  112. return genDayOptions();
  113. default:
  114. if (process.env.NODE_ENV !== "production") {
  115. throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
  116. }
  117. return [];
  118. }
  119. }));
  120. (0, import_vue.watch)(currentValues, (newValues) => {
  121. if (!(0, import_utils.isSameValue)(newValues, props.modelValue)) {
  122. emit("update:modelValue", newValues);
  123. }
  124. });
  125. (0, import_vue.watch)(() => props.modelValue, (newValues, oldValues) => {
  126. updatedByExternalSources.value = (0, import_utils.isSameValue)(oldValues, currentValues.value);
  127. newValues = (0, import_utils2.formatValueRange)(newValues, columns.value);
  128. if (!(0, import_utils.isSameValue)(newValues, currentValues.value)) {
  129. currentValues.value = newValues;
  130. }
  131. updatedByExternalSources.value = false;
  132. }, {
  133. immediate: true
  134. });
  135. const onChange = (...args) => emit("change", ...args);
  136. const onCancel = (...args) => emit("cancel", ...args);
  137. const onConfirm = (...args) => emit("confirm", ...args);
  138. (0, import_use_expose.useExpose)({
  139. confirm,
  140. getSelectedDate
  141. });
  142. return () => (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
  143. "ref": pickerRef,
  144. "modelValue": currentValues.value,
  145. "onUpdate:modelValue": ($event) => currentValues.value = $event,
  146. "columns": columns.value,
  147. "onChange": onChange,
  148. "onCancel": onCancel,
  149. "onConfirm": onConfirm
  150. }, (0, import_utils.pick)(props, import_utils2.pickerInheritKeys)), slots);
  151. }
  152. });