feat(DateField): add hidden input for native form submissition

Author: ValeraS

src/components/DateField/DateField.tsx

@@ -30,6 +30,14 @@ export function DateField({className, ...props}: DateFieldProps) {
                 {...inputProps}
                 value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}
             />
+            <input
+                type="text"
+                hidden
+                name={props.name}
+                value={state.value ? state.value.toISOString() : ''}
+                // Ignore React warning
+                onChange={() => {}}
+            />
         </div>
     );
 }

src/components/DatePicker/DatePicker.tsx

@@ -11,6 +11,7 @@ import type {
     DateFieldBase,
     DomProps,
     FocusableProps,
+    InputDOMProps,
     KeyboardEvents,
     StyleProps,
     TextInputProps,
@@ -29,20 +30,16 @@ export interface DatePickerProps
         FocusableProps,
         KeyboardEvents,
         DomProps,
+        InputDOMProps,
         StyleProps,
         AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
 }
 
-export function DatePicker({value, defaultValue, onUpdate, className, ...props}: DatePickerProps) {
+export function DatePicker({className, ...props}: DatePickerProps) {
     const anchorRef = React.useRef<HTMLDivElement>(null);
 
-    const state = useDatePickerState({
-        ...props,
-        value,
-        defaultValue,
-        onUpdate,
-    });
+    const state = useDatePickerState(props);
 
     const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =
         useDatePickerProps(state, props);
@@ -85,6 +82,14 @@ export function DatePicker({value, defaultValue, onUpdate, className, ...props}:
                     )
                 }
             />
+            <input
+                type="text"
+                hidden
+                name={props.name}
+                value={state.value ? state.value.toISOString() : ''}
+                // Ignore React warning
+                onChange={() => {}}
+            />
         </div>
     );
 }

src/components/RelativeDateField/RelativeDateField.tsx

@@ -9,6 +9,7 @@ import type {
     AccessibilityProps,
     DomProps,
     FocusableProps,
+    InputDOMProps,
     KeyboardEvents,
     StyleProps,
     TextInputExtendProps,
@@ -28,6 +29,7 @@ export interface RelativeDateFieldProps
         TextInputProps,
         TextInputExtendProps,
         DomProps,
+        InputDOMProps,
         StyleProps,
         AccessibilityProps,
         FocusableProps,
@@ -74,6 +76,14 @@ export function RelativeDateField(props: RelativeDateFieldProps) {
                 }}
                 onBlur={props.onBlur}
             />
+            <input
+                type="text"
+                hidden
+                name={props.name}
+                value={state.value ?? ''}
+                // Ignore React warning
+                onChange={() => {}}
+            />
             {!isMobile && (
                 <Popup anchorRef={anchorRef} open={isOpen}>
                     <div className={b('popup-content')}>

src/components/RelativeDatePicker/RelativeDatePicker.tsx

@@ -12,14 +12,15 @@ import type {
     AccessibilityProps,
     DomProps,
     FocusableProps,
+    InputDOMProps,
     KeyboardEvents,
     StyleProps,
     TextInputProps,
 } from '../types';
 
 import {useRelativeDatePickerProps} from './hooks/useRelativeDatePickerProps';
 import {useRelativeDatePickerState} from './hooks/useRelativeDatePickerState';
-import type {RelativeDatePickerStateOptions} from './hooks/useRelativeDatePickerState';
+import type {RelativeDatePickerStateOptions, Value} from './hooks/useRelativeDatePickerState';
 
 import './RelativeDatePicker.scss';
 
@@ -31,6 +32,7 @@ export interface RelativeDatePickerProps
         FocusableProps,
         KeyboardEvents,
         DomProps,
+        InputDOMProps,
         StyleProps,
         AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
@@ -69,6 +71,12 @@ export function RelativeDatePicker(props: RelativeDatePickerProps) {
             )}
             <TextInput
                 {...fieldProps}
+                controlProps={{
+                    ...fieldProps.controlProps,
+                    disabled: isMobile && state.mode === 'absolute',
+                    className: b('input', {mobile: isMobile && state.mode === 'absolute'}),
+                }}
+                hasClear={props.hasClear && !(isMobile && state.mode === 'absolute')}
                 startContent={
                     <Button {...modeSwitcherProps}>
                         <Icon data={FunctionIcon} />
@@ -90,6 +98,14 @@ export function RelativeDatePicker(props: RelativeDatePickerProps) {
                     </React.Fragment>
                 }
             />
+            <input
+                type="text"
+                hidden
+                name={props.name}
+                value={getNativeValue(state.value)}
+                // Ignore React warning
+                onChange={() => {}}
+            />
             {!isMobile && (
                 <Popup {...popupProps} anchorRef={anchorRef}>
                     <div className={b('popup-content')}>
@@ -109,3 +125,13 @@ export function RelativeDatePicker(props: RelativeDatePickerProps) {
         </div>
     );
 }
+
+function getNativeValue(value: Value | null) {
+    if (!value) {
+        return '';
+    }
+    if (value.type === 'relative') {
+        return value.value;
+    }
+    return value.value.toISOString();
+}

src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts

@@ -6,6 +6,7 @@ import type {ButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';
 import type {Calendar, CalendarInstance} from '../../Calendar';
 import {useDateFieldProps} from '../../DateField';
 import type {DateFieldProps} from '../../DateField';
+import {useRelativeDateFieldProps} from '../../RelativeDateField';
 import {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';
 import {mergeProps} from '../../utils/mergeProps';
 import type {RelativeDatePickerProps} from '../RelativeDatePicker';
@@ -96,14 +97,12 @@ export function useRelativeDatePickerProps(
         onUpdate: undefined,
     });
 
-    const relativeDateProps: TextInputProps = {
-        disabled: relativeDateState.disabled,
-        value: relativeDateState.text,
-        onUpdate: relativeDateState.setText,
-        hasClear: props.hasClear && !relativeDateState.readOnly,
-        placeholder: props.placeholder,
-        size: props.size,
-    };
+    const {inputProps: relativeDateProps} = useRelativeDateFieldProps(relativeDateState, {
+        ...props,
+        value: undefined,
+        defaultValue: undefined,
+        onUpdate: undefined,
+    });
 
     let validationState = props.validationState;
     if (!validationState) {
@@ -163,7 +162,7 @@ export function useRelativeDatePickerProps(
             size: getButtonSizeForInput(props.size),
             disabled: state.readOnly || state.disabled,
             view: 'flat-secondary',
-            style: {zIndex: 2},
+            style: {zIndex: 2, marginInlineEnd: 2},
             selected: mode === 'relative',
             extraProps: {
                 'aria-label': i18n('Formula input mode'),

src/components/types/inputs.ts

@@ -35,6 +35,12 @@ export interface DomProps {
     id?: string;
 }
 
+export interface InputDOMProps {
+    /**
+     * The name of the input element, used when submitting an HTML form.
+     */
+    name?: string;
+}
 export interface InputBase {
     /**
      * Whether the field is disabled.