mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
fix: time picker layout (#5983)
* Add popupClassName * Fix showTime panel width bug, close #5959 * Add test case
This commit is contained in:
偏右
Benjy Cui
parent
c6efc4db27
commit
d3aa5f3cbf
@ -45,6 +45,16 @@ describe('DatePicker with showTime', () => {
|
||||
expect(onOpenChangeFn).toHaveBeenCalledWith(false);
|
||||
expect(onChangeFn).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should have correct className when use12Hours is true', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker showTime={{ use12Hours: true }} open />
|
||||
);
|
||||
const calendarWrapper = mount(wrapper.find('Trigger').node.getComponent());
|
||||
expect(calendarWrapper.find('.ant-calendar-time-picker-column-4').length).toBe(0);
|
||||
calendarWrapper.find('.ant-calendar-time-picker-btn').at(0).simulate('click');
|
||||
expect(calendarWrapper.find('.ant-calendar-time-picker-column-4').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('RangePicker with showTime', () => {
|
||||
|
||||
@ -27,19 +27,18 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-1-column,
|
||||
&-1-column &-select {
|
||||
&-column-1,
|
||||
&-column-1 &-select {
|
||||
width: 100%;
|
||||
}
|
||||
&-2-columns &-select {
|
||||
&-column-2 &-select {
|
||||
width: 50%;
|
||||
}
|
||||
&-1-column &-select,
|
||||
&-2-columns &-select {
|
||||
li {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
&-column-3 &-select {
|
||||
width: 33.33%;
|
||||
}
|
||||
&-column-4 &-select {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&-input-wrap {
|
||||
@ -49,11 +48,8 @@
|
||||
&-select {
|
||||
float: left;
|
||||
font-size: @font-size-base;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-width: 0 1px;
|
||||
margin-left: -1px;
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
box-sizing: border-box;
|
||||
width: 33.6%;
|
||||
overflow: hidden;
|
||||
position: relative; // Fix chrome weird render bug
|
||||
height: 206px;
|
||||
@ -81,7 +77,7 @@
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 0 0 28px;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
box-sizing: content-box;
|
||||
margin: 0;
|
||||
|
||||
@ -6,7 +6,7 @@ import warning from '../_util/warning';
|
||||
import { getComponentLocale } from '../_util/getLocale';
|
||||
declare const require: Function;
|
||||
|
||||
function getColumns({ showHour, showMinute, showSecond }) {
|
||||
function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
|
||||
let column = 0;
|
||||
if (showHour) {
|
||||
column += 1;
|
||||
@ -17,6 +17,9 @@ function getColumns({ showHour, showMinute, showSecond }) {
|
||||
if (showSecond) {
|
||||
column += 1;
|
||||
}
|
||||
if (use12Hours) {
|
||||
column += 1;
|
||||
}
|
||||
return column;
|
||||
}
|
||||
|
||||
@ -82,12 +85,10 @@ export default function wrapPicker(Picker, defaultFormat?: string): any {
|
||||
showSecond: timeFormat.indexOf('ss') >= 0,
|
||||
showMinute: timeFormat.indexOf('mm') >= 0,
|
||||
showHour: timeFormat.indexOf('HH') >= 0,
|
||||
use12Hours: (props.showTime && props.showTime.use12Hours),
|
||||
};
|
||||
const columns = getColumns(rcTimePickerProps);
|
||||
const timePickerCls = classNames({
|
||||
[`${prefixCls}-time-picker-1-column`]: columns === 1,
|
||||
[`${prefixCls}-time-picker-2-columns`]: columns === 2,
|
||||
});
|
||||
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
|
||||
const timePicker = props.showTime ? (
|
||||
<TimePickerPanel
|
||||
{...rcTimePickerProps}
|
||||
|
||||
@ -19,8 +19,6 @@ import moment from 'moment';
|
||||
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
|
||||
```
|
||||
|
||||
> Note: `TimePicker` is renamed to `TimePicker` after 0.11.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|---------------------|-----|-----|-------|
|
||||
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
|
||||
@ -38,5 +36,7 @@ import moment from 'moment';
|
||||
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
|
||||
| addon | called from timepicker panel to render some addon to its bottom | function | - |
|
||||
| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
|
||||
| className | className of picker | string | '' |
|
||||
| popupClassName | className of panel | string | '' |
|
||||
|
||||
<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>
|
||||
|
||||
@ -20,8 +20,6 @@ import moment from 'moment';
|
||||
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
|
||||
```
|
||||
|
||||
> 注意：`0.11+` 后 `Timepicker` 改名为 `TimePicker`。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|---------------------|-----|-----|-------|
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
|
||||
@ -39,5 +37,7 @@ import moment from 'moment';
|
||||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| addon | 选择框底部显示自定义的内容 | function | 无 |
|
||||
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
|
||||
| className | 选择器类名 | string | '' |
|
||||
| popupClassName | 弹出层类名 | string | '' |
|
||||
|
||||
<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
"rc-switch": "~1.4.2",
|
||||
"rc-table": "~5.2.13",
|
||||
"rc-tabs": "~7.3.0",
|
||||
"rc-time-picker": "~2.3.3",
|
||||
"rc-time-picker": "~2.4.0",
|
||||
"rc-tooltip": "~3.4.2",
|
||||
"rc-tree": "~1.5.0",
|
||||
"rc-tree-select": "~1.9.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user