Improve RelativeDatePicker and DatePicker components flow

[KrotovPetr]

Problem

Currently, our calendar does not allow you to enter time, so to organize this functionality, we use an additional input in the calendar popup.

Solution

It is proposed to think about finalizing the UX calendar so that you can select not only the date, but also the time.
The time selection consists of two elements in a columnar form: the selected time and three columns with a selection of hours, minutes and seconds.

if we work with DatePicker (we select one date), then we have a time selection for one date to the right of the calendar (as I described in p1)

if we work with RangeDatePicker (we select two dates), then we have a choice of two dates to the right of the calendar, it looks almost the same as in p1, but instead of one selected time state, we have two and we can switch between them. In this case, we introduce the concept of an active date in the range, it is highlighted by an intermittent border.

If we only work with time, then we don't have a calendar for choosing dates.

For references we can use:

• Native example
• Adobe Spectrum
• MUI

Details

• We need a common "drum" component for timing

Props: format, timerFormat (12h format or 24h format), relative: boolean

• Also we need to add a new component to the other DatePicker and RelativeDatePicker components.

New common components

1. Wheel component.

Sandbox draft example: https://codesandbox.io/p/sandbox/focused-wing-vclnxj?file=%2Fsrc%2FTimePicker.scss

export interface WheelValue {
  label: string;    // text displayed to the user (e.g. "03")
  value: string;    // actual value stored/returned (e.g. "03")
  disabled?: boolean; // if true, the value cannot be selected (grayed out)
}

export interface WheelProps {
  values: WheelValue[]; 
  /**
   * List of items in the wheel.
   * Each item has a `label` (displayed text),
   * a `value` (actual data),
   * and optionally `disabled` (not selectable).
   */

  value: string;
  /** Currently selected value (must match one of the items in `values`). */

  setValue: (val: string) => void;
  /** Function to update the selected value when the user scrolls or clicks. */

  isInfinite?: boolean;
  /**
   * If true → the wheel loops infinitely (scrolling continues without visible end).
   * If false → the list is finite (scroll stops at first/last item).
   */

  onChange?: (val: string) => void;
  /**
   * Callback fired when the user explicitly selects a value (click),
   * not when the wheel auto-scrolls.
   */

  isActive?: boolean;
  /**
   * Marks the wheel as "active" (highlighted).
   * Only one wheel should be active at a time (the one with the blue selection).
   */

  onActivate?: () => void;
  /** Called when the wheel is clicked to set it as the active wheel. */
}

TimePicker

This component is based on Wheel, DataField and TimeBlock using the input format HH:MM:SS AM/PM.
Sandbox draft example: https://codesandbox.io/p/sandbox/focused-wing-vclnxj?file=%2Fsrc%2FTimePicker.scss

export interface TimePickerProps {
/**
The format prop is a string that defines the date and time format the DateField component will accept and display. This prop determines how the date and time are visually presented to the user and how the user's input is expected to be formatted. [Available formats](https://day.js.org/docs/en/display/format)
*/
 
  format: string; 
}

Adding to the old components will build on the existing components mentioned above, rendering depends on the prop format.

[korvin89]

@ValeraS Could you take a look please?

[korvin89]

@KrotovPetr Lets start from this task #232