fix: date picker components value parser

Author: bocembocem

docs/spec.md

@@ -166,10 +166,11 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 
 #### DateInput
 
-| Property     | Type                                                 | Required | Description                                                                                                     |
-| :----------- | :--------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------- |
-| outputFormat | `string` \| string \| date \| timestamp \| date_time |          | Format returning string (for backend and logic). [Available formats](https://day.js.org/docs/en/display/format) |
-| printFormat  | `string`                                             |          | Format print string (for view in read form). [Available formats](https://day.js.org/docs/en/display/format)     |
+| Property     | Type                                                 | Required | Description                                                                                                          |
+| :----------- | :--------------------------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------- |
+| outputFormat | `string` \| string \| date \| timestamp \| date_time |          | Format returning string (for backend and logic). [Available formats](https://day.js.org/docs/en/display/format)      |
+| printFormat  | `string`                                             |          | Format print string (for view in read form). [Available formats](https://day.js.org/docs/en/display/format)          |
+| timeZone     | `string`                                             |          | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) |
 
 You can provide all props of [original component](https://preview.gravity-ui.com/date-components/?path=/docs/components-datepicker--docs) through [viewSpec.inputProps](./input-props-map.md).
 

package-lock.json

@@ -46,8 +46,8 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/components": "^3.0.0",
-    "@gravity-ui/date-components": "^2.4.0",
-    "@gravity-ui/date-utils": "^2.4.0",
+    "@gravity-ui/date-components": "^2.10.3",
+    "@gravity-ui/date-utils": "^2.5.5",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"

package.json

@@ -182,6 +182,7 @@ export interface StringSpec<
         dateInput?: {
             outputFormat?: string;
             printFormat?: string;
+            timeZone?: string;
         };
         copy?: boolean;
         selectParams?: {

src/lib/core/types/specs.ts

@@ -2,12 +2,12 @@ import React, {useCallback} from 'react';
 
 import {DatePicker, DatePickerProps} from '@gravity-ui/date-components';
 import {StringInputProps} from '../../../../core';
-import {DateTime, dateTimeParse} from '@gravity-ui/date-utils';
+import {DateTime, dateTimeParse, isValidTimeZone} from '@gravity-ui/date-utils';
 import {block} from '../../../utils';
 
 import './DateInput.scss';
 
-export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
+export const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm';
 
 const b = block('date-input');
 
@@ -22,6 +22,8 @@ export const DateInput: React.FC<StringInputProps<DateProps>> = ({
 }) => {
     const {value, onChange, onBlur, onFocus} = input;
     const dateInput = spec.viewSpec.dateInput;
+    const timeZone =
+        dateInput?.timeZone && isValidTimeZone(dateInput.timeZone) ? dateInput.timeZone : undefined;
     const outputFormat = dateInput?.outputFormat;
 
     const onUpdate = useCallback(
@@ -63,11 +65,15 @@ export const DateInput: React.FC<StringInputProps<DateProps>> = ({
         onBlur: onBlur as (e: React.FocusEvent<HTMLElement>) => void,
         onFocus: onFocus as (e: React.FocusEvent<HTMLElement>) => void,
         value: value
-            ? dateTimeParse((value as any).seconds ? (value as any).seconds * 1000 : value) || null
+            ? dateTimeParse((value as any).seconds ? (value as any).seconds * 1000 : value, {
+                  format: dateInput?.outputFormat,
+                  timeZone,
+              }) || null
             : null,
         onUpdate,
         disabled: spec.viewSpec.disabled,
         placeholder: spec.viewSpec.placeholder,
+        timeZone,
     };
 
     return <DatePicker className={b()} data-qa={name} {...props} />;

src/lib/kit/components/Inputs/DateInput/DateInput.tsx

@@ -1,29 +1,34 @@
 import React from 'react';
 
-import {StringSpec, StringViewProps} from '../../../../core';
+import {StringViewProps} from '../../../../core';
 import {BaseView, DEFAULT_DATE_FORMAT} from '../../../components';
 import {dateTimeParse} from '@gravity-ui/date-utils';
 import isObject from 'lodash/isObject';
-import {DatePickerProps} from '@gravity-ui/date-components/dist/esm/components/DatePicker/DatePicker';
 
 interface Timestamp {
     seconds: string;
     nanos?: number;
 }
 
 export const DateView: React.FC<StringViewProps> = ({value, spec, ...restProps}) => {
-    let formatedValue =
-        value && isObject(value) && (value as object as Timestamp).seconds
-            ? (value as any)?.seconds * 1000
-            : value;
+    const {
+        printFormat = DEFAULT_DATE_FORMAT,
+        outputFormat,
+        timeZone,
+    } = spec.viewSpec.dateInput || {};
 
-    const localSpec = (spec as StringSpec<any, DatePickerProps | undefined>)!.viewSpec;
+    let formatedValue: string | number | undefined = value;
 
-    const format =
-        localSpec.inputProps?.format || localSpec.dateInput?.printFormat || DEFAULT_DATE_FORMAT;
+    if (isObject(value) && (value as Timestamp).seconds) {
+        formatedValue = Number((value as unknown as Timestamp).seconds) * 1000;
+    }
+
+    if (formatedValue) {
+        const date = dateTimeParse(formatedValue, {format: outputFormat, timeZone});
 
-    if (formatedValue && format) {
-        formatedValue = dateTimeParse(formatedValue)?.format(format) || formatedValue;
+        if (date) {
+            formatedValue = date.format(printFormat);
+        }
     }
 
     return <BaseView spec={spec} value={String(formatedValue)} {...restProps} />;

src/lib/kit/components/Views/DateView/DateView.tsx

@@ -549,6 +549,10 @@ const dateInput: ObjectSpec = {
             type: SpecTypes.String,
             viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Print format'},
         },
+        timeZone: {
+            type: SpecTypes.String,
+            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Time zone'},
+        },
     },
     viewSpec: {
         type: 'base',