OpusCapita#58 Restrict enter invalid value for DateInput and DateRangeInput (PR OpusCapita#59)

* Minor change - add translations for clear button ("en", "de" locales)

Author: kvolkovich-sc

src/client/components/DateInput/DateInput.react.js

@@ -283,6 +283,7 @@ class DateInput extends Component {
         tabIndex="-1"
         onClick={this.handleReset}
         disabled={disabled}
+        title={getMessage(locale, 'clearValue')}
       >
         ✕
       </InputAddonButton>

src/client/components/DateInputField/DateInputField.react.js

@@ -9,6 +9,7 @@ let propTypes = {
   dateFormat: PropTypes.string,
   disabled: PropTypes.bool,
   locale: PropTypes.string,
+  error: PropTypes.bool,
   onChange: PropTypes.func,
   onError: PropTypes.func,
   onRef: PropTypes.func,
@@ -20,6 +21,7 @@ let defaultProps = {
   dateFormat: 'dd/MM/yyyy',
   disabled: false,
   locale: 'en',
+  error: false,
   onChange: () => {},
   onError: () => {},
   onRef: () => {},
@@ -36,7 +38,7 @@ class DateInputField extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value || this.props.dateFormat !== nextProps.dateFormat) {
+    if (this.props.error || this.props.value !== nextProps.value || this.props.dateFormat !== nextProps.dateFormat) {
       let inputValue = nextProps.value ? dayjs(nextProps.value.toISOString()).format(nextProps.dateFormat) : '';
       this.setState({ inputValue });
     }
@@ -49,6 +51,7 @@ class DateInputField extends Component {
   validate(dateString, dateFormat) {
     const i18nCompatibleFormat = dateFormat.replace(/D/g, 'd').replace(/Y/g, 'y');
     const dc = new DateConverter(i18nCompatibleFormat);
+
     try {
       const date = dc.stringToValue(dateString);
       const value = !dateString.length ? null : date;
@@ -73,6 +76,7 @@ class DateInputField extends Component {
       className,
       dateFormat,
       disabled,
+      error, // eslint-disable-line no-unused-vars
       locale, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
       onError, // eslint-disable-line no-unused-vars

src/client/components/DateRangeInput/DateRangeInput.SCOPE.react.js

@@ -39,6 +39,7 @@ class DateRangeInputScope extends Component {
   render() {
     return (
       <div>
+        <button onClick={() => this.setState({ value1: [null, null] })}>Reset</button>
         {this._renderChildren()}
       </div>
     );

src/client/components/DateRangeInput/DateRangeInput.react.js

@@ -433,6 +433,7 @@ class DateRangeInput extends Component {
         tabIndex="-1"
         onClick={this.handleReset}
         disabled={disabled}
+        title={getMessage(locale, 'clearValue')}
       >
         ✕
       </InputAddonButton>
@@ -471,6 +472,7 @@ class DateRangeInput extends Component {
             className="opuscapita_date-range-input__input-field opuscapita_date-range-input__left-input-field"
             dateFormat={dayjsCompatibleDateFormat}
             disabled={disabled}
+            error={error}
             onBlur={(e) => this.handleBlur(e, 'from')}
             onFocus={(e) => this.handleFocus(e, 'from')}
             onChange={(date) => this.handleRangeChange([date, value[1]])}
@@ -485,6 +487,7 @@ class DateRangeInput extends Component {
             className="opuscapita_date-range-input__input-field opuscapita_date-range-input__right-input-field"
             dateFormat={dayjsCompatibleDateFormat}
             disabled={disabled}
+            error={error}
             onBlur={(e) => this.handleBlur(e, 'to')}
             onFocus={(e) => this.handleFocus(e, 'to')}
             onChange={(date) => this.handleRangeChange([value[0], date])}

src/client/components/translations.js

@@ -10,7 +10,8 @@ const translations = {
     previousMonth: 'Previous month',
     last30Days: 'Last 30 days',
     thisMonth: 'This month',
-    nextMonth: 'Next month'
+    nextMonth: 'Next month',
+    clearValue: 'Clear value'
   },
   de: {
     selectDateRange: 'Datumsbereich auswählen',
@@ -23,7 +24,8 @@ const translations = {
     previousMonth: 'Vorheriger Monat',
     last30Days: 'Letzte 30 Tagen',
     thisMonth: 'Dieser Monat',
-    nextMonth: 'Nächster Monat'
+    nextMonth: 'Nächster Monat',
+    clearValue: 'Inhalt löschen'
   },
   ru: {
     selectDateRange: 'Выберите диапазон дат',
@@ -36,7 +38,8 @@ const translations = {
     previousMonth: 'Предыдущий месяц',
     last30Days: 'Последние 30 дней',
     thisMonth: 'Этот месяц',
-    nextMonth: 'Следующий месяц'
+    nextMonth: 'Следующий месяц',
+    clearValue: ''
   },
   fi: {
     selectDateRange: 'Valitse päivämääräväli',
@@ -49,7 +52,8 @@ const translations = {
     previousMonth: 'Edellinen kuukausi',
     last30Days: 'Edelliset 30 päivää',
     thisMonth: 'Tämä kuukausi',
-    nextMonth: 'Seuraava kuukausi'
+    nextMonth: 'Seuraava kuukausi',
+    clearValue: ''
   },
   no: {
     selectDateRange: 'Velg datoområde',
@@ -62,7 +66,8 @@ const translations = {
     previousMonth: 'Foregående måned',
     last30Days: 'Siste 30 dager',
     thisMonth: 'Denne måneden',
-    nextMonth: 'Neste måned'
+    nextMonth: 'Neste måned',
+    clearValue: ''
   },
   sv: {
     selectDateRange: 'Välj datumintervall',
@@ -75,7 +80,8 @@ const translations = {
     previousMonth: 'Föregående månad',
     last30Days: 'SSenaste 30 dagarna',
     thisMonth: 'Denna månad',
-    nextMonth: 'Nästa månad'
+    nextMonth: 'Nästa månad',
+    clearValue: ''
   }
 };