use-date-table.mjs 3.1 KB

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