DateHeader.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import Header from '../Header';
  4. import { useInjectPanel } from '../../PanelContext';
  5. import { formatValue } from '../../utils/dateUtil';
  6. import useMergeProps from '../../hooks/useMergeProps';
  7. function DateHeader(_props) {
  8. const props = useMergeProps(_props);
  9. const {
  10. prefixCls,
  11. generateConfig,
  12. locale,
  13. viewDate,
  14. onNextMonth,
  15. onPrevMonth,
  16. onNextYear,
  17. onPrevYear,
  18. onYearClick,
  19. onMonthClick
  20. } = props;
  21. const {
  22. hideHeader
  23. } = useInjectPanel();
  24. if (hideHeader.value) {
  25. return null;
  26. }
  27. const headerPrefixCls = `${prefixCls}-header`;
  28. const monthsLocale = locale.shortMonths || (generateConfig.locale.getShortMonths ? generateConfig.locale.getShortMonths(locale.locale) : []);
  29. const month = generateConfig.getMonth(viewDate);
  30. // =================== Month & Year ===================
  31. const yearNode = _createVNode("button", {
  32. "type": "button",
  33. "key": "year",
  34. "onClick": onYearClick,
  35. "tabindex": -1,
  36. "class": `${prefixCls}-year-btn`
  37. }, [formatValue(viewDate, {
  38. locale,
  39. format: locale.yearFormat,
  40. generateConfig
  41. })]);
  42. const monthNode = _createVNode("button", {
  43. "type": "button",
  44. "key": "month",
  45. "onClick": onMonthClick,
  46. "tabindex": -1,
  47. "class": `${prefixCls}-month-btn`
  48. }, [locale.monthFormat ? formatValue(viewDate, {
  49. locale,
  50. format: locale.monthFormat,
  51. generateConfig
  52. }) : monthsLocale[month]]);
  53. const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
  54. return _createVNode(Header, _objectSpread(_objectSpread({}, props), {}, {
  55. "prefixCls": headerPrefixCls,
  56. "onSuperPrev": onPrevYear,
  57. "onPrev": onPrevMonth,
  58. "onNext": onNextMonth,
  59. "onSuperNext": onNextYear
  60. }), {
  61. default: () => [monthYearNodes]
  62. });
  63. }
  64. DateHeader.displayName = 'DateHeader';
  65. DateHeader.inheritAttrs = false;
  66. export default DateHeader;