DatePicker.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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_vue2 = require("vue");
  26. var import_utils = require("../utils");
  27. var import_utils2 = require("./utils");
  28. var import_picker = require("../picker");
  29. const currentYear = 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_vue2.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_vue2.ref)(props.modelValue);
  56. const genYearOptions = () => {
  57. const minYear = props.minDate.getFullYear();
  58. const maxYear = props.maxDate.getFullYear();
  59. return (0, import_utils2.genOptions)(minYear, maxYear, "year", props.formatter, props.filter);
  60. };
  61. const isMinYear = (year) => year === props.minDate.getFullYear();
  62. const isMaxYear = (year) => year === props.maxDate.getFullYear();
  63. const isMinMonth = (month) => month === props.minDate.getMonth() + 1;
  64. const isMaxMonth = (month) => month === props.maxDate.getMonth() + 1;
  65. const getValue = (type) => {
  66. const {
  67. minDate,
  68. columnsType
  69. } = props;
  70. const index = columnsType.indexOf(type);
  71. const value = currentValues.value[index];
  72. if (value) {
  73. return +value;
  74. }
  75. switch (type) {
  76. case "year":
  77. return minDate.getFullYear();
  78. case "month":
  79. return minDate.getMonth() + 1;
  80. case "day":
  81. return minDate.getDate();
  82. }
  83. };
  84. const genMonthOptions = () => {
  85. const year = getValue("year");
  86. const minMonth = isMinYear(year) ? props.minDate.getMonth() + 1 : 1;
  87. const maxMonth = isMaxYear(year) ? props.maxDate.getMonth() + 1 : 12;
  88. return (0, import_utils2.genOptions)(minMonth, maxMonth, "month", props.formatter, props.filter);
  89. };
  90. const genDayOptions = () => {
  91. const year = getValue("year");
  92. const month = getValue("month");
  93. const minDate = isMinYear(year) && isMinMonth(month) ? props.minDate.getDate() : 1;
  94. const maxDate = isMaxYear(year) && isMaxMonth(month) ? props.maxDate.getDate() : (0, import_utils2.getMonthEndDay)(year, month);
  95. return (0, import_utils2.genOptions)(minDate, maxDate, "day", props.formatter, props.filter);
  96. };
  97. const columns = (0, import_vue2.computed)(() => props.columnsType.map((type) => {
  98. switch (type) {
  99. case "year":
  100. return genYearOptions();
  101. case "month":
  102. return genMonthOptions();
  103. case "day":
  104. return genDayOptions();
  105. default:
  106. if (process.env.NODE_ENV !== "production") {
  107. throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
  108. }
  109. return [];
  110. }
  111. }));
  112. (0, import_vue2.watch)(currentValues, (newValues) => {
  113. if (!(0, import_utils.isSameValue)(newValues, props.modelValue)) {
  114. emit("update:modelValue", newValues);
  115. }
  116. });
  117. (0, import_vue2.watch)(() => props.modelValue, (newValues) => {
  118. newValues = (0, import_utils2.formatValueRange)(newValues, columns.value);
  119. if (!(0, import_utils.isSameValue)(newValues, currentValues.value)) {
  120. currentValues.value = newValues;
  121. }
  122. }, {
  123. immediate: true
  124. });
  125. const onChange = (...args) => emit("change", ...args);
  126. const onCancel = (...args) => emit("cancel", ...args);
  127. const onConfirm = (...args) => emit("confirm", ...args);
  128. return () => (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
  129. "modelValue": currentValues.value,
  130. "onUpdate:modelValue": ($event) => currentValues.value = $event,
  131. "columns": columns.value,
  132. "onChange": onChange,
  133. "onCancel": onCancel,
  134. "onConfirm": onConfirm
  135. }, (0, import_utils.pick)(props, import_utils2.pickerInheritKeys)), slots);
  136. }
  137. });