GrDatePicker

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

// `GrDatePicker` подставляется авто-импортом (`unplugin-vue-components`).
const value = ref<Date | null>(new Date(2026, 7, 12))
const iso = ref<string | null>('2026-08-20')
</script>

<template>
  <div class="grid max-w-[320px] gap-4">
    <GrDatePicker
      v-model="value"
      clearable
      placeholder="Pick a date"
      aria-label="Pick a date"
    />

    <!-- Тип модели задаёт адаптер, а не строковый проп формата: значение
         остаётся `string` и в типах, и в рантайме. -->
    <GrDatePicker
      v-model="iso"
      value-adapter="isoDate"
      :format="{ dateStyle: 'full' }"
      clearable
      placeholder="ISO model"
      aria-label="ISO model"
    />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">Date=</span><code>{{ value?.toDateString() ?? '—' }}</code>
      <span class="opacity-70"> · isoDate=</span><code>{{ iso ?? '—' }}</code>
    </p>
  </div>
</template>

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

// `GrDatePicker`, `GrDialog`, `GrButton` и `GrFormField` подставляются
// авто-импортом (`unplugin-vue-components`).
const open = ref(false)
const value = ref<string | null>('2026-08-12')
</script>

<template>
  <div class="grid gap-3">
    <GrButton class="justify-self-start" @click="open = true">
      Schedule delivery
    </GrButton>

    <GrDialog v-model="open" title="Schedule delivery" size="sm">
      <!-- Панель пикера встаёт в общий стек слоёв поверх окна: Esc закрывает
           сначала её, и только следующий — само окно. -->
      <GrFormField label="Delivery date">
        <GrDatePicker
          v-model="value"
          value-adapter="isoDate"
          clearable
          placeholder="Pick a date"
        />
      </GrFormField>

      <template #footer>
        <div class="flex items-center justify-between gap-3">
          <span class="showcase-demo-text text-sm">
            <span class="opacity-70">value=</span><code>{{ value ?? '—' }}</code>
          </span>
          <GrButton @click="open = false">
            Done
          </GrButton>
        </div>
      </template>
    </GrDialog>
  </div>
</template>

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

// `GrDatePicker`, `GrFormField` и `GrButton` подставляются авто-импортом.
// Модель — строка `2026-08-20`: её задаёт адаптер, а не проп формата.
const departure = ref<string | null>(null)
const attempted = ref(false)
const submitted = ref('')

const today = new Date(2026, 7, 12)

const error = computed(() => (attempted.value && !departure.value ? 'Choose a departure date' : ''))

function submit(event: Event): void {
  attempted.value = true

  // Форме уходит `2026-08-20`, а не «Aug 20, 2026»: показ локале-зависим и на
  // сервере не разбирается.
  const data = new FormData(event.target as HTMLFormElement)
  submitted.value = String(data.get('departure') ?? '')
}
</script>

<template>
  <form class="grid max-w-[320px] gap-4" @submit.prevent="submit">
    <!-- Поле пикера — обычный форм-контрол: подпись через `<label for>`,
         ошибка через `aria-describedby`, значение уходит по `name`. -->
    <GrFormField label="Departure" :error="error" required>
      <GrDatePicker
        v-model="departure"
        name="departure"
        value-adapter="isoDate"
        :min="today"
        clearable
        placeholder="Pick a date"
      />
    </GrFormField>

    <GrButton type="submit" size="sm">
      Submit
    </GrButton>

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">form data=</span><code>{{ submitted || '—' }}</code>
    </p>
  </form>
</template>

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

// `GrDatePicker` подставляется авто-импортом (`unplugin-vue-components`).
const value = ref<string | null>('2026-08-12')
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <!-- Панель на месте, поля нет — но модель, адаптер и `name` остаются
         пикеровскими: этим `inline` и отличается от голого `GrCalendar`. -->
    <GrDatePicker
      v-model="value"
      inline
      name="due"
      value-adapter="isoDate"
      aria-label="Due date"
    />

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

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

// `GrDatePicker` подставляется авто-импортом (`unplugin-vue-components`).
const day = ref<string | null>('2026-08-12')
const month = ref<string | null>('2026-08-01')
const year = ref<string | null>('2026-01-01')
</script>

<template>
  <div class="grid max-w-[320px] gap-4">
    <!-- Режим меняет и панель, и вид значения в поле: подставлять свой
         `format` для этого не нужно. -->
    <GrDatePicker v-model="day" value-adapter="isoDate" aria-label="Day" />
    <GrDatePicker v-model="month" mode="month" value-adapter="isoDate" aria-label="Month" />
    <GrDatePicker v-model="year" mode="year" value-adapter="isoDate" aria-label="Year" />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">day=</span><code>{{ day ?? '—' }}</code>
      <span class="opacity-70"> · month=</span><code>{{ month ?? '—' }}</code>
      <span class="opacity-70"> · year=</span><code>{{ year ?? '—' }}</code>
    </p>
  </div>
</template>

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

// `GrDatePicker` и `GrChip` подставляются авто-импортом.

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

const lessons = ref<Date[]>([new Date(2026, 7, 12), new Date(2026, 7, 14)])

const formatter = new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: 'short' })

const chips = computed(() => lessons.value.map(date => ({
  key: date.toISOString().slice(0, 10),
  label: formatter.format(date),
  date,
})))

function remove(key: string): void {
  lessons.value = lessons.value.filter(date => date.toISOString().slice(0, 10) !== key)
}
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <GrDatePicker
      v-model="lessons"
      multiple
      :today="TODAY"
      locale="ru-RU"
      placeholder="Выберите занятия"
      aria-label="Даты занятий"
      class="w-80"
    />

    <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
      <!-- Удаление у чипа своё: `closable` плюс `remove`, свой крестик был бы копией. -->
      <GrChip
        v-for="chip in chips"
        :key="chip.key"
        size="sm"
        closable
        :remove-label="`Убрать ${chip.label}`"
        @remove="remove(chip.key)"
      >
        {{ chip.label }}
      </GrChip>
    </div>

    <p v-else class="showcase-demo-text text-sm opacity-70">
      Пока ничего не выбрано.
    </p>

    <p class="showcase-demo-text text-sm opacity-70">
      Наберите несколько дат: панель <strong>не закрывается</strong> — набор набирают, а одиночную
      дату выбирают однажды. Клик по выбранной снимает её: набор это переключатель, а не накопитель,
      иначе снять ошибочно взятую дату было бы нечем.
    </p>

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

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

// `GrDatePicker` подставляется авто-импортом (`unplugin-vue-components`).
const value = ref<string | null>('2026-08-12')
const russian = ref<string | null>('2026-08-12')
</script>

<template>
  <div class="grid max-w-[320px] gap-4">
    <!-- Порядок частей и разделитель берутся из локали, поэтому маска и
         подсказка формата у полей разные, а проп — один. -->
    <GrDatePicker
      v-model="value"
      editable
      value-adapter="isoDate"
      locale="en-US"
      clearable
      aria-label="US format"
    />

    <GrDatePicker
      v-model="russian"
      editable
      value-adapter="isoDate"
      locale="ru-RU"
      clearable
      aria-label="RU format"
    />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">en=</span><code>{{ value ?? '—' }}</code>
      <span class="opacity-70"> · ru=</span><code>{{ russian ?? '—' }}</code>
    </p>
  </div>
</template>