Управление открытием / закрытием представления календаря Flatpickr с помощью компонента-оболочки - PullRequest
Новая
       20

Управление открытием / закрытием представления календаря Flatpickr с помощью компонента-оболочки

0 голосов
/ 02 апреля 2019

Я не хочу иметь вход для Flatpickr. Вместо этого это должно быть вызвано, щелкая от div, и затем появляется представление календаря.

enter image description here

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';

export default class CustomDatePicker extends Component {
    constructor(props) {
        super(props);
        this.baseOptions = {
            allowInput: false,
            dateFormat: 'Z',
            altInput: true,
            wrap: true,
            ...this.props.options
        };
        this.state = { isOpen: false };
    }

    onOpenToggle = () => this.setState({ isOpen: !this.state.isOpen });

    componentDidMount() {
        document.addEventListener('click', this.handleClick, false);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClick, false);
    }

    handleClick = event => {
        if (this.node && this.node.contains(event.target)) {
            return;
        }

        this.setState({ isOpen: false });
    };

    render() {
        const { selectedDate, label, onChange } = this.props;
        const { isOpen } = this.state;
        return (
            <div
                className="custom-date-picker"
                onClick={this.onOpenToggle}
                ref={node => (this.node = node)}
            >
                <div className="custom-date-picker-icon">
                    <i className="fa fa-calendar" />
                </div>
                <div className="custom-date-picker-select">
                    {selectedDate ? <div>{selectedDate}</div> : <div>{label}</div>}
                </div>
                <div className="custom-date-picker-arrow">
                    {isOpen ? (
                        <i className="fa fa-chevron-up" />
                    ) : (
                        <i className="fa fa-chevron-down" />
                    )}
                </div>

                {isOpen && (
                    <div className="custom-date-picker-panel">
                        {/* <Flatpickr
                            value={selectedDate}
                            options={this.baseOptions}
                            onChange={(_, dateStr) => onChange(dateStr)}
                        /> */}
                    </div>
                )}
            </div>
        );
    }
}

По сути, мне нужно показать представление календаря внутри div с помощью панели имен className custom-date-picker и при изменении я передаю функцию для обновления возможности div

Не могли бы вы показать мне, как этого добиться?

1 Ответ

0 голосов
/ 02 апреля 2019

react-flatpickr не имеет этой встроенной функции. Но вы можете использовать чистый flatpickr для реализации этой функциональности. 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.datePicker = React.createRef();
  }
  onChange(selectedDates, dateStr, instance) {
    console.log(selectedDates);
  }
  componentDidMount() {
    flatpickr(this.datePicker.current, {
      onChange: this.onChange
    });
  }
  render() {
    return(
      <div style={{ border: "1px solid black", height: 100, width: 100}} ref={this.datePicker} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<div id="root"></div>
...