diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 88d19f576a..ad840b41bf 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -24,6 +24,8 @@ export default class Header extends React.Component { yearSelectTotal: 20, }; + calenderHeaderNode: any; + getYearSelectElement(year) { const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props; const start = year - (yearSelectOffset as number); @@ -41,6 +43,7 @@ export default class Header extends React.Component { className={`${prefixCls}-year-select`} onChange={this.onYearChange} value={String(year)} + getPopupContainer={() => this.calenderHeaderNode} > {options} @@ -74,6 +77,7 @@ export default class Header extends React.Component { className={`${prefixCls}-month-select`} value={String(month)} onChange={this.onMonthChange} + getPopupContainer={() => this.calenderHeaderNode} > {options} @@ -106,6 +110,10 @@ export default class Header extends React.Component { } } + getCalenderHeaderNode = (node) => { + this.calenderHeaderNode = node; + } + render() { const { type, value, prefixCls, locale, fullscreen } = this.props; const yearSelect = this.getYearSelectElement(value.year()); @@ -120,7 +128,7 @@ export default class Header extends React.Component { ); return ( -
+
{yearSelect} {monthSelect} {typeSwitch} diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 649354be03..ea3138b049 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -16,7 +16,7 @@ padding: 11px 16px 11px 0; text-align: right; - .@{ant-prefix}-select { + .@{ant-prefix}-select-dropdown { text-align: left; }