mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
parent
42a86258cc
commit
8fbd11015c
45
components/datepicker/demo/dialog.md
Normal file
45
components/datepicker/demo/dialog.md
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
# 结合弹出层
|
||||||
|
|
||||||
|
- order: 10
|
||||||
|
|
||||||
|
弹出层内的时间选择
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import { Modal, Button, Datepicker } from 'antd';
|
||||||
|
|
||||||
|
const App = React.createClass({
|
||||||
|
getInitialState() {
|
||||||
|
return { visible: false };
|
||||||
|
},
|
||||||
|
showModal() {
|
||||||
|
this.setState({
|
||||||
|
visible: true
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleOk() {
|
||||||
|
console.log('点击了确定');
|
||||||
|
this.setState({
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.setState({
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return <div>
|
||||||
|
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
|
||||||
|
<Modal title="第一个 Modal" visible={this.state.visible}
|
||||||
|
onOk={this.handleOk} onCancel={this.handleCancel}>
|
||||||
|
<Datepicker defaultValue="2015-12-12" popupStyle={{zIndex:2000}}/>
|
||||||
|
</Modal>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactDOM.render(<App /> , document.getElementById('components-datepicker-demo-dialog'));
|
||||||
|
````
|
||||||
|
|
@ -1,9 +1,6 @@
|
|||||||
.@{calendar-prefix-cls}-picker-container {
|
.@{calendar-prefix-cls}-picker-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
.@{calendar-prefix-cls} {
|
z-index: 1070;
|
||||||
position: absolute;
|
|
||||||
z-index: 1070;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-picker {
|
.@{calendar-prefix-cls}-picker {
|
||||||
|
Loading…
Reference in New Issue
Block a user