@gravity-ui/date-components 1.0.0

package/dist/cjs/components/DateField/types.d.ts

@@ -0,0 +1,67 @@
+export type DateFieldSectionType = Exclude<Intl.DateTimeFormatPartTypes, 'era'>;
+export type DateFormatTokenMap = {
+    [formatToken: string]: DateFieldSectionType | {
+        sectionType: DateFieldSectionType;
+        contentType: 'digit' | 'letter';
+    };
+};
+export interface DateFieldSection {
+    value: number | undefined;
+    /**
+     * Value of the section, as rendered inside the input.
+     * For example, in the date `May 25, 1995`, the value of the month section is "May".
+     */
+    textValue: string;
+    /**
+     * Format token used to parse the value of this section from the date object.
+     * For example, in the format `MMMM D, YYYY`, the format of the month section is "MMMM".
+     */
+    format: string;
+    /**
+     * Placeholder rendered when the value of this section is empty.
+     */
+    placeholder: string;
+    /**
+     * Type of the section.
+     */
+    type: DateFieldSectionType;
+    /**
+     * Type of content of the section.
+     * Will determine if we should apply a digit-based editing or a letter-based editing.
+     */
+    contentType: 'digit' | 'letter';
+    /**
+     * Available values
+     */
+    options?: string[];
+    /** The minimum numeric value for the segment, if applicable. */
+    minValue?: number;
+    /** The maximum numeric value for the segment, if applicable. */
+    maxValue?: number;
+    /**
+     * If `true`, the value of this section is supposed to have leading zeroes.
+     * For example, the value `1` should be rendered as "01" instead of "1".
+     */
+    hasLeadingZeros: boolean;
+    /**
+     * If `true`, the section value has been modified since the last time the sections were generated from a valid date.
+     * When we can generate a valid date from the section, we don't directly pass it to `onChange`,
+     * Otherwise, we would lose all the information contained in the original date, things like:
+     * - time if the format does not contain it
+     * - timezone / UTC
+     *
+     * To avoid losing that information, we transfer the values of the modified sections from the newly generated date to the original date.
+     */
+    modified: boolean;
+    /**
+     * Start index of the section in the format
+     */
+    start: number;
+    /**
+     * End index of the section in the format
+     */
+    end: number;
+    previousEditableSection: number;
+    nextEditableSection: number;
+}
+export type DateFieldSectionWithoutPosition<TSection extends DateFieldSection = DateFieldSection> = Omit<TSection, 'start' | 'end' | 'value' | 'textValue' | 'modified' | 'previousEditableSection' | 'nextEditableSection'>;

package/dist/cjs/components/DateField/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/DateField/utils.d.ts

@@ -0,0 +1,14 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldSectionWithoutPosition } from './types';
+export declare const isMac: boolean;
+export declare const CtrlCmd: string;
+export declare function expandFormat(format: string): string;
+export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
+interface PlaceholderValueOptions {
+    placeholderValue?: DateTime;
+    timeZone?: string;
+}
+export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
+export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
+export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export {};

package/dist/cjs/components/DateField/utils.js

