@kdcloudjs/kdesign 1.0.2

package/lib/date-picker/locale/en_US.js

@@ -0,0 +1,33 @@
+// import { Locale } from '../interface'
+// const locale: Locale = {
+//   'DatePicker.placeholder': '请选择日期',
+//   'DatePicker.yearPlaceholder': '请选择年份',
+//   'DatePicker.quarterPlaceholder': '请选择季度',
+//   'DatePicker.monthPlaceholder': '请选择月份',
+//   'DatePicker.weekPlaceholder': '请选择周',
+//   // 'DatePicker.today': '今天',
+//   // 'DatePicker.now': '此刻',
+//   // 'DatePicker.backToToday': '返回今天',
+//   // 'DatePicker.timeSelect': '选择时间',
+//   // 'DatePicker.dateSelect': '选择日期',
+//   // 'DatePicker.weekSelect': '选择周',
+//   // 'DatePicker.clear': '清除',
+//   // 'DatePicker.month': '月',
+//   // 'DatePicker.year': '年',
+//   // 'DatePicker.previousMonth': '上个月 (翻页上键)',
+//   // 'DatePicker.nextMonth': '下个月 (翻页下键)',
+//   // 'DatePicker.monthSelect': '选择月份',
+//   // 'DatePicker.yearSelect': '选择年份',
+//   // 'DatePicker.decadeSelect': '选择年代',
+//   // 'DatePicker.yearFormat': 'YYYY年',
+//   // 'DatePicker.dayFormat': 'D日',
+//   // 'DatePicker.dateFormat': 'YYYY年M月D日',
+//   // 'DatePicker.dateTimeFormat': 'YYYY年M月D日 HH时mm分ss秒',
+//   // 'DatePicker.previousYear': '上一年 (Control键加左方向键)',
+//   // 'DatePicker.nextYear': '下一年 (Control键加右方向键)',
+//   // 'DatePicker.previousDecade': '上一年代',
+//   // 'DatePicker.nextDecade': '下一年代',
+//   // 'DatePicker.previousCentury': '上一世纪',
+//   // 'DatePicker.nextCentury': '下一世纪',
+// }
+// export default locale

package/lib/date-picker/locale/zh_CN.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from '../interface';
+declare const locale: Locale;
+export default locale;

package/lib/date-picker/locale/zh_CN.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var locale = {
+  // locale: 'zh_CN',
+  'DatePicker.placeholder': '请选择日期',
+  'DatePicker.yearPlaceholder': '请选择年份',
+  'DatePicker.quarterPlaceholder': '请选择季度',
+  'DatePicker.monthPlaceholder': '请选择月份',
+  'DatePicker.weekPlaceholder': '请选择周',
+  'DatePicker.timePlaceholder': '请选择时间',
+  'DatePicker.now': '此刻',
+  'DatePicker.confrim': '确定',
+  'DatePicker.today': '今天',
+  // 'DatePicker.backToToday': '返回今天',
+  // 'DatePicker.timeSelect': '选择时间',
+  // 'DatePicker.dateSelect': '选择日期',
+  // 'DatePicker.weekSelect': '选择周',
+  // 'DatePicker.clear': '清除',
+  // 'DatePicker.month': '月',
+  // 'DatePicker.year': '年',
+  // 'DatePicker.previousMonth': '上个月 (翻页上键)',
+  // 'DatePicker.nextMonth': '下个月 (翻页下键)',
+  // 'DatePicker.monthSelect': '选择月份',
+  // 'DatePicker.yearSelect': '选择年份',
+  // 'DatePicker.decadeSelect': '选择年代',
+  // 'DatePicker.yearFormat': 'YYYY年',
+  // 'DatePicker.dayFormat': 'D日',
+  // 'DatePicker.dateFormat': 'YYYY年M月D日',
+  // 'DatePicker.dateTimeFormat': 'YYYY年M月D日 HH时mm分ss秒',
+  // 'DatePicker.previousYear': '上一年 (Control键加左方向键)',
+  // 'DatePicker.nextYear': '下一年 (Control键加右方向键)',
+  // 'DatePicker.previousDecade': '上一年代',
+  // 'DatePicker.nextDecade': '下一年代',
+  // 'DatePicker.previousCentury': '上一世纪',
+  // 'DatePicker.nextCentury': '下一世纪',
+  'DatePicker.rangePlaceholder': ['开始日期', '结束日期'],
+  'DatePicker.rangeYearPlaceholder': ['开始年份', '结束年份'],
+  'DatePicker.rangeMonthPlaceholder': ['开始月份', '结束月份'],
+  'DatePicker.rangeWeekPlaceholder': ['开始周', '结束周'],
+  'DatePicker.rangeQuarterPlaceholder': ['开始季度', '结束季度'],
+  'DatePicker.rangeTimePlaceholder': ['开始时间', '结束时间']
+};
+var _default = locale;
+exports.default = _default;

