DatePicker.mjs 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import { ref, watch, computed, defineComponent, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. import { pick, extend, isDate, isSameValue, createNamespace } from "../utils/index.mjs";
  3. import { genOptions, sharedProps, getMonthEndDay, pickerInheritKeys, formatValueRange } from "./utils.mjs";
  4. import { useExpose } from "../composables/use-expose.mjs";
  5. import { Picker } from "../picker/index.mjs";
  6. const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
  7. const [name] = createNamespace("date-picker");
  8. const datePickerProps = extend({}, sharedProps, {
  9. columnsType: {
  10. type: Array,
  11. default: () => ["year", "month", "day"]
  12. },
  13. minDate: {
  14. type: Date,
  15. default: () => new Date(currentYear - 10, 0, 1),
  16. validator: isDate
  17. },
  18. maxDate: {
  19. type: Date,
  20. default: () => new Date(currentYear + 10, 11, 31),
  21. validator: isDate
  22. }
  23. });
  24. var stdin_default = defineComponent({
  25. name,
  26. props: datePickerProps,
  27. emits: ["confirm", "cancel", "change", "update:modelValue"],
  28. setup(props, {
  29. emit,
  30. slots
  31. }) {
  32. const currentValues = ref(props.modelValue);
  33. const updatedByExternalSources = ref(false);
  34. const pickerRef = ref();
  35. const computedValues = computed(() => updatedByExternalSources.value ? props.modelValue : currentValues.value);
  36. const isMinYear = (year) => year === props.minDate.getFullYear();
  37. const isMaxYear = (year) => year === props.maxDate.getFullYear();
  38. const isMinMonth = (month) => month === props.minDate.getMonth() + 1;
  39. const isMaxMonth = (month) => month === props.maxDate.getMonth() + 1;
  40. const getValue = (type) => {
  41. const {
  42. minDate,
  43. columnsType
  44. } = props;
  45. const index = columnsType.indexOf(type);
  46. const value = computedValues.value[index];
  47. if (value) {
  48. return +value;
  49. }
  50. switch (type) {
  51. case "year":
  52. return minDate.getFullYear();
  53. case "month":
  54. return minDate.getMonth() + 1;
  55. case "day":
  56. return minDate.getDate();
  57. }
  58. };
  59. const genYearOptions = () => {
  60. const minYear = props.minDate.getFullYear();
  61. const maxYear = props.maxDate.getFullYear();
  62. return genOptions(minYear, maxYear, "year", props.formatter, props.filter, computedValues.value);
  63. };
  64. const genMonthOptions = () => {
  65. const year = getValue("year");
  66. const minMonth = isMinYear(year) ? props.minDate.getMonth() + 1 : 1;
  67. const maxMonth = isMaxYear(year) ? props.maxDate.getMonth() + 1 : 12;
  68. return genOptions(minMonth, maxMonth, "month", props.formatter, props.filter, computedValues.value);
  69. };
  70. const genDayOptions = () => {
  71. const year = getValue("year");
  72. const month = getValue("month");
  73. const minDate = isMinYear(year) && isMinMonth(month) ? props.minDate.getDate() : 1;
  74. const maxDate = isMaxYear(year) && isMaxMonth(month) ? props.maxDate.getDate() : getMonthEndDay(year, month);
  75. return genOptions(minDate, maxDate, "day", props.formatter, props.filter, computedValues.value);
  76. };
  77. const confirm = () => {
  78. var _a;
  79. return (_a = pickerRef.value) == null ? void 0 : _a.confirm();
  80. };
  81. const getSelectedDate = () => currentValues.value;
  82. const columns = computed(() => props.columnsType.map((type) => {
  83. switch (type) {
  84. case "year":
  85. return genYearOptions();
  86. case "month":
  87. return genMonthOptions();
  88. case "day":
  89. return genDayOptions();
  90. default:
  91. if (process.env.NODE_ENV !== "production") {
  92. throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
  93. }
  94. return [];
  95. }
  96. }));
  97. watch(currentValues, (newValues) => {
  98. if (!isSameValue(newValues, props.modelValue)) {
  99. emit("update:modelValue", newValues);
  100. }
  101. });
  102. watch(() => props.modelValue, (newValues, oldValues) => {
  103. updatedByExternalSources.value = isSameValue(oldValues, currentValues.value);
  104. newValues = formatValueRange(newValues, columns.value);
  105. if (!isSameValue(newValues, currentValues.value)) {
  106. currentValues.value = newValues;
  107. }
  108. updatedByExternalSources.value = false;
  109. }, {
  110. immediate: true
  111. });
  112. const onChange = (...args) => emit("change", ...args);
  113. const onCancel = (...args) => emit("cancel", ...args);
  114. const onConfirm = (...args) => emit("confirm", ...args);
  115. useExpose({
  116. confirm,
  117. getSelectedDate
  118. });
  119. return () => _createVNode(Picker, _mergeProps({
  120. "ref": pickerRef,
  121. "modelValue": currentValues.value,
  122. "onUpdate:modelValue": ($event) => currentValues.value = $event,
  123. "columns": columns.value,
  124. "onChange": onChange,
  125. "onCancel": onCancel,
  126. "onConfirm": onConfirm
  127. }, pick(props, pickerInheritKeys)), slots);
  128. }
  129. });
  130. export {
  131. datePickerProps,
  132. stdin_default as default
  133. };