ReactJS Ant Design - Открыть DatePicker при нажатии кнопки - PullRequest
Новая
       22

ReactJS Ant Design - Открыть DatePicker при нажатии кнопки

0 голосов
/ 03 октября 2018

Я использую фреймворк Ant Design для ReactJS, где я пытаюсь найти решение, чтобы открыть DatePicker при нажатии кнопки, однако это не представляется возможным с компонентом фреймворка, я пытался использовать стороннееDatePicker, но он плохо работает с ним.

Мое требование - иметь простой ввод, и рядом с ним будет кнопка, при нажатии на которую должен всплыть DatePicker ..

Это мое незаконченное демо

Если кто-то работал над таким решением, пожалуйста, помогите.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Вы можете использовать поле open в antd Datepicker, чтобы переключать DatePicker при нажатии кнопки.

<DatePicker
   open={this.state.openDatePicker}
   onOpenChange={this.datePickerStatus}
/>
<Button
   type="primary"
   style={{ marginLeft: "100px" }}
   onClick={this.toggleDatePicker}
>
  <Icon type="calendar" theme="outlined" />
</Button>

Вы можете переключать поле open, используя функцию toggleDatePicker, вызываемую по нажатию кнопки: 

toggleDatePicker = () => {
  this.setState(prevState => ({
    openDatePicker: !prevState.openDatePicker
  }));
};

Возможно, вы также захотите закрыть окно выбора даты при нажатии снаружи,это может быть достигнуто с помощью: 

hideDatePicker = () => {
  this.setState({
    openDatePicker: false
  });
};

datePickerStatus = status => {
  if (!status) {
    this.hideDatePicker();
  }
};

Вы можете найти живой пример, связанный здесь

0 голосов
/ 03 октября 2018

DatePicker имеет опору open, которую можно установить на значение boolean.Добавьте событие onClick к своей кнопке, и затем вы сможете переключать состояние средства выбора даты.

Я не хочу показывать это поле ввода DatePicker и выбираю дату для заполнения значения в других входных данных.поле, любое решение?

Без подробного описания стилевой части этой проблемы вы можете использовать событие onChange, чтобы установить значение другой input. 

constructor(props) {
    super(props);
    this.state = {
        pickerOpen: false,
        selectedDate: null
    }
}

togglePicker = () => {
    this.setState({pickerOpen: !this.state.pickerOpen});
}

handleChange = selectedDate => {
    this.setState({selectedDate});
}

const { pickerOpen, selectedDate } = this.state;
<Input value={selectedDate && moment(selectedDate).format('YYYY-MM-DD')}/>
<DatePicker open={pickerOpen} onChange={this.handleChange}/>
<Button onClick={this.togglePicker}>
...