Ant design 选定年度

最新推荐文章于 2024-11-28 09:51:43 发布

原创最新推荐文章于 2024-11-28 09:51:43 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ant #年度

本文将探讨Ant Design在过去一年中的发展亮点，包括组件更新、性能优化和社区贡献，同时展望未来的设计趋势和框架改进方向，为开发者提供实用的前端设计资源和指导。

import React from 'react';
import { Form, DatePicker, Row, Col, Button } from 'antd';
import moment from 'moment';

@Form.create()

class Forms extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.query();
    }
    
    //只显示年份
    handlePanelChange = (value) => {
        let yearMonth = moment(value).format('YYYY');
        this.props.form.setFields({
            yearMonth: {
                value: value
            },
        })
        this.setState({
            time: yearMonth,
            isopen: false
        }, () => {
            console.log(this.state.time)
        })
    }

    handleOpenChange = (status) => {
        // console.log(status)    
        if (status) {
            this.setState({ isopen: true })
        } else {
            this.setState({ isopen: false })
        }
    }
    clearValue = () => {
        this.setState({
            time: null
        })
    }


    //点击查询
    query = (page) => {
        let values = this.props.form.getFieldsValue().yearMonth;
        let yearMonth = moment(values).format('YYYY');
        console.log(yearMonth, "年度")
    }

    render() {
        const { getFieldDecorator } = this.props.form;

        return (
            <div>
                <Form style={{ backgroundColor: "#fff", paddingTop: "30px", marginTop: "20px" }}>
                    <Row>
                        <Col span={5}>
                            <Form.Item label="年度">
                                {getFieldDecorator('yearMonth', {

                                })(<DatePicker
                                    // value={this.state.time}               
                                    open={this.state.isopen}
                                    mode="year"
                                    placeholder='请选择年份'
                                    format="YYYY"
                                    onOpenChange={this.handleOpenChange}//弹出日历和关闭日历的回调
                                    onPanelChange={this.handlePanelChange}//日历面板切换的回调
                                    onChange={this.clearValue}//时间发生变化的回调
                                />)}
                            </Form.Item>
                        </Col>
                        <Col span={1} offset={1} style={{ marginTop: "3px" }}>
                            <Button type="primary" onClick={() => this.query()}>查询</Button>//使用箭头函数可以指定参数 防止默认参数err
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}
export default Forms;