feat(DateTimePicker): new component with two-step popover and presets

docs/app/components/content/examples/date-time-picker/DateTimePickerBasicExample.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { CalendarDateTime } from '@internationalized/date'
+
+const value = shallowRef<CalendarDateTime | undefined>(new CalendarDateTime(2026, 4, 29, 17, 0))
+</script>
+
+<template>
+  <B24DateTimePicker v-model="value" class="w-72" />
+</template>

docs/app/components/content/examples/date-time-picker/DateTimePickerCustomPresetsExample.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { CalendarDateTime, today, getLocalTimeZone } from '@internationalized/date'
+import type { DateTimePickerPreset } from '@bitrix24/b24ui-nuxt'
+
+const tz = getLocalTimeZone()
+const value = shallowRef<CalendarDateTime | undefined>()
+
+const presets: DateTimePickerPreset[] = [
+  {
+    label: 'Now',
+    hint: 'Right at this moment',
+    value: () => {
+      const now = new Date()
+      const t = today(tz)
+      return new CalendarDateTime(t.year, t.month, t.day, now.getHours(), now.getMinutes())
+    }
+  },
+  {
+    label: 'Tomorrow morning',
+    hint: '09:00',
+    value: () => {
+      const t = today(tz).add({ days: 1 })
+      return new CalendarDateTime(t.year, t.month, t.day, 9, 0)
+    }
+  },
+  {
+    label: 'Next Monday',
+    hint: 'Start of the work week',
+    value: () => {
+      const base = today(tz)
+      const offset = (8 - base.toDate(tz).getDay()) % 7 || 7
+      const next = base.add({ days: offset })
+      return new CalendarDateTime(next.year, next.month, next.day, 10, 0)
+    }
+  }
+]
+</script>
+
+<template>
+  <B24DateTimePicker
+    v-model="value"
+    :presets="presets"
+    placeholder="Pick a moment"
+    class="w-72"
+  />
+</template>

docs/app/components/content/examples/date-time-picker/DateTimePickerCustomTriggerExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { CalendarDateTime } from '@internationalized/date'
+import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'
+
+const value = shallowRef<CalendarDateTime | undefined>(new CalendarDateTime(2026, 4, 29, 17, 0))
+</script>
+
+<template>
+  <B24DateTimePicker v-model="value">
+    <template #default="{ open, formatted }">
+      <B24Button :icon="Calendar1Icon" :color="open ? 'air-primary' : 'air-tertiary'">
+        {{ formatted || 'Schedule a call' }}
+      </B24Button>
+    </template>
+  </B24DateTimePicker>
+</template>

docs/app/components/content/examples/date-time-picker/DateTimePickerDateOnlyExample.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { CalendarDate } from '@internationalized/date'
+
+const value = shallowRef<CalendarDate | undefined>(new CalendarDate(2026, 4, 28))
+</script>
+
+<template>
+  <B24DateTimePicker v-model="value" date-only class="w-72" />
+</template>

docs/app/components/content/examples/date-time-picker/DateTimePickerFormFieldExample.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { CalendarDateTime, type DateValue } from '@internationalized/date'
+
+const meetingAt = shallowRef<DateValue | undefined>(new CalendarDateTime(2026, 4, 29, 17, 0))
+</script>
+
+<template>
+  <B24FormField
+    name="meetingAt"
+    label="Meeting at"
+    hint="Pick a date and time"
+    required
+    class="w-72"
+  >
+    <B24DateTimePicker v-model="meetingAt" class="w-full" />
+  </B24FormField>
+</template>

docs/app/components/content/examples/date-time-picker/DateTimePickerMinMaxDatesExample.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { CalendarDateTime, today, getLocalTimeZone, type DateValue } from '@internationalized/date'
+
+const tz = getLocalTimeZone()
+const t0 = today(tz)
+
+const value = shallowRef<DateValue | undefined>(new CalendarDateTime(t0.year, t0.month, t0.day, 12, 0))
+</script>
+
+<template>
+  <B24DateTimePicker
+    v-model="value"
+    :calendar="{ minValue: t0, maxValue: t0.add({ days: 14 }) }"
+    placeholder="Within the next two weeks"
+    class="w-72"
+  />
+</template>

docs/content/docs/2.components/date-time-picker.md

