How can I close a Date Picker popup once a date is selected on ReactJS?

Question

Once a date is selected I would like the popup to close. Currently, it only closes when clicking outside of the popup or on escape, even having selected a date. Is this achievable with an onClick function?

<DateInput
        localization={String(i18n.lng).substr(0, 2)}
        placeholder={t("flot.split.documente-ton-oeuvre.documenter.date-placeholder")}
        value={this.props.value}
        onChange={(event, { value }) => {
        // make sure the date is vaid for momentjs
        let a = value.substr(6, 4),
        m = value.substr(3, 2),
        j = value.substr(0, 2);
        this.props.onChange(`${a}-${m}-${j}`);
        }}
        icon="calendar outline"
/>

Does this answer your question? [Calling a function when the datepicker closes, when I click only outside of the datepicker](https://stackoverflow.com/questions/57616929/calling-a-function-when-the-datepicker-closes-when-i-click-only-outside-of-the) — roottraveller, Nov 21 '19 at 22:22

score 1 · Accepted Answer · answered Nov 21 '19 at 22:23

According to the docs I found for the component I think you're using, all you have to do is add the property closable to your component and it should close on selecting a date.

closable: {bool} If true, popup closes after selecting a date

<DateInput
  closable
/>

Source: https://www.npmjs.com/package/semantic-ui-calendar-react#supported-elements

How can I close a Date Picker popup once a date is selected on ReactJS?

1 Answers1