package/lib/date-picker/locale/zh_TW.d.ts

@@ -0,0 +1 @@
+

package/lib/date-picker/locale/zh_TW.js

@@ -0,0 +1,33 @@
+// import { Locale } from '../interface'
+// const locale: Locale = {
+//   'DatePicker.placeholder': '请选择日期',
+//   'DatePicker.yearPlaceholder': '请选择年份',
+//   'DatePicker.quarterPlaceholder': '请选择季度',
+//   'DatePicker.monthPlaceholder': '请选择月份',
+//   'DatePicker.weekPlaceholder': '请选择周',
+//   // 'DatePicker.today': '今天',
+//   // 'DatePicker.now': '此刻',
+//   // 'DatePicker.backToToday': '返回今天',
+//   // 'DatePicker.timeSelect': '选择时间',
+//   // 'DatePicker.dateSelect': '选择日期',
+//   // 'DatePicker.weekSelect': '选择周',
+//   // 'DatePicker.clear': '清除',
+//   // 'DatePicker.month': '月',
+//   // 'DatePicker.year': '年',
+//   // 'DatePicker.previousMonth': '上个月 (翻页上键)',
+//   // 'DatePicker.nextMonth': '下个月 (翻页下键)',
+//   // 'DatePicker.monthSelect': '选择月份',
+//   // 'DatePicker.yearSelect': '选择年份',
+//   // 'DatePicker.decadeSelect': '选择年代',
+//   // 'DatePicker.yearFormat': 'YYYY年',
+//   // 'DatePicker.dayFormat': 'D日',
+//   // 'DatePicker.dateFormat': 'YYYY年M月D日',
+//   // 'DatePicker.dateTimeFormat': 'YYYY年M月D日 HH时mm分ss秒',
+//   // 'DatePicker.previousYear': '上一年 (Control键加左方向键)',
+//   // 'DatePicker.nextYear': '下一年 (Control键加右方向键)',
+//   // 'DatePicker.previousDecade': '上一年代',
+//   // 'DatePicker.nextDecade': '下一年代',
+//   // 'DatePicker.previousCentury': '上一世纪',
+//   // 'DatePicker.nextCentury': '下一世纪',
+// }
+// export default locale

package/lib/date-picker/panel/date-time/date-time.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CalendarProps } from '../../calendar';
+import { SharedTimeProps } from '../time/time';
+import { DateType, DisabledTime, PanelSharedProps } from '../../interface';
+export interface DatetimePanelProps extends PanelSharedProps, Omit<CalendarProps, 'disabledHours' | 'disabledMinutes' | 'disabledSeconds'> {
+    dateHeader: React.ReactNode;
+    disabledTimePanel?: DisabledTime;
+    showTime?: boolean | SharedTimeProps;
+    defaultValue?: DateType;
+}
+declare function DatetimePanel(props: DatetimePanelProps): JSX.Element;
+export default DatetimePanel;

