@os-design/core 1.0.280 → 1.0.282

package/src/DatePicker/index.tsx

@@ -1,569 +1,658 @@
-import styled from '@emotion/styled';
-import {
-  type DatePickerLocale,
-  defaultLocale,
-  getAccessibilityDateLabel,
-  useFormattedValue,
-  isSameDay,
-} from '@os-design/date-picker-utils';
-import { Down, Up } from '@os-design/icons';
 import { useIsMinWidth } from '@os-design/media';
-import type { WithSize } from '@os-design/styles';
-import { ThemeOverrider } from '@os-design/theming';
 import {
+  enableScrollingStyles,
+  resetFocusStyles,
+  type WithSize,
+} from '@os-design/styles';
+import {
+  omitEmotionProps,
   useForwardedRef,
   useForwardedState,
-  useKeyPress,
 } from '@os-design/utils';
-import React, {
+import {
   forwardRef,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type FocusEvent,
+  type ForwardedRef,
+  type MouseEvent,
 } from 'react';
-import Button from '../Button/index.js';
 import Modal from '../Modal/index.js';
+import { type DateCalendarLocale } from '../DateCalendar/locale.js';
+import type { Day, Month } from '../DateCalendar/utils/calendarDays.js';
+import InputDateUnstyled, {
+  convertTo12hours,
+  nextToken,
+  replaceSubstring,
+  tokens,
+  type OnDayError,
+  type Time,
+  type Token,
+} from '../InputDateUnstyled/index.js';
+import DateCalendar from '../DateCalendar/index.js';
+import TimeGrid from '../TimeGrid/index.js';
+import styled from '@emotion/styled';
 import Popover from '../Popover/index.js';
-import {
-  ClearIcon,
-  Placeholder,
-  SelectContainer,
-  Title,
-  ToggleContent,
-  ToggleIconContainer,
-  ToggleLeftAddon,
-  ToggleRightAddon,
-} from '../Select/index.js';
-import TimePicker from '../TimePicker/index.js';
-import DatePickerCalendar from './DatePickerCalendar.js';
+import Button from '../Button/index.js';
+import { Calendar } from '@os-design/icons';
+import { InputContainer, TimeGridSkeleton } from '../index.js';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { css } from '@emotion/react';
+import createTimes from './utils/createTimes.js';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 type JsxDivProps = Omit<
   JSX.IntrinsicElements['div'],
   'value' | 'defaultValue' | 'onChange' | 'ref'
 >;
-interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
+export interface DatePickerProps extends JsxDivProps, WithSize {
   /**
-   * The component located on the left side.
-   * @default undefined
-   */
-  left?: React.ReactNode;
-  /**
-   * Adds padding to the left component.
-   * It can be useful when passing an icon or text in the left component.
-   * @default false
+   * The string format. Supported tokens:
+   * `DD` - The day of the month (01-31).
+   * `MM` - The month (01-12).
+   * `YYYY` - Four-digit year (2025).
+   * `YY` - Two-digit year (25).
+   * `hh` - The hour, 12-hour clock (01-12).
+   * `HH` - The hour, 24-hour clock (00-23).
+   * `mm` - The minute (00-59).
+   * `aa` - The meridiem (am, pm).
+   * @default `DD.MM.YYYY`
    */
-  leftHasPadding?: boolean;
+  format?: string;
   /**
-   * The component located on the right side.
-   * @default undefined
+   * First day of week (0 - Sunday).
+   * @default 0
    */
-  right?: React.ReactNode;
+  firstDayOfWeek?: number;
   /**
-   * Adds padding to the right component.
-   * It can be useful when passing an icon or text in the right component.
-   * @default false
+   * Times shown in the list in minutes (600 is 10:00).
+   * @default []
    */
-  rightHasPadding?: boolean;
+  times?: Time[];
   /**
-   * The placeholder of the date picker.
-   * @default undefined
+   * Number of columns where the times are shown.
+   * @default 3
    */
-  placeholder?: string;
+  timeColumns?: number;
   /**
    * Whether the date picker is disabled.
    * @default false
    */
   disabled?: boolean;
   /**
-   * Whether the component have a focus.
-   * @default false
+   * What days are not allowed to choose in the selected month.
+   * @default undefined
    */
-  autoFocus?: boolean;
+  disabledDays?: (month: Month) => number[] | Promise<number[]>;
   /**
-   * Whether the component opens the popup calendar.
-   * @default false
+   * What times are not allowed to choose in the selected day.
+   * @default undefined
    */
-  autoOpen?: boolean;
+  disabledTimes?: (day: Day) => Time[] | Promise<Time[]>;
   /**
-   * The format of the date.
+   * The locale.
    * @default undefined
    */
-  format?: (value: T) => string;
+  locale?: DateCalendarLocale;
   /**
-   * The first day of the week.
-   * @default sunday
+   * Whether to show the calendar and time picker.
+   * When autoOpen is false, there is a button on the right side. When
+   * the user clicks on it, the calendar/time picker is shown. This button
+   * is hidden when autoOpen is true on the wide screens.
+   * @default false
    */
-  firstDayOfWeek?: 'monday' | 'saturday' | 'sunday';
+  showPicker?: boolean;
   /**
-   * The locale of the date picker.
-   * @default undefined
+   * Whether the calendar and time picker is opened automatically.
+   * @default false
    */
-  locale?: DatePickerLocale;
+  autoOpen?: boolean;
   /**
-   * Whether the time is shown.
-   * @default false
+   * The ref of the input container.
+   * @default undefined
    */
-  showTime?: boolean;
+  containerRef?: ForwardedRef<HTMLDivElement>;
   /**
-   * The time notation.
-   * @default 12-hour
+   * The props of the input container.
+   * @default undefined
    */
-  timeNotation?: '12-hour' | '24-hour';
+  containerProps?: JSX.IntrinsicElements['div'];
   /**
-   * Selected date.
+   * The selected date.
    * @default undefined
    */
-  value?: T | null;
+  value?: Date | null;
   /**
    * The default value.
    * @default undefined
    */
-  defaultValue?: T | null;
+  defaultValue?: Date | null;
   /**
    * The change event handler.
    * @default undefined
    */
-  onChange?: (value: T | null) => void;
+  onChange?: (value: Date | null) => void;
   /**
-   * The event handler that is called whenever a popup closes.
+   * The callback called when the day is changed.
    * @default undefined
    */
-  onClose?: () => void;
-}
-export interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {
+  onDayChange?: (value: Day) => void;
   /**
-   * Whether the value is a range.
-   * @default false
+   * The callback called when the time is changed.
+   * @default undefined
    */
-  range?: false;
-}
-export interface DateRangePickerProps
-  extends BaseDatePickerProps<[Date, Date]> {
+  onTimeChange?: (value: Time) => void;
   /**
-   * Whether the value is a range.
-   * @default false
+   * The error handler called when the day has been entered incorrectly.
+   * @default undefined
    */
-  range: true;
+  onDayError?: OnDayError;
+  /**
+   * The callback called when the caret has been moved to the end.
+   * @default undefined
+   */
+  onEnd?: () => void;
 }
-export type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;
 
-const StyledPopover = styled(Popover)`
-  padding: ${(p) => p.theme.datePickerPadding}em;
+type PickerType = 'date' | 'time';
+
+const dateTokens = ['DD', 'MM', 'YYYY', 'YY'] as const;
+const timeTokens = ['hh', 'HH', 'mm', 'aa'] as const;
+
+type DateToken = (typeof dateTokens)[number];
+type TimeToken = (typeof timeTokens)[number];
+
+type TokenGetterMap = {
+  [P in Token]: (
+    value: P extends DateToken ? Day : P extends TimeToken ? Time : unknown
+  ) => string;
+};
+
+const tokenGetterMap: TokenGetterMap = {
+  DD: ({ day }) => day.toString().padStart(2, '0'),
+  MM: ({ month }) => (month + 1).toString().padStart(2, '0'),
+  YYYY: ({ year }) => year.toString(),
+  YY: ({ year }) => year.toString().slice(2, 4),
+  hh: ({ hour }) => {
+    const [h] = convertTo12hours(hour);
+    return h.toString().padStart(2, '0');
+  },
+  HH: ({ hour }) => hour.toString().padStart(2, '0'),
+  mm: ({ minute }) => minute.toString().padStart(2, '0'),
+  aa: ({ hour }) => {
+    const [, meridiem] = convertTo12hours(hour);
+    return meridiem;
+  },
+};
+
+const getPickerType = (token: Token) => {
+  if (dateTokens.includes(token as any)) {
+    return 'date';
+  }
+  if (timeTokens.includes(token as any)) {
+    return 'time';
+  }
+  return null;
+};
+
+const getNextTokenDiffType = (startPos: number, format: string) => {
+  const current = nextToken(startPos, format, tokens);
+  if (!current) return null;
+
+  const currentType = getPickerType(current.token);
+  let pos = current.end;
+
+  while (pos < format.length) {
+    const next = nextToken(pos, format, tokens);
+    if (!next) return null;
+    const nextType = getPickerType(next.token);
+    if (nextType !== currentType) return next;
+    pos = next.end;
+  }
+
+  return null;
+};
+
+const preventDefault = (e: MouseEvent) => e.preventDefault();
+
+const notHasRightStyles = (p) =>
+  !p.hasRight &&
+  css`
+    padding-right: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+const hideSpinButton = css`
+  /* Chrome, Safari, Edge, Opera */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  appearance: textfield;
 `;
 
-const TimeContainer = styled.div`
+interface StyledInputDateUnstyledProps {
+  hasRight?: boolean;
+}
+const StyledInputDateUnstyled = styled(
+  InputDateUnstyled,
+  omitEmotionProps('hasRight')
+)<StyledInputDateUnstyledProps>`
+  ${resetFocusStyles};
+  border: none;
+  font-size: 1em;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+
+  color: ${(p) => clr(p.theme.inputColorText)};
+  background-color: transparent;
+  padding-left: ${(p) => p.theme.inputPaddingHorizontal}em;
+
+  &::placeholder {
+    color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+  }
+
+  ${hideSpinButton};
+  ${notHasRightStyles};
+`;
+
+const PickerButtonContainer = styled.div`
   display: flex;
-  justify-content: center;
-  margin-top: 0.5em;
+  align-items: center;
 `;
 
-const Dash = styled.div`
-  margin: 0 0.5em;
-  line-height: ${(p) => p.theme.baseHeight}em;
+const PADDING_EM = 0.8;
+
+const StyledPopover = styled(Popover)`
+  padding: ${PADDING_EM}em;
+  width: ${(p) => p.theme.dateCalendarCellSize * 7 + PADDING_EM * 2}em;
+  max-height: ${(p) =>
+    p.theme.baseHeight * p.theme.sizes.small +
+    0.5 +
+    p.theme.dateCalendarCellSize * 7}em;
+  ${enableScrollingStyles('y')};
 `;
 
-const StyledTimePicker = styled(TimePicker)`
-  width: 2.5em;
-  text-align: center;
+const StyledModal = styled(Modal)`
+  padding: ${PADDING_EM}em;
 `;
 
-const timePickerStyle = { style: { width: 'auto' } };
-
-const createDate = (date: Date, time?: Date | null) => {
-  const d = new Date(0);
-  d.setFullYear(date.getFullYear());
-  d.setMonth(date.getMonth());
-  d.setDate(date.getDate());
-  d.setHours(0);
-  d.setMinutes(0);
-  if (time) {
-    d.setHours(time.getHours());
-    d.setMinutes(time.getMinutes());
-  }
-  return d;
-};
+const defaultTimes = createTimes(
+  { hour: 9, minute: 0 },
+  { hour: 18, minute: 0 },
+  30
+);
+
+interface Selection {
+  start: number;
+  end: number;
+}
 
 /**
- * The component to choose a date.
+ * The component to enter or choose a date/time.
  */
-const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
   (
     {
-      left,
-      leftHasPadding = false,
-      right,
-      rightHasPadding = false,
-      placeholder,
+      format = 'DD.MM.YYYY',
+      firstDayOfWeek = 0,
+      times = defaultTimes,
+      timeColumns = 3,
       disabled = false,
-      autoFocus = false,
+      disabledDays,
+      disabledTimes: disabledTimesFn,
+      locale,
+      showPicker = false,
       autoOpen = false,
-      format,
-      firstDayOfWeek = 'sunday',
-      locale = defaultLocale,
-      showTime = false,
-      timeNotation = '12-hour',
-      range = false,
+      containerRef,
+      containerProps = {},
       value,
       defaultValue,
       onChange,
-      onClose = () => {},
+      onDayChange = () => {},
+      onTimeChange = () => {},
+      onDayError,
+      onFocus = () => {},
       onBlur = () => {},
+      onEnd = () => {},
       size,
       ...rest
     },
     ref
   ) => {
-    const [containerRef, mergedContainerRef] = useForwardedRef(ref);
-    const [opened, setOpened] = useState(autoOpen);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [forwardedValue, setForwardedValue] = useForwardedState<any>({
+    const [innerContainerRef, mergedContainerRef] =
+      useForwardedRef(containerRef);
+    const [innerInputRef, mergedInputRef] = useForwardedRef(ref);
+    const [inputValue, setInputValue] = useState<string | undefined>(undefined);
+    const [inputSelection, setInputSelection] = useState<Selection>({
+      start: 0,
+      end: 0,
+    });
+    const [inputFocused, setInputFocused] = useState(false);
+    const [forwardedValue, setForwardedValue] = useForwardedState({
       value,
       defaultValue,
       onChange,
     });
 
+    const [pickerType, setPickerType] = useState<PickerType>('date');
+    const [pickerVisibility, setPickerVisibility] = useState(false);
+
+    const [day, setDay] = useState<Day | null>(null);
+    const [time, setTime] = useState<Time | null>(null);
+
+    const [loadingTimes, setLoadingTimes] = useState(false);
+    const [disabledTimes, setDisabledTimes] = useState<Time[]>([]);
+
+    const inputValueRef = useRef(inputValue);
+    useEffect(() => {
+      inputValueRef.current = inputValue;
+    }, [inputValue]);
+
+    const inputSelectionRef = useRef(inputSelection);
+    useEffect(() => {
+      inputSelectionRef.current = inputSelection;
+    }, [inputSelection]);
+
+    const forwardedValueRef = useRef(forwardedValue);
+    useEffect(() => {
+      forwardedValueRef.current = forwardedValue;
+    }, [forwardedValue]);
+
+    const formatRef = useRef(format);
+    useEffect(() => {
+      formatRef.current = format;
+    }, [format]);
+
     useEffect(() => {
-      if (autoFocus) containerRef.current?.focus();
-    }, [autoFocus, containerRef]);
+      if (day) onDayChange(day);
+    }, [day, onDayChange]);
 
-    const onCloseRef = useRef(onClose);
     useEffect(() => {
-      onCloseRef.current = onClose;
-    }, [onClose]);
+      if (time) onTimeChange(time);
+    }, [time, onTimeChange]);
 
     useEffect(() => {
-      if (!opened) {
-        onCloseRef.current();
-        containerRef.current?.focus();
+      const { start, end } = inputSelection;
+      if (end === start && end === format.length) {
+        onEnd();
       }
-    }, [containerRef, opened]);
+    }, [format.length, inputSelection, onEnd]);
 
-    const formattedValue = useFormattedValue({
-      forwardedValue,
-      format,
-      showTime,
-      timeNotation,
-    });
+    const isMinXs = useIsMinWidth('xs');
+
+    // Set the input focus
+    useEffect(() => {
+      if (!innerInputRef.current) return;
+      if (inputFocused) {
+        innerInputRef.current.focus();
+      } else {
+        innerInputRef.current.blur();
+      }
+    }, [innerInputRef, inputFocused]);
+
+    // Open the picker automatically
+    useEffect(() => {
+      let pickerType: PickerType | null = null;
+
+      // Find the nearest token from the current caret position
+      const next = nextToken(inputSelection.start, formatRef.current, tokens);
+
+      if (next) {
+        if (dateTokens.includes(next.token as any)) {
+          pickerType = 'date';
+        }
+        if (timeTokens.includes(next.token as any)) {
+          pickerType = 'time';
+        }
+      }
 
-    const closeHandler = useCallback(() => {
-      setOpened(false);
+      if (pickerType && inputFocused) {
+        setPickerType(pickerType);
+        if (showPicker && autoOpen && isMinXs) {
+          setPickerVisibility(true);
+        }
+      } else {
+        setPickerVisibility(false);
+      }
+    }, [autoOpen, inputFocused, inputSelection.start, isMinXs, showPicker]);
+
+    const moveCaretToNextTokenDiffType = useCallback((pos: number) => {
+      const nextTokenDiffType = getNextTokenDiffType(pos, formatRef.current);
+      const nextPos = nextTokenDiffType
+        ? nextTokenDiffType.pos
+        : formatRef.current.length;
+
+      setInputSelection({ start: nextPos, end: nextPos });
     }, []);
 
-    useKeyPress(
-      (typeof window !== 'undefined' ? window : undefined) as EventTarget,
-      'Escape',
-      closeHandler
-    );
-    const isMinXs = useIsMinWidth('xs');
+    const changeHandler = useCallback(
+      (tokens: typeof dateTokens | typeof timeTokens, value: any) => {
+        if (!inputValueRef.current || value === null) return;
+
+        const start = inputSelectionRef.current.start;
+
+        let nextValue = inputValueRef.current;
+        tokens.forEach((token) => {
+          const tokenIndex = formatRef.current.indexOf(token);
+          if (tokenIndex >= 0) {
+            nextValue = replaceSubstring(
+              nextValue,
+              tokenIndex,
+              '_'.repeat(token.length)
+            );
+          }
+        });
+        tokens.forEach((token) => {
+          const tokenIndex = formatRef.current.indexOf(token);
+          if (
+            tokenIndex >= 0 &&
+            tokenGetterMap[token] &&
+            nextValue[tokenIndex] === '_'
+          ) {
+            nextValue = replaceSubstring(
+              nextValue,
+              tokenIndex,
+              tokenGetterMap[token](value)
+            );
+          }
+        });
 
-    const blurHandler = useCallback(
-      (e) => {
-        if (!opened) onBlur(e);
+        setInputValue(nextValue);
+        moveCaretToNextTokenDiffType(start);
       },
-      [onBlur, opened]
+      [moveCaretToNextTokenDiffType]
     );
 
-    const valueIsSpecified = useMemo(
-      () => formattedValue !== undefined && formattedValue !== null,
-      [formattedValue]
+    const dateChangeHandler = useCallback(
+      (day: Day | null) => {
+        changeHandler(dateTokens, day);
+        setDay(day);
+      },
+      [changeHandler]
+    );
+    const timeChangeHandler = useCallback(
+      (time: Time | null) => changeHandler(timeTokens, time),
+      [changeHandler]
     );
 
-    const rightHasPaddingValue = useMemo(() => {
-      if (valueIsSpecified) return false;
-      return right ? rightHasPadding : true;
-    }, [right, rightHasPadding, valueIsSpecified]);
+    const hour12 = useMemo(() => format.includes('hh'), [format]);
 
-    const rightValue = useMemo(() => {
-      if (valueIsSpecified) {
+    useEffect(() => {
+      if (!disabledTimesFn || !day) return;
+      let mounted = true;
+      const fn = async () => {
+        setLoadingTimes(true);
+        const disabledTimes = await disabledTimesFn(day);
+        if (mounted) {
+          setDisabledTimes(disabledTimes);
+          setLoadingTimes(false);
+        }
+      };
+      fn();
+      return () => {
+        mounted = false;
+      };
+    }, [disabledTimesFn, day]);
+
+    const pickerComponent = useMemo(() => {
+      if (pickerType === 'date') {
+        return (
+          <DateCalendar
+            firstDayOfWeek={firstDayOfWeek}
+            disabledDays={disabledDays}
+            locale={locale}
+            value={day}
+            onChange={dateChangeHandler}
+          />
+        );
+      }
+      if (pickerType === 'time') {
+        if (loadingTimes) {
+          return (
+            <TimeGridSkeleton count={times.length} columns={timeColumns} />
+          );
+        }
         return (
-          <div aria-hidden>
-            <Button
-              type='ghost'
-              wide='never'
-              size='small'
-              disabled={disabled}
-              onClick={(e) => {
-                setForwardedValue(null);
-                e.stopPropagation();
-              }}
-              onKeyDown={(e) => {
-                if (disabled) return;
-                if (['Enter', ' '].includes(e.key)) {
-                  setForwardedValue(null);
-                  if (!containerRef.current) return;
-                  containerRef.current.focus();
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-              }}
-              aria-label={locale.clearLabel}
-            >
-              <ClearIcon />
-            </Button>
-          </div>
+          <TimeGrid
+            times={times}
+            hour12={hour12}
+            columns={timeColumns}
+            disabledTimes={disabledTimes}
+            value={time}
+            onChange={timeChangeHandler}
+          />
         );
       }
-      return (
-        right || (
-          <ToggleIconContainer>
-            {opened ? <Up /> : <Down />}
-          </ToggleIconContainer>
-        )
-      );
+      return null;
     }, [
-      containerRef,
-      disabled,
-      locale.clearLabel,
-      opened,
-      right,
-      setForwardedValue,
-      valueIsSpecified,
+      dateChangeHandler,
+      day,
+      disabledDays,
+      disabledTimes,
+      firstDayOfWeek,
+      hour12,
+      loadingTimes,
+      locale,
+      pickerType,
+      time,
+      timeChangeHandler,
+      timeColumns,
+      times,
     ]);
 
-    const firstTimePickerRef = useRef<HTMLInputElement>(null);
-    const secondTimePickerRef = useRef<HTMLInputElement>(null);
-    const rangeStartedRef = useRef(false);
-
-    useEffect(() => {
-      rangeStartedRef.current = false;
-    }, [opened]);
-
-    const changeHandler = useCallback(
-      (date: Date) => {
-        setForwardedValue((prev) => {
-          if (!range) return createDate(date, prev);
-
-          const d = createDate(date);
-          const nextValue =
-            prev && Array.isArray(prev) && rangeStartedRef.current
-              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]
-              : [d, d];
-
-          rangeStartedRef.current = !rangeStartedRef.current;
-          return nextValue.sort(
-            (a: Date, b: Date) => a.getTime() - b.getTime()
-          );
-        });
-      },
-      [range, setForwardedValue]
-    );
-
-    const calendarComponent = useMemo(
-      () => (
-        <DatePickerCalendar
-          firstDayOfWeek={firstDayOfWeek}
-          locale={locale}
-          value={forwardedValue}
-          onSelect={(v) => {
-            changeHandler(v);
-            firstTimePickerRef.current?.focus();
-            if (!showTime && (!range || !rangeStartedRef.current)) {
-              closeHandler();
-            }
-          }}
-        />
-      ),
-      [
-        changeHandler,
-        closeHandler,
-        firstDayOfWeek,
-        forwardedValue,
-        locale,
-        range,
-        showTime,
-      ]
-    );
+    const openPicker = useCallback(() => {
+      if (!innerInputRef.current) return;
+      const next = nextToken(0, formatRef.current, tokens);
+
+      if (next) {
+        const type = getPickerType(next.token);
+        if (type) {
+          setInputFocused(true);
+          setInputSelection({ start: next.pos, end: next.pos });
+          setPickerType(type);
+          setPickerVisibility(true);
+        }
+      }
+    }, [innerInputRef]);
 
-    const tabOnInputComplete = useCallback(
-      (e) => {
-        if (e.target.selectionStart < 5) return;
-        secondTimePickerRef.current?.focus();
-        setForwardedValue(([from, to]) => {
-          const nextTo = new Date(to.getTime());
-          if (isSameDay(from, to)) {
-            nextTo.setHours(from.getHours() + 1);
-            nextTo.setMinutes(from.getMinutes());
-          } else {
-            nextTo.setHours(from.getHours());
-            nextTo.setMinutes(from.getMinutes());
-          }
-          return [from, nextTo];
-        });
+    const focusHandler = useCallback(
+      (e: FocusEvent<HTMLInputElement>) => {
+        setInputFocused(true);
+        onFocus(e);
       },
-      [setForwardedValue]
+      [onFocus]
     );
 
-    const closeOnInputComplete = useCallback(
-      (e) => {
-        if (e.target.selectionStart < 5) return;
-        closeHandler();
+    const blurHandler = useCallback(
+      (e: FocusEvent<HTMLInputElement>) => {
+        if (isMinXs) {
+          setPickerVisibility(false);
+        }
+        setInputFocused(false);
+        onBlur(e);
       },
-      [closeHandler]
+      [isMinXs, onBlur]
     );
 
-    const timeComponent = useMemo(
-      () =>
-        showTime && forwardedValue ? (
-          <TimeContainer>
-            {Array.isArray(forwardedValue) ? (
-              <>
-                <StyledTimePicker
-                  ref={firstTimePickerRef}
-                  autoFocus
-                  disabled={disabled}
-                  notation={timeNotation}
-                  containerProps={timePickerStyle}
-                  value={forwardedValue[0]}
-                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}
-                  onKeyDown={(e) => {
-                    if (disabled) return;
-                    if (e.key === 'Enter') {
-                      setOpened(!opened);
-                    }
-                  }}
-                  onKeyUp={tabOnInputComplete}
-                />
-                <Dash>–</Dash>
-                <StyledTimePicker
-                  ref={secondTimePickerRef}
-                  disabled={disabled}
-                  notation={timeNotation}
-                  containerProps={timePickerStyle}
-                  value={forwardedValue[1]}
-                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}
-                  onKeyDown={(e) => {
-                    if (disabled) return;
-                    if (e.key === 'Enter') {
-                      setOpened(!opened);
-                    }
-                  }}
-                  onKeyUp={closeOnInputComplete}
-                />
-              </>
-            ) : (
-              <StyledTimePicker
-                ref={firstTimePickerRef}
-                autoFocus
-                disabled={disabled}
-                notation={timeNotation}
-                containerProps={timePickerStyle}
-                value={forwardedValue}
-                onChange={setForwardedValue}
-                onKeyDown={(e) => {
-                  if (disabled) return;
-                  if (e.key === 'Enter') {
-                    setOpened(!opened);
-                  }
-                }}
-                onKeyUp={closeOnInputComplete}
-              />
-            )}
-          </TimeContainer>
-        ) : null,
-      [
-        closeOnInputComplete,
-        disabled,
-        forwardedValue,
-        opened,
-        setForwardedValue,
-        showTime,
-        tabOnInputComplete,
-        timeNotation,
-      ]
+    const showPickerButton = useMemo(
+      () => showPicker && (!autoOpen || !isMinXs),
+      [autoOpen, isMinXs, showPicker]
     );
 
     return (
       <>
-        <SelectContainer
-          opened={opened}
+        <InputContainer
+          {...containerProps}
           disabled={disabled}
           size={size}
-          tabIndex={!disabled ? 0 : -1}
-          onClick={() => {
-            if (disabled) return;
-            setOpened(!opened);
-          }}
-          onKeyDown={(e) => {
-            if (disabled) return;
-            if (['Enter', ' '].includes(e.key)) {
-              setOpened(!opened);
-              e.preventDefault();
-            }
-          }}
-          onMouseDown={(e) => e.preventDefault()}
-          onBlur={blurHandler}
-          role='combobox'
-          aria-label={
-            forwardedValue
-              ? getAccessibilityDateLabel(forwardedValue, locale)
-              : undefined
-          }
-          aria-disabled={disabled}
-          {...rest}
           ref={mergedContainerRef}
         >
-          {left && (
-            <ThemeOverrider
-              overrides={(t) => ({
-                buttonPaddingHorizontal: 0.8,
-                baseHeight: t.selectToggleListItemHeight / t.sizes.small,
-              })}
-            >
-              <ToggleLeftAddon hasPadding={leftHasPadding}>
-                {left}
-              </ToggleLeftAddon>
-            </ThemeOverrider>
-          )}
-
-          <ToggleContent hasLeft={!!left} hasRight={!!right}>
-            {valueIsSpecified ? (
-              <Title disabled={disabled} aria-hidden>
-                {formattedValue}
-              </Title>
-            ) : (
-              <Placeholder>{placeholder}</Placeholder>
-            )}
-          </ToggleContent>
-
-          {rightValue && (
-            <ThemeOverrider
-              overrides={(t) => ({
-                buttonPaddingHorizontal: 0.8,
-                baseHeight: t.selectToggleListItemHeight / t.sizes.small,
-              })}
-            >
-              <ToggleRightAddon hasPadding={rightHasPaddingValue}>
-                {rightValue}
-              </ToggleRightAddon>
+          <StyledInputDateUnstyled
+            {...rest}
+            disabled={disabled}
+            hasRight={showPickerButton}
+            format={format}
+            value={forwardedValue}
+            inputValue={inputValue}
+            selection={inputSelection}
+            onChange={setForwardedValue}
+            onInputChange={setInputValue}
+            onSelectionChange={setInputSelection}
+            onDayChange={setDay}
+            onTimeChange={setTime}
+            onDayError={onDayError}
+            onFocus={focusHandler}
+            onBlur={blurHandler}
+            ref={mergedInputRef}
+          />
+
+          {showPickerButton && (
+            <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
+              <PickerButtonContainer>
+                <Button
+                  type='ghost'
+                  size='small'
+                  wide='never'
+                  disabled={disabled}
+                  onClick={openPicker}
+                  onMouseDown={preventDefault}
+                >
+                  <Calendar />
+                </Button>
+              </PickerButtonContainer>
             </ThemeOverrider>
           )}
-        </SelectContainer>
+        </InputContainer>
 
         {isMinXs ? (
           <StyledPopover
-            trigger={containerRef}
+            trigger={innerContainerRef}
             placement='bottom-start'
-            visible={opened}
-            onClose={closeHandler}
+            visible={pickerVisibility}
+            onMouseDown={preventDefault} // To prevent loosing the input focus
             size={size}
           >
-            {calendarComponent}
-            {timeComponent}
+            {pickerComponent}
           </StyledPopover>
         ) : (
-          <Modal
-            title={placeholder}
+          <StyledModal
             header={null}
             footer={null}
-            visible={opened}
-            onClose={closeHandler}
+            visible={pickerVisibility}
+            onClose={() => setPickerVisibility(false)}
+            lockedFocus={false} // To prevent loosing the input focus
+            onMouseDown={preventDefault} // To prevent loosing the input focus
             size={size}
           >
-            {calendarComponent}
-            {timeComponent}
-          </Modal>
+            {pickerComponent}
+          </StyledModal>
         )}
       </>
     );