Merge pull request #162 from akropolisio:DD-3010-implement-components…

…-locales

DD-3010 Add locales for datepicker

packages/components/package.json

@@ -35,11 +35,10 @@
   "dependencies": {
     "@akropolis-web/primitives": "^0.6.87",
     "@akropolis-web/styles": "^0.16.87",
-    "@date-io/date-fns": "^1.3.13",
+    "@date-io/dayjs": "^1.0.0",
     "@types/mersenne-twister": "^1.1.2",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "color": "^4.0.0",
-    "date-fns": "^2.21.1",
     "mersenne-twister": "^1.1.0",
     "react-copy-to-clipboard": "^5.0.2"
   },

packages/components/src/DatepickerInput/DatepickerInput.tsx

@@ -1,6 +1,6 @@
 import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import * as React from 'react';
-import DateFnsUtils from '@date-io/date-fns';
+import DateFnsUtils from '@date-io/dayjs';
 import cn from 'classnames';
 
 import { useStyles } from './DatepickerInput.style';
@@ -13,20 +13,30 @@ type Props = Omit<KeyboardDatePickerProps, 'KeyboardButtonProps'> & {
   KeyboardButtonProps: KeyboardDatePickerProps['KeyboardButtonProps'] & {
     'aria-label': string;
   };
+  locale?: React.ComponentProps<typeof MuiPickersUtilsProvider>['locale'];
+  format?: string;
+  invalidDateMessage?: string;
 };
 
 function DatepickerInput(props: Props) {
-  const { className, iconClassName, ...restProps } = props;
+  const {
+    className,
+    iconClassName,
+    locale = 'en',
+    format = 'MM/DD/YY',
+    invalidDateMessage = 'Enter correct date',
+    ...restProps
+  } = props;
   const classes = useStyles();
 
   return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
       <KeyboardDatePicker
         className={cn(classes.root, className)}
-        format="MM/dd/yyyy"
+        format={format}
         keyboardIcon={<HistoryIcon className={cn(classes.datePickerIcon, iconClassName)} />}
         variant="inline"
-        invalidDateMessage="Enter correct date"
+        invalidDateMessage={invalidDateMessage}
         autoOk
         {...restProps}
       />

yarn.lock

@@ -1285,10 +1285,10 @@
   resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
   integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
 
-"@date-io/date-fns@^1.3.13":
+"@date-io/dayjs@^1.0.0":
   version "1.3.13"
-  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
-  integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-1.3.13.tgz#3a9edf5a7227b31b0f00a4f640f8715626833a61"
+  integrity sha512-nD39xWYwQjDMIdpUzHIcADHxY9m1hm1DpOaRn3bc2rBdgmwQC0PfW0WYaHyGGP/6LEzEguINRbHuotMhf+T9Sg==
   dependencies:
     "@date-io/core" "^1.3.13"
 
@@ -5072,11 +5072,6 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.21.1:
-  version "2.21.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.21.1.tgz#679a4ccaa584c0706ea70b3fa92262ac3009d2b0"
-  integrity sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA==
-
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"