@@ -0,0 +1,276 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeDateTime = exports.isInvalid = exports.createPlaceholderValue = exports.splitFormatIntoSections = exports.expandFormat = exports.CtrlCmd = exports.isMac = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const i18n_1 = require("./i18n");
+exports.isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0;
+exports.CtrlCmd = exports.isMac ? 'metaKey' : 'ctrlKey';
+function expandFormat(format) {
+    const localeFormats = date_utils_1.settings.getLocaleData().formats;
+    const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
+    return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, escapeSequence, localizedFormat) => {
+        const LongLocalizedFormat = localizedFormat && localizedFormat.toUpperCase();
+        return (escapeSequence ||
+            localeFormats[localizedFormat] ||
+            getShortLocalizedFormatFromLongLocalizedFormat(localeFormats[LongLocalizedFormat]));
+    });
+}
+exports.expandFormat = expandFormat;
+const escapedCharacters = { start: '[', end: ']' };
+const formatTokenMap = {
+    // Year
+    YY: 'year',
+    YYYY: 'year',
+    // Month
+    M: 'month',
+    MM: 'month',
+    MMM: { sectionType: 'month', contentType: 'letter' },
+    MMMM: { sectionType: 'month', contentType: 'letter' },
+    // Day of the month
+    D: 'day',
+    DD: 'day',
+    Do: 'day',
+    // Day of the week
+    d: 'weekday',
+    dd: { sectionType: 'weekday', contentType: 'letter' },
+    ddd: { sectionType: 'weekday', contentType: 'letter' },
+    dddd: { sectionType: 'weekday', contentType: 'letter' },
+    // Day period AM, PM
+    A: { sectionType: 'dayPeriod', contentType: 'letter' },
+    a: { sectionType: 'dayPeriod', contentType: 'letter' },
+    // Hours
+    H: 'hour',
+    HH: 'hour',
+    h: 'hour',
+    hh: 'hour',
+    // Minutes
+    m: 'minute',
+    mm: 'minute',
+    // Seconds
+    s: 'second',
+    ss: 'second',
+    // Timezone
+    z: { sectionType: 'timeZoneName', contentType: 'letter' },
+    zzz: { sectionType: 'timeZoneName', contentType: 'letter' },
+    Z: { sectionType: 'timeZoneName', contentType: 'letter' },
+    ZZ: { sectionType: 'timeZoneName', contentType: 'letter' },
+};
+function getDateSectionConfigFromFormatToken(formatToken) {
+    const config = formatTokenMap[formatToken];
+    if (!config) {
+        console.error([
+            `The token "${formatToken}" is not supported by the Date field.`,
+            'Please try using another token.',
+        ].join('\n'));
+        return {
+            type: 'literal',
+            contentType: 'letter',
+        };
+    }
+    if (typeof config === 'string') {
+        return {
+            type: config,
+            contentType: 'digit',
+        };
+    }
+    return {
+        type: config.sectionType,
+        contentType: config.contentType,
+    };
+}
+function isFourDigitYearFormat(format) {
+    return (0, date_utils_1.dateTime)().format(format).length === 4;
+}
+function doesSectionHaveLeadingZeros(contentType, sectionType, format) {
+    if (contentType !== 'digit') {
+        return false;
+    }
+    switch (sectionType) {
+        case 'year': {
+            if (isFourDigitYearFormat(format)) {
+                const formatted0001 = (0, date_utils_1.dateTime)().set('year', 1).format(format);
+                return formatted0001 === '0001';
+            }
+            const formatted2001 = (0, date_utils_1.dateTime)().set('year', 2001).format(format);
+            return formatted2001 === '01';
+        }
+        case 'month': {
+            return (0, date_utils_1.dateTime)().startOf('year').format(format).length > 1;
+        }
+        case 'day': {
+            return (0, date_utils_1.dateTime)().startOf('month').format(format).length > 1;
+        }
+        case 'weekday': {
+            return (0, date_utils_1.dateTime)().startOf('week').format(format).length > 1;
+        }
+        case 'hour': {
+            return (0, date_utils_1.dateTime)().set('hour', 1).format(format).length > 1;
+        }
+        case 'minute': {
+            return (0, date_utils_1.dateTime)().set('minute', 1).format(format).length > 1;
+        }
+        case 'second': {
+            return (0, date_utils_1.dateTime)().set('second', 1).format(format).length > 1;
+        }
+        default: {
+            throw new Error('Invalid section type');
+        }
+    }
+}
+function getSectionPlaceholder(sectionConfig, currentTokenValue) {
+    switch (sectionConfig.type) {
+        case 'year': {
+            return (0, i18n_1.i18n)('year_placeholder').repeat((0, date_utils_1.dateTime)().format(currentTokenValue).length);
+        }
+        case 'month': {
+            return (0, i18n_1.i18n)('month_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+        }
+        case 'day': {
+            return (0, i18n_1.i18n)('day_placeholder').repeat(2);
+        }
+        case 'weekday': {
+            return (0, i18n_1.i18n)('weekday_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+        }
+        case 'hour': {
+            return (0, i18n_1.i18n)('hour_placeholder').repeat(2);
+        }
+        case 'minute': {
+            return (0, i18n_1.i18n)('minute_placeholder').repeat(2);
+        }
+        case 'second': {
+            return (0, i18n_1.i18n)('second_placeholder').repeat(2);
+        }
+        case 'dayPeriod': {
+            return (0, i18n_1.i18n)('dayPeriod_placeholder');
+        }
+        default: {
+            return currentTokenValue;
+        }
+    }
+}
+function splitFormatIntoSections(format) {
+    const sections = [];
+    const expandedFormat = expandFormat(format);
+    let currentTokenValue = '';
+    let isSeparator = false;
+    let isInEscapeBoundary = false;
+    for (let i = 0; i < expandedFormat.length; i++) {
+        const char = expandedFormat[i];
+        if (isInEscapeBoundary) {
+            if (char === escapedCharacters.end) {
+                isInEscapeBoundary = false;
+                continue;
+            }
+            currentTokenValue += char;
+        }
+        else if (char.match(/[a-zA-Z]/)) {
+            if (isSeparator) {
+                addLiteralSection(sections, currentTokenValue);
+                currentTokenValue = '';
+            }
+            isSeparator = false;
+            currentTokenValue += char;
+        }
+        else {
+            if (!isSeparator) {
+                addFormatSection(sections, currentTokenValue);
+                currentTokenValue = '';
+            }
+            isSeparator = true;
+            if (char === escapedCharacters.start) {
+                isInEscapeBoundary = true;
+            }
+            else {
+                currentTokenValue += char;
+            }
+        }
+    }
+    if (currentTokenValue) {
+        if (isSeparator) {
+            addLiteralSection(sections, currentTokenValue);
+        }
+        else {
+            addFormatSection(sections, currentTokenValue);
+        }
+    }
+    return sections;
+}
+exports.splitFormatIntoSections = splitFormatIntoSections;
+function addFormatSection(sections, token) {
+    if (!token) {
+        return;
+    }
+    const sectionConfig = getDateSectionConfigFromFormatToken(token);
+    const hasLeadingZeros = doesSectionHaveLeadingZeros(sectionConfig.contentType, sectionConfig.type, token);
+    sections.push(Object.assign(Object.assign({}, sectionConfig), { format: token, placeholder: getSectionPlaceholder(sectionConfig, token), options: getSectionOptions(sectionConfig, token), hasLeadingZeros }));
+}
+function addLiteralSection(sections, token) {
+    if (!token) {
+        return;
+    }
+    sections.push({
+        type: 'literal',
+        contentType: 'letter',
+        format: token,
+        placeholder: token,
+        hasLeadingZeros: false,
+    });
+}
+function getSectionOptions(section, token) {
+    switch (section.type) {
+        case 'month': {
+            const format = section.contentType === 'letter' ? token : 'MMMM';
+            let date = (0, date_utils_1.dateTime)().startOf('year');
+            const options = [];
+            for (let i = 0; i < 12; i++) {
+                options.push(date.format(format).toLocaleUpperCase());
+                date = date.add(1, 'months');
+            }
+            return options;
+        }
+        case 'dayPeriod': {
+            const amDayPeriod = (0, date_utils_1.dateTime)().hour(0);
+            const pmDayPeriod = amDayPeriod.hour(12);
+            const options = [
+                amDayPeriod.format(token).toLocaleUpperCase(),
+                pmDayPeriod.format(token).toLocaleUpperCase(),
+            ];
+            return options;
+        }
+        case 'weekday': {
+            const format = section.contentType === 'letter' ? token : 'dddd';
+            let date = (0, date_utils_1.dateTime)().day(0);
+            const options = [];
+            for (let i = 0; i < 7; i++) {
+                options.push(date.format(format).toLocaleUpperCase());
+                date = date.add(1, 'day');
+            }
+            return options;
+        }
+    }
+    return undefined;
+}
+function createPlaceholderValue({ placeholderValue, timeZone }) {
+    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : (0, date_utils_1.dateTime)({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
+}
+exports.createPlaceholderValue = createPlaceholderValue;
+function isInvalid(value, minValue, maxValue) {
+    if (!value) {
+        return false;
+    }
+    if (minValue && value.isBefore(minValue)) {
+        return true;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return true;
+    }
+    return false;
+}
+exports.isInvalid = isInvalid;
+function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}
+exports.mergeDateTime = mergeDateTime;

package/dist/cjs/components/DatePicker/DatePicker.css

@@ -0,0 +1,19 @@
+.g-date-date-picker {
+  position: relative;
+  display: inline-block;
+}
+.g-date-date-picker__field {
+  width: 100%;
+}
+.g-date-date-picker__field_mobile {
+  pointer-events: none;
+}
+.g-date-date-picker__popup-content {
+  outline: none;
+}
+.g-date-date-picker__time-field {
+  width: 100%;
+}
+.g-date-date-picker__time-field-wrapper {
+  padding: 10px;
+}

package/dist/cjs/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import './DatePicker.css';
+export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+}
+export declare function DatePicker({ value, defaultValue, onUpdate, className, onFocus, onBlur, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -0,0 +1,66 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const DateField_1 = require("../DateField");
+const DesktopCalendar_1 = require("./DesktopCalendar");
+const MobileCalendar_1 = require("./MobileCalendar");
+const useDatePickerState_1 = require("./hooks/useDatePickerState");
+const utils_1 = require("./utils");
+require("./DatePicker.css");
+function DatePicker(_a) {
+    var { value, defaultValue, onUpdate, className, onFocus, onBlur } = _a, props = __rest(_a, ["value", "defaultValue", "onUpdate", "className", "onFocus", "onBlur"]);
+    const anchorRef = react_1.default.useRef(null);
+    const state = (0, useDatePickerState_1.useDatePickerState)(Object.assign(Object.assign({}, props), { value,
+        defaultValue,
+        onUpdate }));
+    const [isMobile] = (0, uikit_1.useMobile)();
+    const [isActive, setActive] = react_1.default.useState(false);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        onFocusWithin: onFocus,
+        onBlurWithin: onBlur,
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+        },
+    });
+    const fieldState = (0, DateField_1.useDateFieldState)({
+        value: state.value,
+        onUpdate: state.setValue,
+        disabled: state.disabled,
+        readOnly: state.readOnly,
+        validationState: props.validationState,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        format: state.format,
+        placeholderValue: props.placeholderValue,
+        timeZone: props.timeZone,
+    });
+    const { inputProps } = (0, DateField_1.useDateFieldProps)(fieldState, props);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef, className: (0, utils_1.b)(null, className), style: props.style }, focusWithinProps, { role: "group", "aria-disabled": state.disabled || undefined, onKeyDown: (e) => {
+            if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                e.preventDefault();
+                e.stopPropagation();
+                state.setOpen(true);
+            }
+        }, children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendar, { anchorRef: anchorRef, props: props, state: state })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendarButton, { props: props, state: state })) }))] })));
+}
+exports.DatePicker = DatePicker;

