mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
parent
5c25452de8
commit
d48c2084d5
@ -16,13 +16,29 @@ Render addon contents to timepicker panel's bottom.
|
||||
````jsx
|
||||
import { TimePicker, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<TimePicker
|
||||
addon={panel => (
|
||||
<Button size="small" type="primary" onClick={() => panel.close()}>
|
||||
Ok
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
, mountNode);
|
||||
class TimePickerAddonDemo extends React.Component {
|
||||
state = { open: false };
|
||||
|
||||
handleOpenChange = (open) => {
|
||||
this.setState({ open });
|
||||
}
|
||||
|
||||
handleClose = () => this.setState({ open: false })
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TimePicker
|
||||
open={this.state.open}
|
||||
onOpenChange={this.handleOpenChange}
|
||||
addon={() => (
|
||||
<Button size="small" type="primary" onClick={this.handleClose}>
|
||||
Ok
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<TimePickerAddonDemo />, mountNode);
|
||||
````
|
||||
|
@ -25,6 +25,8 @@ import moment from 'moment';
|
||||
|---------------------|-----|-----|-------|
|
||||
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
|
||||
| value | to set time | [moment](http://momentjs.com/) | - |
|
||||
| open | whether to popup panel | boolean | false |
|
||||
| onOpenChange | a callback function which will be called while panel opening/closing | (status: boolean): void | 无 |
|
||||
| placeholder | display when there's no value | string | "Select a time" |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
|
||||
| format | to set the time format | string | "HH:mm:ss" |
|
||||
|
@ -11,8 +11,10 @@ export interface TimePickerProps {
|
||||
size?: 'large' | 'default' | 'small';
|
||||
value?: moment.Moment;
|
||||
defaultValue?: moment.Moment;
|
||||
open?: boolean;
|
||||
format?: string;
|
||||
onChange?: (time: moment.Moment, timeString: string) => void;
|
||||
onOpenChange?: (status: boolean) => void;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
hideDisabledOptions?: boolean;
|
||||
@ -74,6 +76,13 @@ abstract class TimePicker extends React.Component<TimePickerProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
handleOpenClose = ({ open }) => {
|
||||
const { onOpenChange } = this.props;
|
||||
if (onOpenChange) {
|
||||
onOpenChange(open);
|
||||
}
|
||||
}
|
||||
|
||||
saveTimePicker = (timePickerRef) => {
|
||||
this.timePickerRef = timePickerRef;
|
||||
}
|
||||
@ -121,6 +130,8 @@ abstract class TimePicker extends React.Component<TimePickerProps, any> {
|
||||
showMinute={format.indexOf('mm') > -1}
|
||||
showSecond={format.indexOf('ss') > -1}
|
||||
onChange={this.handleChange}
|
||||
onOpen={this.handleOpenClose}
|
||||
onClose={this.handleOpenClose}
|
||||
addon={addon}
|
||||
/>
|
||||
);
|
||||
|
@ -26,6 +26,8 @@ import moment from 'moment';
|
||||
|---------------------|-----|-----|-------|
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
|
||||
| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
|
||||
| open | 面板是否打开 | boolean | false |
|
||||
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 |
|
||||
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
|
||||
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
|
||||
| format | 展示的时间格式 | string | "HH:mm:ss" |
|
||||
|
Loading…
Reference in New Issue
Block a user