75b3c5481bd53e545cc947ef251cc7ab2fdfb7d7a5b219ac1ad0831e928262098b40ff3297f0137f842c61f371eeaaa7962684003554febeecca965924c4a8 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { computed } from 'vue';
  2. import dayjs from 'dayjs';
  3. import localeData from 'dayjs/plugin/localeData.js';
  4. import { getPrevMonthLastDays, getMonthDays, toNestedArr } from './date-table.mjs';
  5. import { WEEK_DAYS } from '../../../constants/date.mjs';
  6. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  7. import { rangeArr } from '../../time-picker/src/utils.mjs';
  8. const useDateTable = (props, emit) => {
  9. dayjs.extend(localeData);
  10. const firstDayOfWeek = dayjs.localeData().firstDayOfWeek();
  11. const { t, lang } = useLocale();
  12. const now = dayjs().locale(lang.value);
  13. const isInRange = computed(() => !!props.range && !!props.range.length);
  14. const rows = computed(() => {
  15. let days = [];
  16. if (isInRange.value) {
  17. const [start, end] = props.range;
  18. const currentMonthRange = rangeArr(end.date() - start.date() + 1).map((index) => ({
  19. text: start.date() + index,
  20. type: "current"
  21. }));
  22. let remaining = currentMonthRange.length % 7;
  23. remaining = remaining === 0 ? 0 : 7 - remaining;
  24. const nextMonthRange = rangeArr(remaining).map((_, index) => ({
  25. text: index + 1,
  26. type: "next"
  27. }));
  28. days = currentMonthRange.concat(nextMonthRange);
  29. } else {
  30. const firstDay = props.date.startOf("month").day();
  31. const prevMonthDays = getPrevMonthLastDays(props.date, (firstDay - firstDayOfWeek + 7) % 7).map((day) => ({
  32. text: day,
  33. type: "prev"
  34. }));
  35. const currentMonthDays = getMonthDays(props.date).map((day) => ({
  36. text: day,
  37. type: "current"
  38. }));
  39. days = [...prevMonthDays, ...currentMonthDays];
  40. const remaining = 7 - (days.length % 7 || 7);
  41. const nextMonthDays = rangeArr(remaining).map((_, index) => ({
  42. text: index + 1,
  43. type: "next"
  44. }));
  45. days = days.concat(nextMonthDays);
  46. }
  47. return toNestedArr(days);
  48. });
  49. const weekDays = computed(() => {
  50. const start = firstDayOfWeek;
  51. if (start === 0) {
  52. return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`));
  53. } else {
  54. return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start)).map((_) => t(`el.datepicker.weeks.${_}`));
  55. }
  56. });
  57. const getFormattedDate = (day, type) => {
  58. switch (type) {
  59. case "prev":
  60. return props.date.startOf("month").subtract(1, "month").date(day);
  61. case "next":
  62. return props.date.startOf("month").add(1, "month").date(day);
  63. case "current":
  64. return props.date.date(day);
  65. }
  66. };
  67. const handlePickDay = ({ text, type }) => {
  68. const date = getFormattedDate(text, type);
  69. emit("pick", date);
  70. };
  71. const getSlotData = ({ text, type }) => {
  72. const day = getFormattedDate(text, type);
  73. return {
  74. isSelected: day.isSame(props.selectedDay),
  75. type: `${type}-month`,
  76. day: day.format("YYYY-MM-DD"),
  77. date: day.toDate()
  78. };
  79. };
  80. return {
  81. now,
  82. isInRange,
  83. rows,
  84. weekDays,
  85. getFormattedDate,
  86. handlePickDay,
  87. getSlotData
  88. };
  89. };
  90. export { useDateTable };
  91. //# sourceMappingURL=use-date-table.mjs.map