закрыть меню выбора даты с помощью кнопки - reactjs - PullRequest
Новая
       17

закрыть меню выбора даты с помощью кнопки - reactjs

0 голосов
/ 12 января 2020

Я новичок в reactjs. Я использовал date picker от ant js. Когда я нажал date picker, он открывается. В footer меню у меня есть флажок compare date и прикрепленный к нему range picker. Если пользователь нажимает check box, compare date picker активируется. В нижней части у меня есть кнопки submit и cancel. Вот картинка, как это выглядит,

enter image description here

Мой вопрос: Когда я выбираю и перетаскиваю диапазон в above date picker, меню закрывается автоматически, и выбранный range date был назначен. Но мне не нужно, чтобы datepicker menu автоматически закрывался после выбора. Он должен быть закрыт только тогда, когда пользователь нажимает кнопку submit. Я знаю, что open реквизит помогает мне справиться с этим. Я прочитал документацию https://ant.design/components/date-picker/#header. Но я не знаю, как использовать в этом случае.

Мне также нужно подтверждение, которое, если пользователь установит флажок compare with, я хочу проверить, есть ли значение в compare date range. Если пользователь не установил значение compare date range, я хочу предупредить его, когда он нажмет кнопку submit. А также, если пользователь не установил above date range, я должен предупредить его, когда он нажмет кнопку submit. Пожалуйста, помогите мне с некоторыми решениями.

Вот код, который я пробовал: 

import React from 'react';
import { DatePicker, Checkbox} from 'antd';
import moment from "moment";
class DateCheck extends React.Component {
    state = { startDate:moment(),endDate:moment(),dateCompareEntry:true,cstartDate:moment(),cendDate:moment()}

    onDateChange(date) {this.setState({startDate:date[0]['_d'],endDate: date[1]['_d']})}
    onInitialDateSet(){
        var end_date = new Date();
        end_date.setDate(end_date.getDate()-15)
        this.setState({startDate:new Date(), endDate:end_date})
    }
    onDateCompareCheckClick(e){this.setState({dateCompareEntry:e.target.checked?false:true})}
    onCompareDateChange(date) {this.setState({cstartDate:(date[0]['_d']),cendDate: date[1]['_d']})}
    onSubmitFun(){console.log("submit Fun")}
    onCancelFun(){
        console.log("cancel Fun")
        var end_date = new Date();
        end_date.setDate(end_date.getDate()-15)
        this.setState({startDate:new Date(), endDate:end_date})
        this.setState({dateCompareEntry:true,cstartDate:moment(),cendDate:moment()})

    }
    componentDidMount(){this.onInitialDateSet()}
    render() {
        const { RangePicker } = DatePicker;
        return (
            <div style = {{display:"flex",justifyContent:"flex-end", width:"100%"}} >    
                <RangePicker 
                    renderExtraFooter={() => 
                        <div style={{display:"flex",flexDirection:"column"}}>
                            <div >
                                <Checkbox onChange = {(e)=>{this.onDateCompareCheckClick(e)}}>Compare With</Checkbox>
                                <RangePicker 
                                    size={'small'}
                                    disabled={this.state.dateCompareEntry} 
                                    onChange ={this.onCompareDateChange.bind(this)}
                                    >
                                </RangePicker>
                            </div>
                            <div style={{marginBottom:"1%",display:"flex",justifyContent:"center"}}>
                                <div>
                                    <Button  onClick={this.onSubmitFun.bind(this)}  size="small" type="primary" icon="search">Submit</Button>
                                </div>
                                <div style={{marginLeft:"2%"}}>
                                    <Button onClick={this.onCancelFun.bind(this)} size="small" type="danger" icon="close-circle">Cancel</Button>
                                </div>
                            </div>
                        </div>
                    } 
                    defaultValue={[ moment(this.state.startDate),moment(this.state.endDate)]} 
                    style={{width:'40%'}} size={'small'} 
                    onChange={this.onDateChange.bind(this)} />  
            </div>
        );
    }
}
export default DateCheck

1 Ответ

0 голосов
/ 12 января 2020

Используйте открытое свойство для открытия DatePicker / RangePicker, как в этом примере:

этот обработчик просто открывает DatePicker, когда вы нажимаете на поле ввода, но это не закрывается с любым другим щелчком! 

  handleJustOpenDatePicker = () => {
    this.setState({ openDatePicker: true });
  };

для закрытия нужен другой обработчик, например кнопка onClick: 

  handleDatePicker = () => {
    this.setState({ openDatePicker: !this.state.openDatePicker });
  };

Полная выборка: 

import React from "react";
import ReactDOM from "react-dom";
import moment from "moment";
import { DatePicker, version } from "antd";
import "antd/dist/antd.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { openDatePicker: false };
  }

  handleDatePicker = () => {
    this.setState({ openDatePicker: !this.state.openDatePicker });
  };

  handleJustOpenDatePicker = () => {
    this.setState({ openDatePicker: true });
  };

  render() {
    return (
      <div style={{ margin: 32 }}>
        <p style={{ marginBottom: 24 }}>Date Picker Test</p>
        <button style={{ marginBottom: 32 }} onClick={this.handleDatePicker}>
          Click to open/Close PDate Picker
        </button>
        <br />

        <div onClick={this.handleJustOpenDatePicker}>
          <DatePicker
            defaultValue={moment()}
            open={this.state.openDatePicker}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Вывод ответа: ЗДЕСЬ

...