package/lib/date-picker/panel/date-time/date-time.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _calendar = _interopRequireDefault(require("../../calendar"));
+
+var _time = _interopRequireDefault(require("../time/time"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function DatetimePanel(props) {
+  var context = React.useContext(_context.default);
+  var prefixCls = context.prefixCls,
+      panelPosition = context.panelPosition,
+      dateValue = context.dateValue,
+      rangeValue = context.rangeValue;
+  var disabledTimePanel = props.disabledTimePanel,
+      showTime = props.showTime,
+      dateHeader = props.dateHeader;
+  var value = dateValue;
+
+  if (panelPosition === 'left') {
+    value = rangeValue[0];
+  } else if (panelPosition === 'right') {
+    value = rangeValue[1];
+  }
+
+  var timeProps = (0, _typeof2.default)(showTime) === 'object' ? (0, _extends2.default)({}, showTime) : {};
+  var disabledTimes = disabledTimePanel ? disabledTimePanel(value || null) : {};
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-datetime-panel"), {// [`${panelPrefixCls}-active`]: activePanel,
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-date"))
+  }, dateHeader, /*#__PURE__*/React.createElement(_calendar.default, (0, _extends2.default)({}, props))), /*#__PURE__*/React.createElement(_time.default, (0, _extends2.default)({}, props, {
+    format: undefined
+  }, timeProps, disabledTimes, {
+    defaultValue: undefined
+  })));
+}
+
+var _default = DatetimePanel;
+exports.default = _default;

package/lib/date-picker/panel/header/header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface HeaderProps {
+    children: React.ReactNode;
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
+    superPrevIcon?: React.ReactNode;
+    superNextIcon?: React.ReactNode;
+    className?: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    onSuperPrev?: () => void;
+    onSuperNext?: () => void;
+}
+declare function Header(props: HeaderProps): JSX.Element;
+export default Header;

package/lib/date-picker/panel/header/header.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icon = _interopRequireDefault(require("../../../icon"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Header(props) {
+  var context = (0, _react.useContext)(_context.default);
+  var prefixCls = context.prefixCls;
+  var className = props.className,
+      children = props.children,
+      prevIcon = props.prevIcon,
+      nextIcon = props.nextIcon,
+      superPrevIcon = props.superPrevIcon,
+      superNextIcon = props.superNextIcon,
+      onPrev = props.onPrev,
+      onNext = props.onNext,
+      onSuperPrev = props.onSuperPrev,
+      onSuperNext = props.onSuperNext;
+  var iconCls = (0, _classnames.default)("".concat(prefixCls, "-header-icon"));
+  var textCls = (0, _classnames.default)("".concat(prefixCls, "-header-text"));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className
+  }, onSuperPrev ? /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls,
+    onClick: onSuperPrev
+  }, superPrevIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "double-arrow-left"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls
+  }), onPrev ? /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls,
+    onClick: onPrev
+  }, prevIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "arrow-left"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: textCls
+  }, children), onNext ? /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls,
+    onClick: onNext
+  }, nextIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "arrow-right"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls
+  }), onSuperNext ? /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls,
+    onClick: onSuperNext
+  }, superNextIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "double-arrow-right"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: iconCls
+  }));
+}
+
+var _default = Header;
+exports.default = _default;

package/lib/date-picker/panel/month/month.d.ts

@@ -0,0 +1,8 @@
+import { DateType } from '../../interface';
+export declare const monthsNumToText: string[];
+export interface MonthProps {
+    showFullMonth?: boolean;
+    disabledDate?(date: DateType): boolean;
+}
+declare function Month(props: MonthProps): JSX.Element;
+export default Month;

