feat(calendar-input): changed input-mask (#1267)

alfa-laboratory · Feb 16, 2021 · 855ca13 · 855ca13
1 parent c523d50
commit 855ca13
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 2 deletions.
diff --git a/...ndar/calendar_theme_alfa-on-color.calendar_prop-set_1/selectYear/chromeWin7.png b/...ndar/calendar_theme_alfa-on-color.calendar_prop-set_1/selectYear/chromeWin7.png
diff --git a/...ndar/calendar_theme_alfa-on-color.calendar_prop-set_3/selectYear/chromeWin7.png b/...ndar/calendar_theme_alfa-on-color.calendar_prop-set_3/selectYear/chromeWin7.png
diff --git a/...ndar/calendar_theme_alfa-on-color.calendar_prop-set_4/selectYear/chromeWin7.png b/...ndar/calendar_theme_alfa-on-color.calendar_prop-set_4/selectYear/chromeWin7.png
diff --git a/...ndar/calendar_theme_alfa-on-white.calendar_prop-set_1/selectYear/chromeWin7.png b/...ndar/calendar_theme_alfa-on-white.calendar_prop-set_1/selectYear/chromeWin7.png
diff --git a/...ndar/calendar_theme_alfa-on-white.calendar_prop-set_3/selectYear/chromeWin7.png b/...ndar/calendar_theme_alfa-on-white.calendar_prop-set_3/selectYear/chromeWin7.png
diff --git a/...ndar/calendar_theme_alfa-on-white.calendar_prop-set_4/selectYear/chromeWin7.png b/...ndar/calendar_theme_alfa-on-white.calendar_prop-set_4/selectYear/chromeWin7.png
diff --git a/src/calendar-input/__snapshots__/calendar-input.test.tsx.snap b/src/calendar-input/__snapshots__/calendar-input.test.tsx.snap
@@ -32,7 +32,17 @@ exports[`calendar-input should render without problems 1`] = `
           <ForwardRef(ThemedComponent(IconCalendar)) />
         </ForwardRef(ThemedComponent(IconButton))>
       }
-      mask="11.11.1111"
+      mask="31.11.2111"
+      maskFormatCharacters={
+        Object {
+          "2": Object {
+            "validate": [Function],
+          },
+          "3": Object {
+            "validate": [Function],
+          },
+        }
+      }
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}

diff --git a/src/calendar-input/calendar-input.tsx b/src/calendar-input/calendar-input.tsx
@@ -22,6 +22,7 @@ import { isNodeOutsideElement } from '../lib/window';
 import {
     parseDate, calculateMonth, changeDateFormat, isInputDateSupported,
 } from './utils';
+import { FormatCharacters } from '../masked-input/mask';
 import performance from '../performance';
 
 /**
@@ -33,6 +34,18 @@ const CUSTOM_DATE_FORMAT = 'DD.MM.YYYY';
 const NATIVE_DATE_FORMAT = 'YYYY-MM-DD';
 const IS_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INPUT_TYPE_DATE = IS_BROWSER && isInputDateSupported();
+const maskFormatCharacters: FormatCharacters = {
+    2: {
+        validate(char) {
+            return /[1-2]/.test(char);
+        },
+    },
+    3: {
+        validate(char) {
+            return /[0-3]/.test(char);
+        },
+    },
+};
 
 export type CalendarInputProps = {
 
@@ -365,7 +378,8 @@ export class CalendarInput extends React.Component<CalendarInputProps> {
                         className={ this.cn('custom-control') }
                         disabledAttr={ this.isNativeInput() || this.isMobilePopup() }
                         focused={ this.state.isInputFocused || this.state.isCalendarFocused }
-                        mask="11.11.1111"
+                        mask="31.11.2111"
+                        maskFormatCharacters={ maskFormatCharacters }
                         size={ this.props.size }
                         type="tel"
                         pattern="[0-9.]*"