Added editable DateInput components to Calendar

Vladimir Spasic · Vladimir Spasic · commit d788610b5824 · 2019-03-05T13:17:17.000+01:00
diff --git a/README.md b/README.md
@@ -126,6 +126,7 @@ focusedRange(DateRange)              | Object    |                  | It defines
 onRangeFocusChange(DateRange)        | Object    |                  | Callback function for focus changes
 preview(DateRange)                   | Object    |              | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }`
 showPreview(DateRange)               | bool      | true             | visibility of preview
+editableDateInputs(Calendar)         | bool      | false            | whether dates can be edited in the Calendar's input fields
 dragSelectionEnabled(Calendar)       | bool      | true             | whether dates can be selected via drag n drop
 onPreviewChange(DateRange)           | Object    |                  | Callback function for preview changes
 dateDisplayFormat(DateRange)         | String    | `MMM D, YYYY`    | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js
@@ -4,11 +4,9 @@ import * as rdrLocales from '../../../src/locale';
 import { format, addDays } from 'date-fns';
 import Section from './Section';
 
-function renderStaticRangeLabel(staticRange) {
-  return (
-    <CustomStaticRangeLabelContent text={'This is a custom label content: '}/>
-  );
-}
+const renderStaticRangeLabel = () => (
+  <CustomStaticRangeLabelContent text={'This is a custom label content: '} />
+);
 
 class CustomStaticRangeLabelContent extends React.Component {
   constructor(props) {
@@ -18,14 +16,11 @@ class CustomStaticRangeLabelContent extends React.Component {
       currentDateString: Date(),
     };
 
-    this.intervalId = setInterval(
-      () => {
-        this.setState({
-          currentDateString: Date(),
-        });
-      },
-      1000
-    );
+    this.intervalId = setInterval(() => {
+      this.setState({
+        currentDateString: Date(),
+      });
+    }, 1000);
   }
 
   componentWillUnmount() {
@@ -263,7 +258,7 @@ export default class Main extends Component {
               readOnly
               value={formatDateDisplay(this.state.multipleRanges.selection1.endDate, 'Continuous')}
             />
-            <div className={'newLine'}/>
+            <div className={'newLine'} />
 
             <label className={'label'}>Selection2 Start:</label>
             <input
@@ -277,7 +272,7 @@ export default class Main extends Component {
               readOnly
               value={formatDateDisplay(this.state.multipleRanges.selection2.endDate, 'Continuous')}
             />
-            <div className={'newLine'}/>
+            <div className={'newLine'} />
 
             <label className={'label'}>Selection3 Start:</label>
             <input
@@ -349,6 +344,35 @@ export default class Main extends Component {
             className={'PreviewArea'}
           />
         </Section>
+
+        <Section title="RangePicker - Editable date fields">
+          <div>
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRange.selection.startDate)}
+            />
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRange.selection.endDate, 'Continuous')}
+            />
+          </div>
+          <div>
+            <p>
+              You can edit the dates manually in the input fields. Be aware that the date value
+              <b> must match the supplied date format.</b>
+            </p>
+            <DateRange
+              onChange={this.handleRangeChange.bind(this, 'dateRange')}
+              editableDateInputs={true}
+              moveRangeOnFirstSelection={false}
+              ranges={[this.state.dateRange.selection]}
+              className={'PreviewArea'}
+            />
+          </div>
+        </Section>
+
         <Section title="DefinedRange">
           <div>
             <input
@@ -366,23 +390,22 @@ export default class Main extends Component {
           <DefinedRange
             ranges={[this.state.definedRange.selection]}
             renderStaticRangeLabel={renderStaticRangeLabel}
-            staticRanges={[{
-              label: "Hoy",
-              hasCustomRendering: true,
-              range: () => ({
-                startDate: new Date(),
-                endDate: new Date(),
-              }),
-              isSelected() {
-                return (
-                  true
-                );
+            staticRanges={[
+              {
+                label: 'Hoy',
+                hasCustomRendering: true,
+                range: () => ({
+                  startDate: new Date(),
+                  endDate: new Date(),
+                }),
+                isSelected() {
+                  return true;
+                },
               },
-            }]}
+            ]}
             onChange={this.handleRangeChange.bind(this, 'definedRange')}
             className={'centered'}
-          >
-          </DefinedRange>
+          />
         </Section>
         <Section title="RangePicker with disabled dates">
           <div>
@@ -413,18 +436,18 @@ export default class Main extends Component {
           <DefinedRange
             ranges={[this.state.definedRange.selection]}
             renderStaticRangeLabel={renderStaticRangeLabel}
-            staticRanges={[{
-              hasCustomRendering: true,
-              range: () => ({
-                startDate: new Date(),
-                endDate: new Date(),
-              }),
-              isSelected() {
-                return (
-                  true
-                );
+            staticRanges={[
+              {
+                hasCustomRendering: true,
+                range: () => ({
+                  startDate: new Date(),
+                  endDate: new Date(),
+                }),
+                isSelected() {
+                  return true;
+                },
               },
-            }]}
+            ]}
             onChange={this.handleRangeChange.bind(this, 'definedRange')}
             className={'centered'}
           />
diff --git a/src/components/Calendar.js b/src/components/Calendar.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { rangeShape } from './DayCell.js';
 import Month from './Month.js';
+import DateInput from './DateInput';
 import { calcFocusDate, generateStyles, getMonthDisplayRange } from '../utils';
 import classnames from 'classnames';
 import ReactList from 'react-list';
@@ -238,9 +239,18 @@ class Calendar extends PureComponent {
     );
   }
   renderDateDisplay() {
-    const { focusedRange, color, ranges, rangeColors } = this.props;
+    const {
+      focusedRange,
+      color,
+      ranges,
+      rangeColors,
+      dateDisplayFormat,
+      editableDateInputs,
+    } = this.props;
+
     const defaultColor = rangeColors[focusedRange[0]] || color;
     const styles = this.styles;
+
     return (
       <div className={styles.dateDisplayWrapper}>
         {ranges.map((range, i) => {
@@ -251,28 +261,32 @@ class Calendar extends PureComponent {
               className={styles.dateDisplay}
               key={i}
               style={{ color: range.color || defaultColor }}>
-              <span
+              <DateInput
                 className={classnames(styles.dateDisplayItem, {
                   [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 0,
                 })}
-                onFocus={() => this.handleRangeFocusChange(i, 0)}>
-                <input
-                  disabled={range.disabled}
-                  readOnly
-                  value={this.formatDateDisplay(range.startDate, 'Early')}
-                />
-              </span>
-              <span
+                readOnly={!editableDateInputs}
+                disabled={range.disabled}
+                value={range.startDate}
+                placeholder="Early"
+                dateOptions={this.dateOptions}
+                dateDisplayFormat={dateDisplayFormat}
+                onChange={this.onDragSelectionEnd}
+                onFocus={() => this.handleRangeFocusChange(i, 0)}
+              />
+              <DateInput
                 className={classnames(styles.dateDisplayItem, {
                   [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 1,
                 })}
-                onFocus={() => this.handleRangeFocusChange(i, 1)}>
-                <input
-                  disabled={range.disabled}
-                  readOnly
-                  value={this.formatDateDisplay(range.endDate, 'Continuous')}
-                />
-              </span>
+                readOnly={!editableDateInputs}
+                disabled={range.disabled}
+                value={range.endDate}
+                placeholder="Continuous"
+                dateOptions={this.dateOptions}
+                dateDisplayFormat={dateDisplayFormat}
+                onChange={this.onDragSelectionEnd}
+                onFocus={() => this.handleRangeFocusChange(i, 1)}
+              />
             </div>
           );
         })}
@@ -341,10 +355,6 @@ class Calendar extends PureComponent {
     const isLongMonth = differenceInDays(end, start, this.dateOptions) + 1 > 7 * 5;
     return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight;
   }
-  formatDateDisplay(date, defaultText) {
-    if (!date) return defaultText;
-    return format(date, this.props.dateDisplayFormat, this.dateOptions);
-  }
   render() {
     const {
       showDateDisplay,
@@ -488,6 +498,7 @@ Calendar.defaultProps = {
   maxDate: addYears(new Date(), 20),
   minDate: addYears(new Date(), -100),
   rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+  editableDateInputs: false,
   dragSelectionEnabled: true,
 };
 
@@ -533,6 +544,7 @@ Calendar.propTypes = {
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
   navigatorRenderer: PropTypes.func,
   rangeColors: PropTypes.arrayOf(PropTypes.string),
+  editableDateInputs: PropTypes.bool,
   dragSelectionEnabled: PropTypes.bool,
 };
 
diff --git a/src/components/DateInput.js b/src/components/DateInput.js
@@ -0,0 +1,110 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { format, parse, isValid, isEqual } from 'date-fns';
+
+class DateInput extends PureComponent {
+  constructor(props, context) {
+    super(props, context);
+
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+
+    this.state = {
+      invalid: false,
+      changed: false,
+      value: this.formatDate(props),
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { value } = this.props;
+
+    if (!isEqual(value, nextProps.value)) {
+      this.setState({ value: this.formatDate(nextProps) });
+    }
+  }
+
+  formatDate({ value, dateDisplayFormat, dateOptions }) {
+    if (value && isValid(value)) {
+      return format(value, dateDisplayFormat, dateOptions);
+    }
+    return '';
+  }
+
+  update(value) {
+    const { invalid, changed } = this.state;
+
+    if (invalid || !changed || !value) {
+      return;
+    }
+
+    const { onChange, dateDisplayFormat, dateOptions } = this.props;
+    const parsed = parse(value, dateDisplayFormat, new Date(), dateOptions);
+
+    if (isValid(parsed)) {
+      this.setState({ changed: false }, () => onChange(parsed));
+    } else {
+      this.setState({ invalid: true });
+    }
+  }
+
+  onKeyDown(e) {
+    const { value } = this.state;
+
+    if (e.key === 'Enter') {
+      this.update(value);
+    }
+  }
+
+  onChange(e) {
+    this.setState({ value: e.target.value, changed: true, invalid: false });
+  }
+
+  onBlur() {
+    const { value } = this.state;
+    this.update(value);
+  }
+
+  render() {
+    const { className, readOnly, placeholder, disabled, onFocus } = this.props;
+    const { value, invalid } = this.state;
+
+    return (
+      <span className={classnames('rdrDateInput', className)}>
+        <input
+          readOnly={readOnly}
+          disabled={disabled}
+          value={value}
+          placeholder={placeholder}
+          onKeyDown={this.onKeyDown}
+          onChange={this.onChange}
+          onBlur={this.onBlur}
+          onFocus={onFocus}
+        />
+        {invalid && <span className="rdrWarning">&#9888;</span>}
+      </span>
+    );
+  }
+}
+
+DateInput.propTypes = {
+  value: PropTypes.object,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  dateOptions: PropTypes.object,
+  dateDisplayFormat: PropTypes.string,
+  className: PropTypes.string,
+  onFocus: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+DateInput.defaultProps = {
+  readOnly: true,
+  disabled: false,
+  dateDisplayFormat: 'MMM D, YYYY',
+};
+
+export default DateInput;
diff --git a/src/components/dateInput.scss b/src/components/dateInput.scss
@@ -0,0 +1,16 @@
+.rdrDateInput {
+  position: relative;
+
+  input {
+    outline: none;
+  }
+
+  .rdrWarning {
+    position: absolute;
+    font-size: 1.6em;
+    line-height: 1.6em;
+    top: 0;
+    right: .25em;
+    color: #FF0000;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
