use-date-table.mjs 2.9 KB

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