mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
fix: update quarter picker placeholder for RangePicker (#34089)
This commit is contained in:
黑雨
GitHub
parent
2258335e6c
commit
483ebb9da1
@ -5,6 +5,7 @@ import DatePicker from '..';
|
|||||||
import { setMockDate, resetMockDate } from '../../../tests/utils';
|
import { setMockDate, resetMockDate } from '../../../tests/utils';
|
||||||
import { openPicker, selectCell, closePicker } from './utils';
|
import { openPicker, selectCell, closePicker } from './utils';
|
||||||
import focusTest from '../../../tests/shared/focusTest';
|
import focusTest from '../../../tests/shared/focusTest';
|
||||||
|
import enUS from '../locale/en_US';
|
||||||
|
|
||||||
const { RangePicker } = DatePicker;
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
@ -96,4 +97,10 @@ describe('RangePicker', () => {
|
|||||||
expect(wrapper.find('input').first().props().placeholder).toEqual('Start date');
|
expect(wrapper.find('input').first().props().placeholder).toEqual('Start date');
|
||||||
expect(wrapper.find('input').last().props().placeholder).toEqual('End date');
|
expect(wrapper.find('input').last().props().placeholder).toEqual('End date');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('RangePicker picker quarter placeholder', () => {
|
||||||
|
const wrapper = mount(<RangePicker picker="quarter" locale={enUS} />);
|
||||||
|
expect(wrapper.find('input').at(0).props().placeholder).toEqual('Start quarter');
|
||||||
|
expect(wrapper.find('input').at(1).props().placeholder).toEqual('End quarter');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -38619,6 +38619,305 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:12px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker ant-picker-range"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-input ant-picker-input-active"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder="Start quarter"
|
||||||
|
readonly=""
|
||||||
|
size="12"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-range-separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="to"
|
||||||
|
class="ant-picker-separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="swap-right"
|
||||||
|
class="anticon anticon-swap-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="swap-right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-input"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder="End quarter"
|
||||||
|
readonly=""
|
||||||
|
size="12"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-active-bar"
|
||||||
|
style="left:0;width:0;position:absolute"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-picker-suffix"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="calendar"
|
||||||
|
class="anticon anticon-calendar"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="calendar"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-dropdown ant-picker-dropdown-range"
|
||||||
|
style="opacity:0;pointer-events:none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-range-wrapper ant-picker-quarter-range-wrapper"
|
||||||
|
style="min-width:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-range-arrow"
|
||||||
|
style="left:0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-picker-panel-container"
|
||||||
|
style="margin-left:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-panels"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-panel ant-picker-panel-focused"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-quarter-panel"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-header"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-picker-header-super-prev-btn"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-picker-super-prev-icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="ant-picker-header-view"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-picker-year-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
2016
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="ant-picker-header-super-next-btn"
|
||||||
|
style="visibility:hidden"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-picker-super-next-icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-body"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class="ant-picker-content"
|
||||||
|
>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2016-Q1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q1
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2016-Q2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q2
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2016-Q3"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q3
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2016-Q4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q4
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-panel ant-picker-panel-focused"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-quarter-panel"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-header"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-picker-header-super-prev-btn"
|
||||||
|
style="visibility:hidden"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-picker-super-prev-icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="ant-picker-header-view"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-picker-year-btn"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
2017
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="ant-picker-header-super-next-btn"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-picker-super-next-icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-body"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class="ant-picker-content"
|
||||||
|
>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2017-Q1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q1
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2017-Q2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q2
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2017-Q3"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q3
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-picker-cell ant-picker-cell-in-view"
|
||||||
|
title="2017-Q4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-cell-inner"
|
||||||
|
>
|
||||||
|
Q4
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -3085,6 +3085,92 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:12px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker ant-picker-range"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-picker-input ant-picker-input-active"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder="Start quarter"
|
||||||
|
readonly=""
|
||||||
|
size="12"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-range-separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="to"
|
||||||
|
class="ant-picker-separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="swap-right"
|
||||||
|
class="anticon anticon-swap-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="swap-right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-input"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder="End quarter"
|
||||||
|
readonly=""
|
||||||
|
size="12"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-picker-active-bar"
|
||||||
|
style="left:0;width:0;position:absolute"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-picker-suffix"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="calendar"
|
||||||
|
class="anticon anticon-calendar"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="calendar"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -24,6 +24,7 @@ ReactDOM.render(
|
|||||||
<RangePicker showTime />
|
<RangePicker showTime />
|
||||||
<RangePicker picker="week" />
|
<RangePicker picker="week" />
|
||||||
<RangePicker picker="month" />
|
<RangePicker picker="month" />
|
||||||
|
<RangePicker picker="quarter" />
|
||||||
<RangePicker picker="year" />
|
<RangePicker picker="year" />
|
||||||
</Space>,
|
</Space>,
|
||||||
mountNode,
|
mountNode,
|
||||||
|
|||||||
@ -102,6 +102,7 @@ export type AdditionalPickerLocaleLangProps = {
|
|||||||
monthPlaceholder?: string;
|
monthPlaceholder?: string;
|
||||||
weekPlaceholder?: string;
|
weekPlaceholder?: string;
|
||||||
rangeYearPlaceholder?: [string, string];
|
rangeYearPlaceholder?: [string, string];
|
||||||
|
rangeQuarterPlaceholder?: [string, string];
|
||||||
rangeMonthPlaceholder?: [string, string];
|
rangeMonthPlaceholder?: [string, string];
|
||||||
rangeWeekPlaceholder?: [string, string];
|
rangeWeekPlaceholder?: [string, string];
|
||||||
rangePlaceholder?: [string, string];
|
rangePlaceholder?: [string, string];
|
||||||
|
|||||||
@ -12,6 +12,7 @@ const locale: PickerLocale = {
|
|||||||
weekPlaceholder: 'Select week',
|
weekPlaceholder: 'Select week',
|
||||||
rangePlaceholder: ['Start date', 'End date'],
|
rangePlaceholder: ['Start date', 'End date'],
|
||||||
rangeYearPlaceholder: ['Start year', 'End year'],
|
rangeYearPlaceholder: ['Start year', 'End year'],
|
||||||
|
rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
|
||||||
rangeMonthPlaceholder: ['Start month', 'End month'],
|
rangeMonthPlaceholder: ['Start month', 'End month'],
|
||||||
rangeWeekPlaceholder: ['Start week', 'End week'],
|
rangeWeekPlaceholder: ['Start week', 'End week'],
|
||||||
...CalendarLocale,
|
...CalendarLocale,
|
||||||
|
|||||||
@ -12,6 +12,7 @@ const locale: PickerLocale = {
|
|||||||
weekPlaceholder: 'Select week',
|
weekPlaceholder: 'Select week',
|
||||||
rangePlaceholder: ['Start date', 'End date'],
|
rangePlaceholder: ['Start date', 'End date'],
|
||||||
rangeYearPlaceholder: ['Start year', 'End year'],
|
rangeYearPlaceholder: ['Start year', 'End year'],
|
||||||
|
rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
|
||||||
rangeMonthPlaceholder: ['Start month', 'End month'],
|
rangeMonthPlaceholder: ['Start month', 'End month'],
|
||||||
rangeWeekPlaceholder: ['Start week', 'End week'],
|
rangeWeekPlaceholder: ['Start week', 'End week'],
|
||||||
...CalendarLocale,
|
...CalendarLocale,
|
||||||
|
|||||||
@ -13,6 +13,7 @@ const locale: PickerLocale = {
|
|||||||
rangePlaceholder: ['开始日期', '结束日期'],
|
rangePlaceholder: ['开始日期', '结束日期'],
|
||||||
rangeYearPlaceholder: ['开始年份', '结束年份'],
|
rangeYearPlaceholder: ['开始年份', '结束年份'],
|
||||||
rangeMonthPlaceholder: ['开始月份', '结束月份'],
|
rangeMonthPlaceholder: ['开始月份', '结束月份'],
|
||||||
|
rangeQuarterPlaceholder: ['开始季度', '结束季度'],
|
||||||
rangeWeekPlaceholder: ['开始周', '结束周'],
|
rangeWeekPlaceholder: ['开始周', '结束周'],
|
||||||
...CalendarLocale,
|
...CalendarLocale,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -13,6 +13,7 @@ const locale: PickerLocale = {
|
|||||||
rangePlaceholder: ['開始日期', '結束日期'],
|
rangePlaceholder: ['開始日期', '結束日期'],
|
||||||
rangeYearPlaceholder: ['開始年份', '結束年份'],
|
rangeYearPlaceholder: ['開始年份', '結束年份'],
|
||||||
rangeMonthPlaceholder: ['開始月份', '結束月份'],
|
rangeMonthPlaceholder: ['開始月份', '結束月份'],
|
||||||
|
rangeQuarterPlaceholder: ['開始季度', '結束季度'],
|
||||||
rangeWeekPlaceholder: ['開始周', '結束周'],
|
rangeWeekPlaceholder: ['開始周', '結束周'],
|
||||||
...CalendarLocale,
|
...CalendarLocale,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -42,6 +42,9 @@ export function getRangePlaceholder(
|
|||||||
if (picker === 'year' && locale.lang.yearPlaceholder) {
|
if (picker === 'year' && locale.lang.yearPlaceholder) {
|
||||||
return locale.lang.rangeYearPlaceholder;
|
return locale.lang.rangeYearPlaceholder;
|
||||||
}
|
}
|
||||||
|
if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
|
||||||
|
return locale.lang.rangeQuarterPlaceholder;
|
||||||
|
}
|
||||||
if (picker === 'month' && locale.lang.monthPlaceholder) {
|
if (picker === 'month' && locale.lang.monthPlaceholder) {
|
||||||
return locale.lang.rangeMonthPlaceholder;
|
return locale.lang.rangeMonthPlaceholder;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user