DatePicker.mjs 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
  2. import { ref, watch, computed, defineComponent } from "vue";
  3. import { pick, extend, isDate, isSameValue, createNamespace } from "../utils/index.mjs";
  4. import { genOptions, sharedProps, getMonthEndDay, pickerInheritKeys, formatValueRange } from "./utils.mjs";
  5. import { Picker } from "../picker/index.mjs";
  6. const currentYear = 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 genYearOptions = () => {
  34. const minYear = props.minDate.getFullYear();
  35. const maxYear = props.maxDate.getFullYear();
  36. return genOptions(minYear, maxYear, "year", props.formatter, props.filter);
  37. };
  38. const isMinYear = (year) => year === props.minDate.getFullYear();
  39. const isMaxYear = (year) => year === props.maxDate.getFullYear();
  40. const isMinMonth = (month) => month === props.minDate.getMonth() + 1;
  41. const isMaxMonth = (month) => month === props.maxDate.getMonth() + 1;
  42. const getValue = (type) => {
  43. const {
  44. minDate,
  45. columnsType
  46. } = props;
  47. const index = columnsType.indexOf(type);
  48. const value = currentValues.value[index];
  49. if (value) {
  50. return +value;
  51. }
  52. switch (type) {
  53. case "year":
  54. return minDate.getFullYear();
  55. case "month":
  56. return minDate.getMonth() + 1;
  57. case "day":
  58. return minDate.getDate();
  59. }
  60. };
  61. const genMonthOptions = () => {
  62. const year = getValue("year");
  63. const minMonth = isMinYear(year) ? props.minDate.getMonth() + 1 : 1;
  64. const maxMonth = isMaxYear(year) ? props.maxDate.getMonth() + 1 : 12;
  65. return genOptions(minMonth, maxMonth, "month", props.formatter, props.filter);
  66. };
  67. const genDayOptions = () => {
  68. const year = getValue("year");
  69. const month = getValue("month");
  70. const minDate = isMinYear(year) && isMinMonth(month) ? props.minDate.getDate() : 1;
  71. const maxDate = isMaxYear(year) && isMaxMonth(month) ? props.maxDate.getDate() : getMonthEndDay(year, month);
  72. return genOptions(minDate, maxDate, "day", props.formatter, props.filter);
  73. };
  74. const columns = computed(() => props.columnsType.map((type) => {
  75. switch (type) {
  76. case "year":
  77. return genYearOptions();
  78. case "month":
  79. return genMonthOptions();
  80. case "day":
  81. return genDayOptions();
  82. default:
  83. if (process.env.NODE_ENV !== "production") {
  84. throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
  85. }
  86. return [];
  87. }
  88. }));
  89. watch(currentValues, (newValues) => {
  90. if (!isSameValue(newValues, props.modelValue)) {
  91. emit("update:modelValue", newValues);
  92. }
  93. });
  94. watch(() => props.modelValue, (newValues) => {
  95. newValues = formatValueRange(newValues, columns.value);
  96. if (!isSameValue(newValues, currentValues.value)) {
  97. currentValues.value = newValues;
  98. }
  99. }, {
  100. immediate: true
  101. });
  102. const onChange = (...args) => emit("change", ...args);
  103. const onCancel = (...args) => emit("cancel", ...args);
  104. const onConfirm = (...args) => emit("confirm", ...args);
  105. return () => _createVNode(Picker, _mergeProps({
  106. "modelValue": currentValues.value,
  107. "onUpdate:modelValue": ($event) => currentValues.value = $event,
  108. "columns": columns.value,
  109. "onChange": onChange,
  110. "onCancel": onCancel,
  111. "onConfirm": onConfirm
  112. }, pick(props, pickerInheritKeys)), slots);
  113. }
  114. });
  115. export {
  116. datePickerProps,
  117. stdin_default as default
  118. };