@salutejs/plasma-new-hope 0.135.0-dev.0 → 0.136.0-canary.1404.10657398641.0

package/emotion/cjs/components/DatePicker/DatePicker.template-doc.mdx

@@ -70,6 +70,38 @@ export function App() {
 }
 ```
 
+### Язык даты
+Язык даты задается с помощью свойства `lang`.
+
+| Обозначение | Отображение | Описание            |
+|-------------|-------------|---------------------|
+| ru          | June        | Английский Язык     |
+| en          | июнь        | Русский язык        |
+
+По умолчанию используется `ru`
+
+```tsx live
+import React from 'react';
+import { DatePicker } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div style=\{{ height: "450px" }}>
+            <DatePicker
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                placeholder="Введите дату"
+                format="DD MMMM YYYY"
+                lang="en"
+                maskWithFormat
+                contentRight={<IconDone size="s" />}
+            />
+        </div>
+    );
+}
+```
+
 ### Валидация и индикация успешного ввода даты.
 За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
 В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:

package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -17,7 +17,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
 var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -70,6 +70,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -116,19 +118,19 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format)),
+    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultFirstDate, format)),
+    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang)),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format)),
+    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultSecondDate, format)),
+    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang)),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -142,6 +144,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -160,6 +163,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -244,13 +248,19 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       });
     }, [opened]);
     (0, _react.useEffect)(function () {
-      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format));
-      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format));
+      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
+      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang));
     }, [defaultFirstDate]);
     (0, _react.useEffect)(function () {
-      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format));
-      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format));
+      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
+      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang));
     }, [defaultSecondDate]);
+    (0, _react.useEffect)(function () {
+      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
+      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang));
+      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
+      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: rootRef,
       view: view,

package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -55,6 +55,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       valueSuccess = _ref.valueSuccess,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -86,11 +88,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format)),
+    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format)),
+    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format, lang)),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -105,6 +107,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -154,9 +157,13 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     (0, _react.useEffect)(function () {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format));
-      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
     }, [defaultDate]);
+    (0, _react.useEffect)(function () {
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,

package/emotion/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -13,6 +13,8 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     maskWithFormat = _ref.maskWithFormat,
@@ -43,9 +45,9 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     if (!format) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue));
     } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
-    setInputValue((0, _dateHelper.formatInputValue)(newValue, format));
+    setInputValue((0, _dateHelper.formatInputValue)(newValue, format, lang));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -58,17 +60,17 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format));
-      setInputValue((0, _dateHelper.formatInputValue)(date, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(date, format, lang));
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
     }
     var formatString = applyFormat ? format : undefined;
-    var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString),
+    var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString, lang),
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format));
-    setInputValue((0, _dateHelper.formatInputValue)(newDate, format));
+    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)(newDate, format, lang));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {

package/emotion/cjs/components/DatePicker/utils/dateHelper.js

@@ -5,41 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
-var formatInputValue = exports.formatInputValue = function formatInputValue(value, format) {
-  if (!value) {
+var formatInputValue = exports.formatInputValue = function formatInputValue(value, format, lang) {
+  if (!value || !lang) {
     return '';
   }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
-    return (0, _datejs.customDayjs)(value, format).format(format);
+    return (0, _datejs.customDayjs)(value, format).locale(lang).format(format);
   }
   if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
-    return (0, _datejs.customDayjs)(value).format(format);
+    return (0, _datejs.customDayjs)(value).locale(lang).format(format);
   }
   return String(value);
 };
-var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format) {
-  if (!value) {
+var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format, lang) {
+  if (!value || !lang) {
     return undefined;
   }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
-    return (0, _datejs.customDayjs)(value, format, true).toDate();
+    return (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate();
   }
   if (String(new Date(value)) !== 'Invalid Date') {
-    return (0, _datejs.customDayjs)(value).toDate();
+    return (0, _datejs.customDayjs)(value).locale(lang).toDate();
   }
   return undefined;
 };
-var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format) {
-  if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
+var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format, lang) {
+  if (format && (0, _datejs.customDayjs)(value, format, true).isValid() && lang) {
     return {
-      value: (0, _datejs.customDayjs)(value, format, true).toDate(),
+      value: (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate(),
       isError: false,
       isSuccess: true
     };
   }
-  if (!format && String(new Date(value)) !== 'Invalid Date') {
+  if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
     return {
-      value: (0, _datejs.customDayjs)(value).toDate(),
+      value: (0, _datejs.customDayjs)(value).locale(lang).toDate(),
       isError: false,
       isSuccess: true
     };

package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -47,6 +47,12 @@ const meta: Meta = {
                 type: 'date',
             },
         },
+        lang: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
     },
 };
 
@@ -63,6 +69,8 @@ const StoryDefault = ({
     valueError,
     valueSuccess,
     size,
+    lang,
+    format,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +91,8 @@ const StoryDefault = ({
             onChangeValue={(e, currentValue) => {
                 onChangeValue(e, currentValue);
             }}
+            lang={lang}
+            format={format}
             onCommitDate={() => setIsOpen(false)}
             {...rest}
         />
@@ -102,6 +112,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -121,6 +137,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         valueError: false,
         valueSuccess: false,
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -230,6 +248,12 @@ export const Range: StoryObj<StoryPropsRange> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -256,6 +280,9 @@ export const Range: StoryObj<StoryPropsRange> = {
         enableSecondTextfieldContentLeft: false,
         enableSecondTextfieldContentRight: false,
 
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
+
         firstValueError: false,
         firstValueSuccess: false,
         secondValueError: false,
@@ -321,6 +348,12 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',

package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -47,6 +47,12 @@ const meta: Meta = {
                 type: 'date',
             },
         },
+        lang: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
     },
 };
 
@@ -63,6 +69,8 @@ const StoryDefault = ({
     valueError,
     valueSuccess,
     size,
+    lang,
+    format,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +91,8 @@ const StoryDefault = ({
             onChangeValue={(e, currentValue) => {
                 onChangeValue(e, currentValue);
             }}
+            lang={lang}
+            format={format}
             onCommitDate={() => setIsOpen(false)}
             {...rest}
         />
@@ -102,6 +112,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -109,6 +125,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         placeholder: '30.05.2024',
         size: 'l',
         view: 'default',
+        labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
@@ -120,6 +137,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         valueError: false,
         valueSuccess: false,
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -229,6 +248,12 @@ export const Range: StoryObj<StoryPropsRange> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -255,6 +280,9 @@ export const Range: StoryObj<StoryPropsRange> = {
         enableSecondTextfieldContentLeft: false,
         enableSecondTextfieldContentRight: false,
 
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
+
         firstValueError: false,
         firstValueSuccess: false,
         secondValueError: false,
@@ -320,6 +348,12 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',

package/emotion/cjs/utils/datejs.js

@@ -8,6 +8,8 @@ var _dayjs = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs"))
 var _customParseFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/customParseFormat"));
 var _quarterOfYear = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/quarterOfYear"));
 var _advancedFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/advancedFormat"));
+require("dayjs/locale/ru");
+require("dayjs/locale/en");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 _dayjs["default"].extend(_customParseFormat["default"]);
 _dayjs["default"].extend(_quarterOfYear["default"]);

package/emotion/es/components/DatePicker/DatePicker.template-doc.mdx

@@ -70,6 +70,38 @@ export function App() {
 }
 ```
 