package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { DatePickerProps } from './DatePicker';
+import type { DatePickerState } from './hooks/useDatePickerState';
+interface DesktopCalendarProps {
+    anchorRef: React.RefObject<HTMLElement>;
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function DesktopCalendar({ anchorRef, props, state }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
+interface DesktopCalendarButtonProps {
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function DesktopCalendarButton({ props, state }: DesktopCalendarButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/components/DatePicker/DesktopCalendar.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopCalendarButton = exports.DesktopCalendar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const Calendar_1 = require("../Calendar");
+const DateField_1 = require("../DateField");
+const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
+const i18n_1 = require("./i18n");
+const utils_1 = require("./utils");
+function DesktopCalendar({ anchorRef, props, state }) {
+    var _a;
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        isDisabled: !state.isOpen,
+        onBlurWithin: () => {
+            state.setOpen(false);
+        },
+    });
+    if (!state.hasDate) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
+            state.setOpen(false);
+        }, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, focusWithinProps, { className: (0, utils_1.b)('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                , { 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: true, size: props.size === 's' ? 'm' : props.size, disabled: props.disabled, readOnly: props.readOnly, onUpdate: (d) => {
+                        state.setDateValue(d);
+                    }, defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined, value: state.dateValue, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, timeZone: props.timeZone }), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: (0, utils_1.b)('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
+}
+exports.DesktopCalendar = DesktopCalendar;
+function DesktopCalendarButton({ props, state }) {
+    const wasOpenBeforeClickRef = react_1.default.useRef(false);
+    if (!state.hasDate) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
+            'aria-label': (0, i18n_1.i18n)('Calendar'),
+            'aria-haspopup': 'dialog',
+            'aria-expanded': state.isOpen,
+        }, onFocus: () => {
+            wasOpenBeforeClickRef.current = state.isOpen;
+        }, onClick: () => {
+            if (!wasOpenBeforeClickRef.current) {
+                state.setOpen(true);
+            }
+            wasOpenBeforeClickRef.current = false;
+        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }));
+}
+exports.DesktopCalendarButton = DesktopCalendarButton;