@@ -0,0 +1,197 @@
+---
+title: DateTimePicker
+description: A date and time selector with a two-step popover interface and configurable presets.
+category: form
+links:
+  - label: GitHub
+    iconName: GitHubIcon
+    to: https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/DateTimePicker.vue
+  - label: Demo
+    iconName: DemonstrationOnIcon
+    to: https://bitrix24.github.io/b24ui/demo/components/date-time-picker
+---
+
+`B24DateTimePicker` composes [`B24Popover`](/docs/components/popover/), [`B24Calendar`](/docs/components/calendar/) and a read-only [`B24Input`](/docs/components/input/) trigger into a single Bitrix24-style picker. The popover lets the user pick a date in the first step, then offers a clickable hour/minute grid in the second step. A configurable preset list is rendered on the side. The default trigger can be fully replaced through the `#default` slot — for example with a [`B24Button`](/docs/components/button/).
+
+## Usage
+
+Use the `v-model` directive to control the selected value. The default model is a `CalendarDateTime` from the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package.
+
+::component-example
+---
+name: 'date-time-picker-basic-example'
+---
+::
+
+::framework-only
+#nuxt
+:::note{to="/docs/getting-started/integrations/i18n/nuxt/#locale"}
+This component uses the `@internationalized/date` package and the `<B24App>` locale for formatting.
+:::
+
+#vue
+:::note{to="/docs/getting-started/integrations/i18n/vue/#locale"}
+This component uses the `@internationalized/date` package and the `<B24App>` locale for formatting.
+:::
+::
+
+### Date only
+
+Use the `date-only` prop to hide the time-selection step. The bound model becomes a `CalendarDate` and the time portion is forced to `00:00:00`.
+
+::component-example
+---
+name: 'date-time-picker-date-only-example'
+---
+::
+
+### Minute step
+
+Use the `minute-step` prop to change the granularity of the minutes column. Defaults to `5`.
+
+::component-code
+---
+prettier: true
+props:
+  minuteStep: 15
+  placeholder: 'Pick a date and time'
+---
+::
+
+### Locale
+
+Use the `locale` prop to change the calendar locale and the trigger formatter.
+
+::component-code
+---
+prettier: true
+items:
+  locale:
+    - en
+    - de
+    - es
+    - pt-BR
+    - fr
+    - it
+    - pl
+    - ru
+    - uk
+    - tr
+    - zh-CN
+    - zh-TW
+    - ja
+    - hi
+props:
+  locale: hi
+  placeholder: 'तारीख और समय चुनें'
+---
+::
+
+### Hide presets
+
+Use the `hide-presets` prop to remove the side preset column.
+
+::component-code
+---
+prettier: true
+props:
+  hidePresets: true
+  placeholder: 'Pick a date and time'
+---
+::
+
+### With min/max dates
+
+Use the `calendar` prop to pass `min-value` / `max-value` and other props down to the underlying [`B24Calendar`](/docs/components/calendar/). The same channel can be used for `is-date-disabled` / `is-date-unavailable`.
+
+::component-example
+---
+name: 'date-time-picker-min-max-dates-example'
+---
+::
+
+### Color
+
+Use the `color` prop to change the calendar selection color.
+
+::component-code
+---
+prettier: true
+props:
+  color: 'air-primary-alert'
+---
+::
+
+### Size
+
+Use the `size` prop to change the picker size.
+
+::component-code
+---
+prettier: true
+props:
+  size: lg
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the picker.
+
+::component-code
+---
+prettier: true
+props:
+  disabled: true
+---
+::
+
+## Examples
+
+### With custom presets
+
+Pass an array of presets via the `presets` prop. Each entry is `{ label, hint?, value }` where `value` is either a `DateValue` or a factory function evaluated when the preset is applied.
+
+::component-example
+---
+name: 'date-time-picker-custom-presets-example'
+---
+::
+
+### With custom trigger
+
+Override the trigger via the default slot. The slot receives `{ open, value, formatted }`.
+
+::component-example
+---
+name: 'date-time-picker-custom-trigger-example'
+---
+::
+
+### Inside a form field
+
+Compose with [`B24FormField`](/docs/components/form-field/) to attach a label, hint and validation message.
+
+::component-example
+---
+name: 'date-time-picker-form-field-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

playgrounds/demo/app/composables/useNavigation.ts

@@ -38,6 +38,7 @@ const components = [
   'content/content-surround',
   'content/content-toc',
   'context-menu',
+  'date-time-picker',
   'drawer',
   'dropdown-menu',
   'editor',