+### Язык даты
+Язык даты задается с помощью свойства `lang`.
+
+| Обозначение | Отображение | Описание            |
+|-------------|-------------|---------------------|
+| ru          | June        | Английский Язык     |
+| en          | июнь        | Русский язык        |
+
+По умолчанию используется `ru`
+
+```tsx live
+import React from 'react';
+import { DatePicker } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div style=\{{ height: "450px" }}>
+            <DatePicker
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                placeholder="Введите дату"
+                format="DD MMMM YYYY"
+                lang="en"
+                maskWithFormat
+                contentRight={<IconDone size="s" />}
+            />
+        </div>
+    );
+}
+```
+
 ### Валидация и индикация успешного ввода даты.
 За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
 В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:

package/emotion/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -61,6 +61,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -107,19 +109,19 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format)),
+    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = useState(formatInputValue(defaultFirstDate, format)),
+    var _useState9 = useState(formatInputValue(defaultFirstDate, format, lang)),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format)),
+    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = useState(formatInputValue(defaultSecondDate, format)),
+    var _useState13 = useState(formatInputValue(defaultSecondDate, format, lang)),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -133,6 +135,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -151,6 +154,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -235,13 +239,19 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       });
     }, [opened]);
     useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format));
+      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
     }, [defaultFirstDate]);
     useEffect(function () {
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format));
+      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
     }, [defaultSecondDate]);
+    useEffect(function () {
+      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       view: view,

package/emotion/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -46,6 +46,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       valueSuccess = _ref.valueSuccess,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -77,11 +79,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = useState(formatCalendarValue(defaultDate, format)),
+    var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = useState(formatInputValue(defaultDate, format)),
+    var _useState5 = useState(formatInputValue(defaultDate, format, lang)),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -96,6 +98,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -145,9 +148,13 @@ export var datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format));
-      setInputValue(formatInputValue(defaultDate, format));
+      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
+      setInputValue(formatInputValue(defaultDate, format, lang));
     }, [defaultDate]);
+    useEffect(function () {
+      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
+      setInputValue(formatInputValue(defaultDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,