I am using ant design framework for ReactJS, where I am trying to find a solution to open DatePicker on button click, however this seems not possible with the framework component, I have tried to use third party DatePicker but it doesn't work well with it.
My requirement is to have a simple input and beside of it there will be a button, on clicking the button DatePicker should popup..
This is my unfinished demo
If anyone has worked on such solution, please help.
Thanks.
DatePicker
has an open
prop that you can set to a boolean
value. Add an onClick
event to your button and then you can toggle the state of the datepicker.
I don't want to show that DatePicker input box, and choosing date to fill value in other Input field, any solution?
Without me detailing the styling part of this problem you can use the onChange
event to set the value of the other 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}>