React antd DatePicker日期选择框 Upload Slider使用

1.

 

import moment from 'moment';

2.例如

import zhCN from 'antd/es/date-picker/locale/zh_CN'; // 引入中文包

1.方法


setStartDate=(current)=>{
        
        return current < moment().subtract(1, 'day'); //限制等于大于今天日期
                
    };
    
    onStartChange=(e,dateString)=>{
        
        console.log(dateString);
        if (this.state.endValue__string !=null && dateString>this.state.endValue__string) return;

        this.setState({
            startValue:e,
            startValue_string:dateString
        });
    }
    onEndChange=(e,dateString)=>{

        if (this.state.startValue_string >dateString) return;
        this.setState({
            endValue:e,
            endValue__string:dateString
        });
    }


2.html

<DatePicker disabledDate={this.setStartDate} 
locale={zhCN}
                            value={state.startValue}
                            onChange={this.onStartChange}
                            placeholder={global.t('myProposal.text16')} allowClear={false} showToday={false} /><div className='icon'>—</div>
                                <DatePicker disabledDate ={this.setStartDate} 
                                value={state.endValue}
                                onChange={this.onEndChange}
                                placeholder={global.t('myProposal.text17')} allowClear={false} showToday={false} />

3.upload 

import { Component } from 'react';

import './index.less';
import { Col, Row, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
export default class ConfimModal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            imageUrl: ''

        };

        if (props.onRef) {
            props.onRef(this);
        }
    }

    changeMenu = (e) => {

    }
    onChange = (info) => {
        console.log(localStorage.getItem('avatar') != undefined);
        console.log(info.fileList);


        this.getBase64(info.file.originFileObj, (url) => {
            this.setState({
                imageUrl: url
            });
            localStorage.setItem('avatar', url)
        });

    }
    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    render() {
        const state = this.state;
        return (
            <Upload
                name="avatar"
                listType="picture-circle"
                className="avatar-uploader"
                accept=".jpg , .png"	//文件类型

                showUploadList={false}

                onChange={this.onChange}
            >
                {state.imageUrl || localStorage.getItem('avatar') != undefined ? <img src={localStorage.getItem('avatar')} alt="avatar" style={{ width: '100%' }} /> : <PlusOutlined />}
            </Upload>
        );
    }

}

//
css
.avatar-uploader {
                &>.ant-upload-select {
                    width            : 102px;
                    height           : 102px;
                    margin-inline-end: 8px;
                    margin-bottom    : 8px;
                    text-align       : center;
                    vertical-align   : top;
                    background-color : rgba(0, 0, 0, .02);
                    border           : 1px dashed #d9d9d9;
                    border-radius    : 8px;
                    cursor           : pointer;
                    transition       : border-color .3s;
                    border-radius    : 50%;

                    &>.ant-upload {
                        display        : flex;
                        align-items    : center;
                        justify-content: center;
                        height         : 100%;
                        text-align     : center;

                    }
                }
            }

3.Slider

onChange = (e) => {
        this.setState({
            slideValue: e
        });
    }





<Slider
                        style={{ width: ' 100%' }}
                        marks={{
                            0: '0%',
                            25: '25%',
                            50: '50%',
                            75: '75%',
                            100: '100%'
                        }}
                        tooltip={{
                            formatter: (value) => {
                                return `${value}%`;
                            }
                        }}
                        value={state.slideValue}
                        onChange={this.onChange}
                    />

tabs

import { Tabs } from 'antd';
const { TabPane } = Tabs;

changeTab = e => {
        this.setState({
            goods: null
        });
    }


 <Tabs className='select-type' defaultActiveKey="1" tabBarExtraContent={OperationsSlot} onChange={this.changeTab}>
                                <TabPane tab={global.t('nft.role')} key="1"></TabPane></Tabs>