From f37c3f9af02c1528b41087125ea63791393222a4 Mon Sep 17 00:00:00 2001
From: Simon Egersand <s.egersand@gmail.com>
Date: Mon, 13 Nov 2017 21:02:33 +0100
Subject: [PATCH] Open calendar when clicking on input element
---
test/__snapshots__/snapshots.spec.js.snap | 24 ++++++++++++++++++++++++
test/tests.spec.js | 7 +++++++
DateTime.js | 9 +++++----
README.md | 2 +-
4 files changed, 37 insertions(+), 5 deletions(-)
diff --git a/DateTime.js b/DateTime.js
index 670d8c4..36ed8fa 100644
--- a/DateTime.js
+++ b/DateTime.js
@@ -416,10 +416,11 @@
children = [];
if ( this.props.input ) {
- children = [ React.createElement('input', assign({
+ children = [ React.createElement( 'input', assign({
key: 'i',
type: 'text',
className: 'form-control',
+ onClick: this.openCalendar,
onFocus: this.openCalendar,
onChange: this.onInputChange,
onKeyDown: this.onInputKey,
@@ -432,10 +433,10 @@
if ( this.state.open )
className += ' rdtOpen';
- return React.createElement('div', {className: className}, children.concat(
- React.createElement('div',
+ return React.createElement( 'div', { className: className }, children.concat(
+ React.createElement( 'div',
{ key: 'dt', className: 'rdtPicker' },
- React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
+ React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
)
));
}
diff --git a/README.md b/README.md
index d3ace24..97b34f5 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@
| **onViewModeChange** | `function` | empty function | Callback trigger when the view mode changes. The callback receives the selected view mode string (`years`, `months`, `days` or `time`) as only parameter.|
| **viewMode** | `string` or `number` | `'days'` | The default view to display when the picker is shown (`'years'`, `'months'`, `'days'`, `'time'`). |
| **className** | `string` or `string array` | `''` | Extra class name for the outermost markup element. |
-| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). |
+| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `onClick`, `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). |
| **isValidDate** | `function` | `() => true` | Define the dates that can be selected. The function receives `(currentDate, selectedDate)` and shall return a `true` or `false` whether the `currentDate` is valid or not. See [selectable dates](#selectable-dates).|
| **renderDay** | `function` | `DOM.td(day)` | Customize the way that the days are shown in the daypicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#customize-the-appearance). |
| **renderMonth** | `function` | `DOM.td(month)` | Customize the way that the months are shown in the monthpicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#customize-the-appearance). |
diff --git a/test/__snapshots__/snapshots.spec.js.snap b/test/__snapshots__/snapshots.spec.js.snap
index baefaaa..6561346 100644
--- a/test/__snapshots__/snapshots.spec.js.snap
+++ b/test/__snapshots__/snapshots.spec.js.snap
@@ -4,6 +4,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -95,6 +96,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -792,6 +794,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -1144,6 +1147,7 @@
<input
className="arbitrary-className"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -1497,6 +1501,7 @@
className="form-control"
disabled={true}
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -1850,6 +1855,7 @@
className="form-control"
name="arbitrary-name"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -2202,6 +2208,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="arbitrary-placeholder"
@@ -2555,6 +2562,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
required={true}
@@ -2908,6 +2916,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -3260,6 +3269,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -3612,6 +3622,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -3964,6 +3975,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -4316,6 +4328,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -4668,6 +4681,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -4995,6 +5009,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -5347,6 +5362,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -5699,6 +5715,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -6051,6 +6068,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -6403,6 +6421,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -6745,6 +6764,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -7097,6 +7117,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -7449,6 +7470,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -7577,6 +7599,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
@@ -7678,6 +7701,7 @@
<input
className="form-control"
onChange={[Function]}
+ onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
diff --git a/test/tests.spec.js b/test/tests.spec.js
index f86ba00..99ec384 100644
--- a/test/tests.spec.js
+++ b/test/tests.spec.js
@@ -200,6 +200,13 @@
expect(utils.isOpen(component)).toBeTruthy();
});
+ it('opens picker when clicking on input', () => {
+ const component = utils.createDatetime();
+ expect(utils.isOpen(component)).toBeFalsy();
+ component.find('.form-control').simulate('click');
+ expect(utils.isOpen(component)).toBeTruthy();
+ });
+
it('sets CSS class on selected item (day)', () => {
const component = utils.createDatetime({ viewMode: 'days' });
utils.openDatepicker(component);
--
Gitblit v1.9.3