package/dist/cjs/components/DatePicker/MobileCalendar.css

@@ -0,0 +1,49 @@
+.g-date-mobile-calendar {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+.g-date-mobile-calendar_size_xs {
+  width: 20px;
+  height: 20px;
+}
+.g-date-mobile-calendar_size_m {
+  width: 28px;
+  height: 28px;
+}
+.g-date-mobile-calendar_size_l {
+  width: 36px;
+  height: 36px;
+}
+.g-date-mobile-calendar__button {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.g-date-mobile-calendar__input {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+  border: none;
+}
+.g-date-mobile-calendar__input::-webkit-calendar-picker-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}

package/dist/cjs/components/DatePicker/MobileCalendar.d.ts

@@ -0,0 +1,14 @@
+import type { DatePickerProps } from './DatePicker';
+import type { DatePickerState } from './hooks/useDatePickerState';
+import './MobileCalendar.css';
+interface MobileCalendarProps {
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function MobileCalendar({ props, state }: MobileCalendarProps): import("react/jsx-runtime").JSX.Element;
+interface MobileCalendarIconProps {
+    props: DatePickerProps;
+    state: DatePickerState;
+}
+export declare function MobileCalendarIcon({ props }: MobileCalendarIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/DatePicker/MobileCalendar.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileCalendarIcon = exports.MobileCalendar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_utils_1 = require("@gravity-ui/date-utils");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const utils_1 = require("../DateField/utils");
+const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
+require("./MobileCalendar.css");
+const b = (0, cn_1.block)('mobile-calendar');
+function MobileCalendar({ props, state }) {
+    let type = 'date';
+    if (state.hasTime && state.hasDate) {
+        type = 'datetime-local';
+    }
+    else if (state.hasTime) {
+        type = 'time';
+    }
+    return ((0, jsx_runtime_1.jsx)("input", { className: b('input'), disabled: props.disabled, type: type, value: formatNative(state.value || props.placeholderValue, type), id: props.id, min: formatNative(props.minValue, type), max: formatNative(props.maxValue, type), tabIndex: -1, onChange: (e) => {
+            if (props.readOnly) {
+                return;
+            }
+            const newValue = e.target.value;
+            if (newValue) {
+                const localDate = (0, date_utils_1.dateTime)({ input: newValue, format: getDateFormat(type) });
+                let newDate = state.hasDate
+                    ? (0, date_utils_1.dateTime)({
+                        input: newValue,
+                        format: getDateFormat(type),
+                        timeZone: props.timeZone,
+                    })
+                    : (0, utils_1.createPlaceholderValue)({
+                        placeholderValue: props.placeholderValue,
+                        timeZone: props.timeZone,
+                    });
+                if (state.hasTime) {
+                    newDate = (0, utils_1.mergeDateTime)(newDate, localDate);
+                }
+                else if (state.dateValue) {
+                    newDate = (0, utils_1.mergeDateTime)(newDate, state.dateValue);
+                }
+                else {
+                    newDate = newDate.set('hours', 0).set('minutes', 0).set('seconds', 0);
+                }
+                state.setValue(newDate);
+            }
+            else {
+                state.setValue(null);
+            }
+        } }));
+}
+exports.MobileCalendar = MobileCalendar;
+function MobileCalendarIcon({ props }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: b({ size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size) }), children: (0, jsx_runtime_1.jsx)("span", { className: b('button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }));
+}
+exports.MobileCalendarIcon = MobileCalendarIcon;
+function getDateFormat(type) {
+    switch (type) {
+        case 'time': {
+            return 'HH:mm';
+        }
+        case 'datetime-local': {
+            return 'YYYY-MM-DDTHH:mm';
+        }
+        default: {
+            return 'YYYY-MM-DD';
+        }
+    }
+}
+function formatNative(date, type) {
+    if (!date) {
+        return '';
+    }
+    const format = getDateFormat(type);
+    return date.format(format);
+}