diff --git a/README.md b/README.md
index 8d06264d..fbc0adcd 100644
--- a/README.md
+++ b/README.md
@@ -69,18 +69,19 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
### Own Props
-| property | type | required | default | description |
-| ---------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| clearable | boolean | no | true | Allows the user to clear the value |
-| format | string | no | 'YYYY-MM-DD' | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
-| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked |
-| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected |
-| locale | object | no | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales! |
-| onDateChange | function | yes | | Callback fired when the value changes |
-| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
-| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not |
-| selected | Date, arrayOf(Date) | no | | Default date selected |
-| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
+| property | type | required | default | description |
+| -------------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| clearable | boolean | no | true | Allows the user to clear the value |
+| format | string | no | 'YYYY-MM-DD' | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
+| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked |
+| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected |
+| locale | object | no | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales! |
+| onDateChange | function | yes | | Callback fired when the value changes |
+| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
+| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not |
+| selected | Date, arrayOf(Date) | no | | Default date selected |
+| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
+| clearOnSameDateClick | boolean | no | true | Controls whether the datepicker's state resets if the same date is selected in succession. |
### Form.Input Props
diff --git a/src/components/datepicker.js b/src/components/datepicker.js
index 6244f45d..c46a6bdb 100644
--- a/src/components/datepicker.js
+++ b/src/components/datepicker.js
@@ -60,6 +60,7 @@ class SemanticDatepicker extends React.Component {
format: PropTypes.string,
keepOpenOnClear: PropTypes.bool,
keepOpenOnSelect: PropTypes.bool,
+ clearOnSameDateClick: PropTypes.bool,
locale: PropTypes.object,
onBlur: PropTypes.func,
onDateChange: PropTypes.func.isRequired,
@@ -83,6 +84,7 @@ class SemanticDatepicker extends React.Component {
format: 'YYYY-MM-DD',
keepOpenOnClear: false,
keepOpenOnSelect: false,
+ clearOnSameDateClick: true,
locale: localeEn,
onBlur: () => {},
placeholder: null,
@@ -222,11 +224,28 @@ class SemanticDatepicker extends React.Component {
};
handleBasicInput = newDate => {
- const { format, keepOpenOnSelect, onDateChange } = this.props;
+ const {
+ format,
+ keepOpenOnSelect,
+ onDateChange,
+ clearOnSameDateClick,
+ } = this.props;
if (!newDate) {
- this.resetState();
-
+ // if clearOnSameDateClick is true (this is the default case)
+ // then reset the state. This is what was previously the default
+ // behavior, without a specific prop.
+ if (clearOnSameDateClick) {
+ this.resetState();
+ } else {
+ // Don't reset the state. Instead, close or keep open the
+ // datepicker according to the value of keepOpenOnSelect.
+ // Essentially, follow the default behavior of clicking a date
+ // but without changing the value in state.
+ this.setState({
+ isVisible: keepOpenOnSelect,
+ });
+ }
return;
}
@@ -322,7 +341,6 @@ class SemanticDatepicker extends React.Component {
typedValue,
} = this.state;
const { clearable, locale, pointing, filterDate } = this.props;
-
return (
))
- .add('Basic Readonly', () => (
+ .add('Basic with readOnly', () => (
))
+ .add('Basic with clearOnSameDateClick={false}', () => (
+
+
+
+ ))
.add('Basic with allowOnlyNumbers', () => (