fix: date picker components value parser (#243)

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} />;