GrDateRangePicker

<script setup lang="ts">
import { ref } from 'vue'

// `GrDateRangePicker` подставляется авто-импортом (`unplugin-vue-components`).
const value = ref<readonly [string, string] | null>(['2026-08-10', '2026-08-14'])
</script>

<template>
  <div class="grid max-w-[360px] gap-4">
    <!-- Период набирается двумя кликами; пока он открыт, сетка показывает
         предпросмотр до дня под курсором. -->
    <GrDateRangePicker
      v-model="value"
      value-adapter="isoDate"
      clearable
      placeholder="Pick a period"
      aria-label="Stay"
    />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">value=</span><code>{{ value ? value.join(' … ') : '—' }}</code>
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

// `GrDateRangePicker` подставляется авто-импортом.

/**
 * Период одной строкой.
 *
 * Панель модели рядом нужна, чтобы было видно результат разбора целиком:
 * границы нормализуются по порядку, и на глаз это иначе не проверить.
 */
const TODAY = new Date(2026, 7, 12)

const period = ref<[Date, Date] | null>([new Date(2026, 7, 10), new Date(2026, 7, 14)])

const model = computed(() => (period.value
  ? period.value.map(date => new Intl.DateTimeFormat('ru-RU', { dateStyle: 'medium' }).format(date))
  : null))
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <GrDateRangePicker
      v-model="period"
      editable
      :today="TODAY"
      :max-range="30"
      locale="ru-RU"
      aria-label="Период отчёта"
      class="w-96"
    />

    <pre v-if="model" class="rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] p-3 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-leading-sm)]">{{ JSON.stringify(model) }}</pre>

    <p class="showcase-demo-text text-sm opacity-70">
      Строку делит не разделитель, а <strong>счёт групп цифр</strong>: их поровну на две границы.
      Поэтому <code>10.08.2026 — 14.08.2026</code>, <code>10.08.2026 - 14.08.2026</code> и
      <code>10.08.2026 14.08.2026</code> — одно и то же. Списка разделителей здесь нет намеренно:
      в канадской локали дата сама пишется через дефис, и такой список развалился бы на ней первой.
    </p>

    <p class="showcase-demo-text text-sm opacity-70">
      Панель идёт за набором: первая набранная граница подсвечивается началом периода — тем же
      состоянием, что и после первого клика, — вторая закрывает полосу. Сетка переходит на месяц
      набранного. Модель ждёт <strong>Enter</strong>.
    </p>

    <p class="showcase-demo-text text-sm opacity-70">
      Наберите границы задом наперёд — порядок нормализуется, как и при кликах. Наберите одну дату —
      ввод отклонится: одна дата не период, а достраивать вторую границу значит придумать за вас то,
      чего вы не задавали. Период длиннее <code>max-range</code> в 30 дней тоже не применится, и об
      этом скажет диктор: вы набрали всё правильно, и молчание выглядело бы как потерянный Enter.
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// `GrDateRangePicker` подставляется авто-импортом (`unplugin-vue-components`).
const value = ref<readonly [Date, Date] | null>(null)

const from = new Date(2026, 7, 1)
</script>

<template>
  <div class="grid max-w-[360px] gap-4">
    <!-- Длина считает обе границы: от трёх до семи дней включительно.
         Недопустимая длина не выбирается, но и не сбрасывает начало. -->
    <GrDateRangePicker
      v-model="value"
      :min="from"
      :min-range="3"
      :max-range="7"
      clearable
      placeholder="From 3 to 7 days"
      aria-label="Vacation"
    />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">days=</span>
      <code>{{ value ? Math.round((value[1].getTime() - value[0].getTime()) / 86400000) + 1 : '—' }}</code>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

/**
 * Шорткаты живут внутри панели, а не рядом с полем: период обязан выставить
 * обе границы разом и уважать `maxRange`. Здесь потолок — 31 день, и «Последние
 * 90 дней» приходит выключенным, а не молча ничего не делает.
 */
const period = ref<[Date, Date] | null>(null)

/** Границы функцией: «последние 7 дней» отсчитываются от сегодняшнего дня. */
function lastDays(count: number): () => [Date, Date] {
  return () => {
    const to = new Date()
    const from = new Date()
    from.setDate(from.getDate() - count + 1)

    return [from, to]
  }
}

function thisMonth(): [Date, Date] {
  const now = new Date()

  return [new Date(now.getFullYear(), now.getMonth(), 1), now]
}

const presets = [
  { label: 'Сегодня', range: lastDays(1) },
  { label: 'Последние 7 дней', range: lastDays(7) },
  { label: 'Этот месяц', range: thisMonth },
  { label: 'Последние 90 дней', range: lastDays(90) },
]
</script>

<template>
  <div class="grid gap-3 justify-items-start">
    <GrDateRangePicker
      v-model="period"
      :presets="presets"
      :max-range="31"
      placeholder="Период отчёта"
    />

    <p class="showcase-demo-text text-sm opacity-70">
      Период длиннее месяца запрещён, поэтому «Последние 90 дней» выключены —
      кнопка, которая ничего не делает, обманывает. Свой подвал ставится слотом
      <code>footer</code>: он получает <code>setRange</code> и те же правила.
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

// `GrDateRangePicker` подставляется авто-импортом.

/**
 * Окно обслуживания: период с точностью до минут.
 *
 * Панель модели рядом не для красоты — на ней видно обе границы целиком, а
 * именно во времени границ и весь смысл: по датам эти периоды неразличимы.
 */
const TODAY = new Date(2026, 7, 12)

const window = ref<[Date, Date] | null>(null)

function format(date: Date): string {
  return new Intl.DateTimeFormat('ru-RU', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
}

const model = computed(() => (window.value
  ? { from: format(window.value[0]), to: format(window.value[1]) }
  : null))
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <GrDateRangePicker
      v-model="window"
      enable-time
      :minute-step="15"
      :today="TODAY"
      locale="ru-RU"
      placeholder="Выберите окно"
      aria-label="Окно обслуживания"
      class="w-96"
    />

    <pre v-if="model" class="rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] p-3 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-leading-sm)]">{{ JSON.stringify(model, null, 2) }}</pre>
    <p v-else class="showcase-demo-text text-sm opacity-70">Пока ничего не выбрано.</p>

    <p class="showcase-demo-text text-sm opacity-70">
      Выберите две даты: время встаёт <strong>00:00 и 23:59</strong> — сутки целиком. Две полуночи
      выглядели бы симметрично, но «с 12 по 14» по-человечески включает весь четырнадцатый день, а
      период до 14-го 00:00 молча отрезал бы почти все эти сутки. Это классическая ошибка отчётов, и
      умолчание здесь её не повторяет.
    </p>

    <p class="showcase-demo-text text-sm opacity-70">
      Панель не закрывается на второй дате: выбор на ней не заканчивается. Время правится когда
      угодно и в любом порядке — мастера из четырёх шагов нет намеренно, он завёл бы скрытое
      состояние «на каком мы шаге». Выберите период в один день и попробуйте увести конец раньше
      начала: правка не применится, потому что внутри одного дня порядок краёв держит только время.
    </p>
  </div>
</template>