@true-engineering/true-react-common-ui-kit 3.51.0 → 3.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.51.0",
+  "version": "3.52.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/DatePicker/DatePicker.tsx

@@ -14,13 +14,18 @@ import { ICommonProps } from '../../types';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
 import { DatePickerHeader, PopperContainer } from './components';
 import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
-import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
-import { IDatePickerBaseProps, IRange } from './types';
+import {
+  areDatesEquals,
+  getDateFormatter,
+  getDateValueParser,
+  preparateDatePickerLocale,
+} from './helpers';
+import { IDatePickerBaseProps, IDatePickerLocale, IRange } from './types';
 import { useStyles, IDatePickerStyles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
   selectedDate?: Date | null;
-  locale: Locale;
+  locale: IDatePickerLocale;
   months?: string[];
   /** @default 'dd.MM.yyyy' */
   dateFormat?: string;
@@ -242,7 +247,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           ref={ref}
           minDate={minDate}
           maxDate={maxDate}
-          locale={locale}
+          locale={preparateDatePickerLocale(locale)}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}

package/src/components/DatePicker/helpers.ts

@@ -1,10 +1,12 @@
-import { parse, format, isSameDay } from 'date-fns';
+import { parse, format, isSameDay, type Locale } from 'date-fns';
+import { ru as ruLocale, enUS as enLocale } from 'date-fns/locale';
 import {
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
+import { IDatePickerLocale } from './types';
 
 export const getDateFormatter =
   (dateFormat: string) =>
@@ -21,3 +23,13 @@ export const getDateValueParser =
 export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
   (isEmpty(date1) && isEmpty(date2)) ||
   (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
+
+export const preparateDatePickerLocale = (locale: IDatePickerLocale): Locale => {
+  if (locale === 'ru') {
+    return ruLocale;
+  }
+  if (locale === 'en') {
+    return enLocale;
+  }
+  return locale;
+};

package/src/components/DatePicker/types.ts

@@ -1,8 +1,11 @@
 import { ReactDatePickerProps } from 'react-datepicker';
-import { IDateInputProps } from '../DateInput';
+import { type Locale } from 'date-fns';
+import { type IDateInputProps } from '../DateInput';
 
 export type IRange = [Date | null, Date | null] | null;
 
+export type IDatePickerLocale = 'ru' | 'en' | Locale;
+
 export type IDatePickerBaseProps = Pick<
   ReactDatePickerProps,
   | 'startDate'