@alfalab/core-components-date-time-input 1.1.0

package/modern/Component.d.ts

@@ -0,0 +1,184 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType<CalendarProps>;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+};
+declare const DateTimeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ComponentClass<CalendarProps, any> | React.FunctionComponent<CalendarProps> | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        hasHeader?: boolean | undefined;
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: "right" | "left" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: number | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { DateTimeInputProps, DateTimeInput };

package/modern/Component.js

@@ -0,0 +1,128 @@
+import React, { useRef, useState, useEffect } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { useMedia } from '@alfalab/hooks';
+import { Input } from '@alfalab/core-components-input/modern';
+import { Calendar, CalendarMobile, dateInLimits } from '@alfalab/core-components-calendar/modern';
+import { Popover } from '@alfalab/core-components-popover/modern';
+import { IconButton } from '@alfalab/core-components-icon-button/modern';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import 'date-fns/isValid';
+import { getDateWithoutTime, setTimeToDate, DATE_MASK, format, getFullDateTime, isCompleteDateInput, isValid, parseTimestampToDate } from './utils/format.js';
+
+var styles = {"component":"date-time-input__component_m484y","calendarContainer":"date-time-input__calendarContainer_m484y","calendarResponsive":"date-time-input__calendarResponsive_m484y","block":"date-time-input__block_m484y"};
+require('./index.css')
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+const DateTimeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, error, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop');
+    const inputRef = useRef(null);
+    const calendarRef = useRef(null);
+    const [value, setValue] = useState(propValue || defaultValue);
+    const [open, setOpen] = useState(false);
+    const calendarValue = value ? getDateWithoutTime(value).getTime() : undefined;
+    const inputDisabled = disabled || readOnly;
+    const CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
+    const calendarResponsive = calendarProps?.responsive ?? true;
+    useEffect(() => {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    const checkInputValueIsValid = (newInputValue) => {
+        if (!newInputValue || error)
+            return false;
+        const dateValue = getDateWithoutTime(newInputValue).getTime();
+        return (dateValue &&
+            dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    };
+    const handleInputWrapperFocus = (event) => {
+        if (view === 'desktop') {
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    const handleBlur = (event) => {
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+                setValue(prevValue => setTimeToDate(prevValue));
+            }
+        }
+    };
+    const handleChange = (event) => {
+        const { value: newValue } = event.target;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
+        if (/[^\d., :\d.]/.test(newValue)) {
+            return;
+        }
+        const dots = newValue.match(/\./g);
+        const colon = newValue.match(/\:/g);
+        const comma = newValue.match(/\,/g);
+        // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
+        if ((dots && dots.length > 2) ||
+            (colon && colon.length > 1) ||
+            (comma && comma.length > 1)) {
+            return;
+        }
+        const formattedValue = format(newValue);
+        const date = getFullDateTime(formattedValue);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { date, value: formattedValue });
+        if (isCompleteDateInput(formattedValue)) {
+            const valid = isValid(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { date, value: formattedValue });
+            }
+        }
+    };
+    const handleCalendarClose = () => {
+        setOpen(false);
+    };
+    const handleClear = () => {
+        setValue('');
+    };
+    const handleCalendarChange = (date) => {
+        if (date) {
+            setValue(parseTimestampToDate(date));
+        }
+    };
+    const handleCalendarWrapperMouseDown = (event) => {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    const handleInputWrapperClick = () => {
+        if (view === 'desktop' && !open) {
+            setOpen(true);
+        }
+    };
+    const handleIconButtonClick = () => {
+        if (!open)
+            setOpen(true);
+    };
+    const renderCalendar = () => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React.createElement(CalendarComponent, Object.assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))));
+    return (React.createElement("div", { className: cn(styles.component, className, {
+            [styles.block]: block,
+        }), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        React.createElement(Input, Object.assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
+        picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
+                [styles.calendarResponsive]: calendarResponsive,
+            }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+export { DateTimeInput };

package/modern/index.css

@@ -0,0 +1,64 @@
+/* hash: z39zw */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+}
+.date-time-input__component_m484y {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.date-time-input__calendarContainer_m484y {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius)
+}
+@media (max-width: 374px) {
+.date-time-input__calendarContainer_m484y {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.date-time-input__calendarResponsive_m484y {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.date-time-input__block_m484y {
+    width: 100%;
+}

package/modern/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/index.js

@@ -0,0 +1,13 @@
+import 'react';
+import 'classnames';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+import '@alfalab/core-components-input/modern';
+import '@alfalab/core-components-calendar/modern';
+import '@alfalab/core-components-popover/modern';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import 'date-fns/isValid';
+import './utils/format.js';
+export { DateTimeInput } from './Component.js';

package/modern/utils/format.d.ts

@@ -0,0 +1,12 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValid: (inputValue: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+declare const getDateWithoutTime: (value: string) => Date;
+declare const getFullDateTime: (value: string) => Date;
+declare const setTimeToDate: (value: string) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValidTimeFormat, isValid, format, parseTimestampToDate, getDateWithoutTime, getFullDateTime, setTimeToDate };

package/modern/utils/format.js

@@ -0,0 +1,123 @@
+import parse from 'date-fns/parse';
+import dateFnsIsValid from 'date-fns/isValid';
+
+/* eslint-disable no-useless-escape */
+const DATE_FORMAT = 'dd.MM.yyyy';
+const DATE_MASK = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ',',
+    ' ',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+];
+const isCompleteDateInput = (input) => input.length === DATE_MASK.length;
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+const isValidTimeFormat = (value) => {
+    const timeArr = value.split(':');
+    const hours = timeArr[0];
+    const mins = timeArr[1];
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+    return true;
+};
+const isValid = (inputValue) => {
+    const inputValueArr = inputValue.split(', ');
+    const date = inputValueArr[0];
+    const time = inputValueArr[1];
+    return (!inputValue ||
+        (isCompleteDateInput(inputValue) &&
+            dateFnsIsValid(parseDateString(date)) &&
+            isValidTimeFormat(time)));
+};
+const format = (value) => value
+    .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+    .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+    .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+    .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+    .replace(/\.$/, '') // 12. => 12
+    .replace(/\ $/, '') // 1 2 => 12
+    .replace(/\:$/, '') // 1:2 => 12
+    .replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
+    .replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
+    .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+    .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+    .replace(/^(\d\d.\d\d\.\d\d\d\d),/, '$1') // 12.12.2005 => 12.12.2005
+    .replace(/^(\d\d.\d\d\.\d\d\d\d)(\d)/, '$1, $2') // 12.12.20050 => 12.12.2005, 0
+    .replace(/^(\d\d.\d\d\.\d\d\d\d),(\d.*)/, '$1, $2') // 12.12.2005,00:00 => 12.12.2005, 00:00
+    .replace(/^(\d\d.\d\d\.\d\d\d\d) (\d.*)/, '$1, $2') // 12.12.2005 00:00 => 12.12.2005, 00:00
+    .replace(/^(\d\d.\d\d\.\d\d\d\d)(\d.*)/, '$1, $2') // 12.12.200500:00=> 12.12.2005, 00:00
+    .replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d):/, '$1, $2') // 12.12.2005, 00: => 12.12.2005, 00
+    .replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d)(\d)/, '$1, $2:$3'); // 12.12.2005, 000 => 12.12.2005, 00:0
+const parseTimestampToDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    if (month < 10) {
+        month = `0${month}`;
+    }
+    if (day < 10) {
+        day = `0${day}`;
+    }
+    return `${day}.${month}.${year}`;
+};
+const getDateWithoutTime = (value) => {
+    const valueArr = value.split(', ');
+    let day;
+    let month;
+    let year;
+    if (valueArr[0]) {
+        const date = valueArr[0].split('.');
+        [day, month, year] = date;
+    }
+    const date = new Date();
+    date.setFullYear(Number(year), Number(month) - 1, Number(day));
+    date.setHours(0, 0, 0, 0);
+    return date;
+};
+const getFullDateTime = (value) => {
+    const valueArr = value.split(', ');
+    let day;
+    let month;
+    let year;
+    let hours;
+    let mins;
+    if (valueArr[0]) {
+        const date = valueArr[0].split('.');
+        [day, month, year] = date;
+    }
+    if (valueArr[1]) {
+        const time = valueArr[1].split(':');
+        hours = Number(time[0]);
+        mins = Number(time[1]);
+    }
+    const fullDate = new Date();
+    fullDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    fullDate.setHours(Number(hours) || 0);
+    fullDate.setMinutes(Number(mins) || 0);
+    return fullDate;
+};
+const setTimeToDate = (value) => {
+    if (value.length === 10 && dateFnsIsValid(parseDateString(value))) {
+        return `${value}, 00:00`;
+    }
+    return value;
+};
+
+export { DATE_FORMAT, DATE_MASK, format, getDateWithoutTime, getFullDateTime, isCompleteDateInput, isValid, isValidTimeFormat, parseDateString, parseTimestampToDate, setTimeToDate };

package/modern/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/modern/utils/index.js

@@ -0,0 +1,3 @@
+import 'date-fns/parse';
+import 'date-fns/isValid';
+export { DATE_FORMAT, DATE_MASK, format, getDateWithoutTime, getFullDateTime, isCompleteDateInput, isValid, isValidTimeFormat, parseDateString, parseTimestampToDate, setTimeToDate } from './format.js';

package/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@alfalab/core-components-date-time-input",
+    "version": "1.1.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-calendar": "^6.1.4",
+        "@alfalab/core-components-input": "^10.1.0",
+        "@alfalab/core-components-icon-button": "^5.0.3",
+        "@alfalab/core-components-popover": "^6.0.1",
+        "classnames": "^2.3.1"
+    }
+}

package/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/utils/format.d.ts

@@ -0,0 +1,12 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValid: (inputValue: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+declare const getDateWithoutTime: (value: string) => Date;
+declare const getFullDateTime: (value: string) => Date;
+declare const setTimeToDate: (value: string) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValidTimeFormat, isValid, format, parseTimestampToDate, getDateWithoutTime, getFullDateTime, setTimeToDate };