package/lib/date-picker/panel/month/month.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.monthsNumToText = exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames3 = _interopRequireDefault(require("classnames"));
+
+var _dateFns = require("../../utils/date-fns");
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _useRangeCls = _interopRequireDefault(require("../../hooks/use-range-cls"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var monthsNumToText = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '13月'];
+exports.monthsNumToText = monthsNumToText;
+var monthsThreeColumns = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11]];
+
+function Month(props) {
+  var context = (0, _react.useContext)(_context.default);
+  var prefixCls = context.prefixCls,
+      dateValue = context.dateValue,
+      viewDate = context.viewDate,
+      onSelect = context.onSelect,
+      onDateMouseEnter = context.onDateMouseEnter,
+      onDateMouseLeave = context.onDateMouseLeave,
+      rangeValue = context.rangeValue,
+      panelPosition = context.panelPosition,
+      hoverRangedValue = context.hoverRangedValue;
+  var disabledDate = props.disabledDate;
+
+  var _dateValue;
+
+  if (panelPosition) {
+    _dateValue = rangeValue;
+  } else {
+    _dateValue = dateValue;
+  }
+
+  var hasFindSelected = false;
+  var hasFindToday = false;
+
+  var getMonthSelected = function getMonthSelected(month) {
+    if (hasFindSelected) return false;
+
+    if (Array.isArray(_dateValue)) {
+      return _dateValue[0] && (0, _dateFns.getMonth)(_dateValue[0]) === month && (0, _dateFns.getYear)(_dateValue[0]) === (0, _dateFns.getYear)(viewDate) || _dateValue[1] && (0, _dateFns.getMonth)(_dateValue[1]) === month && (0, _dateFns.getYear)(_dateValue[1]) === (0, _dateFns.getYear)(viewDate);
+    } else {
+      if (_dateValue && (0, _dateFns.getMonth)(_dateValue) === month && (0, _dateFns.getYear)(_dateValue) === (0, _dateFns.getYear)(viewDate)) {
+        hasFindSelected = true;
+        return true;
+      }
+
+      return false;
+    }
+  };
+
+  var getMonthToday = function getMonthToday(month) {
+    if (hasFindToday) return false;
+
+    if ((0, _dateFns.getYear)(viewDate) === (0, _dateFns.getYear)((0, _dateFns.newDate)()) && month === (0, _dateFns.getMonth)((0, _dateFns.newDate)())) {
+      hasFindToday = true;
+
+      if (Array.isArray(_dateValue)) {
+        return _dateValue[0] ? (0, _dateFns.getMonth)(_dateValue[0]) !== month : _dateValue[1] ? (0, _dateFns.getMonth)(_dateValue[1]) !== month : true;
+      } else {
+        return _dateValue ? (0, _dateFns.getMonth)(_dateValue) !== month : true;
+      }
+    }
+  };
+
+  var getMonthClassNames = function getMonthClassNames(i) {
+    var _classnames;
+
+    return (0, _classnames3.default)("".concat(prefixCls, "-month-text"), (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-month-text-selected"), getMonthSelected(i)), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-month-text-today"), getMonthToday(i)), _classnames));
+  };
+
+  var getRangeCls = (0, _useRangeCls.default)({
+    prefixCls: prefixCls,
+    rangeValue: rangeValue,
+    hoverRangedValue: hoverRangedValue,
+    isRange: !!panelPosition,
+    isAfterStart: function isAfterStart(date, rangedValue) {
+      return rangedValue[0] ? (0, _dateFns.isAfter)((0, _dateFns.getStartOfMonth)(date), (0, _dateFns.getStartOfMonth)(rangedValue[0])) : false;
+    },
+    isBeforeEnd: function isBeforeEnd(date, rangedValue) {
+      return rangedValue[1] ? (0, _dateFns.isBefore)((0, _dateFns.getStartOfMonth)(date), (0, _dateFns.getStartOfMonth)(rangedValue[1])) : false;
+    },
+    isStart: function isStart(date, rangedValue) {
+      return rangedValue[0] ? (0, _dateFns.isSameMonth)(date, rangedValue[0]) : false;
+    },
+    isEnd: function isEnd(date, rangedValue) {
+      return rangedValue[1] ? (0, _dateFns.isSameMonth)(date, rangedValue[1]) : false;
+    }
+  });
+
+  var handleClick = function handleClick(date) {
+    if (!(disabledDate && disabledDate(date))) {
+      onSelect(date, 'mouse');
+    }
+  };
+
+  var renderMonthItem = function renderMonthItem(i) {
+    var monthsText = monthsNumToText[i];
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: getMonthClassNames(i)
+    }, monthsText);
+  };
+
+  var renderMonth = function renderMonth() {
+    var monthLayout = monthsThreeColumns;
+    var monthLineCls = (0, _classnames3.default)("".concat(prefixCls, "-month-line"));
+    return (0, _map.default)(monthLayout).call(monthLayout, function (month, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: monthLineCls,
+        key: i
+      }, (0, _map.default)(month).call(month, function (m, j) {
+        var month = (0, _dateFns.setMonth)(viewDate, m);
+        var _props = {
+          onClick: function onClick() {
+            return handleClick(month);
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (onDateMouseEnter && !(disabledDate && disabledDate(month))) {
+              onDateMouseEnter(month);
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            if (onDateMouseLeave) {
+              onDateMouseLeave();
+            }
+          }
+        };
+        var monthItemCls = (0, _classnames3.default)("".concat(prefixCls, "-month-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-month-item-disabled"), disabledDate && disabledDate(month)), getRangeCls(month));
+        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+          className: monthItemCls,
+          key: j
+        }, _props), renderMonthItem(m));
+      }));
+    });
+  };
+
+  var monthCls = (0, _classnames3.default)("".concat(prefixCls, "-month"));
+  var monthWarpperCls = (0, _classnames3.default)("".concat(prefixCls, "-month-warpper"));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: monthCls
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: monthWarpperCls
+  }, renderMonth()));
+}
+
+var _default = Month;
+exports.default = _default;

package/lib/date-picker/panel/quarter/quarter.d.ts

@@ -0,0 +1,6 @@
+import { DateType } from '../../interface';
+interface QuarterProps {
+    disabledDate?: (date: DateType) => boolean;
+}
+declare function Quarter(props: QuarterProps): JSX.Element;
+export default Quarter;

package/lib/date-picker/panel/quarter/quarter.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames3 = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _dateFns = require("../../utils/date-fns");
+
+var _useRangeCls = _interopRequireDefault(require("../../hooks/use-range-cls"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var quarterList = ['Q1', 'Q2', 'Q3', 'Q4'];
+
+function Quarter(props) {
+  var context = (0, _react.useContext)(_context.default);
+  var prefixCls = context.prefixCls,
+      dateValue = context.dateValue,
+      viewDate = context.viewDate,
+      onSelect = context.onSelect,
+      onDateMouseEnter = context.onDateMouseEnter,
+      onDateMouseLeave = context.onDateMouseLeave,
+      rangeValue = context.rangeValue,
+      panelPosition = context.panelPosition,
+      hoverRangedValue = context.hoverRangedValue;
+  var disabledDate = props.disabledDate;
+
+  var _dateValue;
+
+  if (panelPosition) {
+    _dateValue = rangeValue;
+  } else {
+    _dateValue = dateValue;
+  }
+
+  var hasFindSelected = false;
+  var hasFindToday = false;
+
+  var getQuarterSelected = function getQuarterSelected(quarter) {
+    if (hasFindSelected) return false;
+
+    if (Array.isArray(_dateValue)) {
+      return _dateValue[0] && (0, _dateFns.getQuarter)(_dateValue[0]) === quarter && (0, _dateFns.getYear)(_dateValue[0]) === (0, _dateFns.getYear)(viewDate) || _dateValue[1] && (0, _dateFns.getQuarter)(_dateValue[1]) === quarter && (0, _dateFns.getYear)(_dateValue[1]) === (0, _dateFns.getYear)(viewDate);
+    } else {
+      if (_dateValue && (0, _dateFns.getQuarter)(_dateValue) === quarter && (0, _dateFns.getYear)(_dateValue) === (0, _dateFns.getYear)(viewDate)) {
+        hasFindSelected = true;
+        return true;
+      }
+
+      return false;
+    }
+  };
+
+  var getQuarterToday = function getQuarterToday(quarter) {
+    if (hasFindToday) return false;
+
+    if ((0, _dateFns.getYear)(viewDate) === (0, _dateFns.getYear)((0, _dateFns.newDate)()) && quarter === (0, _dateFns.getQuarter)((0, _dateFns.newDate)())) {
+      hasFindToday = true;
+
+      if (Array.isArray(_dateValue)) {
+        return _dateValue[0] ? (0, _dateFns.getQuarter)(_dateValue[0]) !== quarter : _dateValue[1] ? (0, _dateFns.getQuarter)(_dateValue[1]) !== quarter : true;
+      } else {
+        return _dateValue ? (0, _dateFns.getQuarter)(_dateValue) !== quarter : true;
+      }
+    }
+  };
+
+  var getQuarterClassNames = function getQuarterClassNames(q) {
+    var _classnames;
+
+    return (0, _classnames3.default)("".concat(prefixCls, "-quarter-text"), (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-quarter-text-selected"), getQuarterSelected(q)), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-quarter-text-today"), getQuarterToday(q)), _classnames));
+  };
+
+  var getRangeCls = (0, _useRangeCls.default)({
+    prefixCls: prefixCls,
+    rangeValue: rangeValue,
+    hoverRangedValue: hoverRangedValue,
+    isRange: !!panelPosition,
+    isAfterStart: function isAfterStart(date, rangedValue) {
+      return rangedValue[0] ? (0, _dateFns.isAfter)((0, _dateFns.getStartOfQuarter)(date), (0, _dateFns.getStartOfQuarter)(rangedValue[0])) : false;
+    },
+    isBeforeEnd: function isBeforeEnd(date, rangedValue) {
+      return rangedValue[1] ? (0, _dateFns.isBefore)((0, _dateFns.getStartOfQuarter)(date), (0, _dateFns.getStartOfQuarter)(rangedValue[1])) : false;
+    },
+    isStart: function isStart(date, rangedValue) {
+      return rangedValue[0] ? (0, _dateFns.isSameQuarter)(date, rangedValue[0]) : false;
+    },
+    isEnd: function isEnd(date, rangedValue) {
+      return rangedValue[1] ? (0, _dateFns.isSameQuarter)(date, rangedValue[1]) : false;
+    }
+  });
+
+  var handleClick = function handleClick(date) {
+    if (!(disabledDate && disabledDate(date))) {
+      onSelect(date, 'mouse');
+    }
+  };
+
+  var renderQuarter = function renderQuarter() {
+    return (0, _map.default)(quarterList).call(quarterList, function (n, i) {
+      var quarter = (0, _dateFns.setQuarter)(viewDate, i + 1);
+      var _props = {
+        onClick: function onClick() {
+          return handleClick(quarter);
+        },
+        onMouseEnter: function onMouseEnter() {
+          if (onDateMouseEnter && !(disabledDate && disabledDate(quarter))) {
+            onDateMouseEnter(quarter);
+          }
+        },
+        onMouseLeave: function onMouseLeave() {
+          if (onDateMouseLeave) {
+            onDateMouseLeave();
+          }
+        }
+      };
+      var quarterCls = (0, _classnames3.default)("".concat(prefixCls, "-quarter-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-quarter-item-disabled"), disabledDate && disabledDate(quarter)), getRangeCls(quarter));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: n,
+        className: quarterCls
+      }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        className: getQuarterClassNames(i + 1)
+      }, _props), n));
+    });
+  };
+
+  var quarterCls = (0, _classnames3.default)("".concat(prefixCls, "-quarter"));
+  var quarterWarpperCls = (0, _classnames3.default)("".concat(prefixCls, "-quarter-warpper"));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: quarterCls
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: quarterWarpperCls
+  }, renderQuarter()));
+}
+
+var _default = Quarter;
+exports.default = _default;