Календарь

<script lang="ts" setup>
// non-reactive
const { minDate, maxDate } = ((today) => {
  const month = today.getMonth();
  const year = today.getFullYear();

  const min = new Date(today);
  const max = new Date(today);

  min.setMonth(month === 0 ? 11 : month - 1);
  min.setFullYear(month === 0 ? year - 1 : year);
  max.setMonth(month === 11 ? 0 : month + 1);
  max.setFullYear(month === 11 ? year + 1 : year);

  return { minDate: min, maxDate: max };
})(new Date());
// end non-reactive

const value = ref();
</script>

<template>
  <div class="row justify-content-center">
    <div class="col-6">
      <BCalendar
        class="mb-3"
        v-model="value"
        date-format="dd.mm.yy"
        placeholder="06.12.2024"
        :min-date="minDate"
        :max-date="maxDate"
        input-mask
      />
      <pre class="mb-0">value: {{ value }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
const date = ref();
const datetime = ref();
const time = ref();
</script>

<template>
  <div class="row justify-content-center">
    <div class="col-4">
      <BFormLabel>Только дата</BFormLabel>
      <BCalendar class="mb-3" v-model="date" date-format="dd.mm.yy" placeholder="06.12.2024" input-mask />
      <pre class="mb-0">value: {{ date }}</pre>
    </div>
    <div class="col-4">
      <BFormLabel>Дата и время</BFormLabel>
      <BCalendar
        class="mb-3"
        v-model="datetime"
        date-format="dd.mm.yy"
        placeholder="06.12.2024 00:00:00"
        show-time
        show-seconds
        input-mask
      />
      <pre class="mb-0">value: {{ datetime }}</pre>
    </div>
    <div class="col-4">
      <BFormLabel>Только время</BFormLabel>
      <BCalendar class="mb-3" v-model="time" placeholder="00:00:00" time-only show-seconds input-mask />
      <pre class="mb-0">value: {{ time }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
const customCalendarRef = ref();

const customCalendarTime = reactive(useCalendarTime(customCalendarRef, new Date(2025, 5, 28, 19, 18, 15)));
const customCalendarTimeInputMask = reactive(
  customCalendarTime.createInputMask({
    mask: '99:99'
  })
);

const value12h = ref();
const value24h = ref();
const valueTime = ref();
</script>

<template>
  <div class="row justify-content-center gy-3">
    <div class="col-6">
      <BFormLabel>12ч формат</BFormLabel>
      <BCalendar class="mb-3" v-model="value12h" show-time hour-format="12" date-format="dd.mm.yy" />
      <pre class="mb-0">value: {{ value12h }}</pre>
    </div>
    <div class="col-6">
      <BFormLabel>24ч формат</BFormLabel>
      <BCalendar class="mb-3" v-model="value24h" show-time hour-format="24" date-format="dd.mm.yy" />
      <pre class="mb-0">value: {{ value24h }}</pre>
    </div>
    <div class="col-6">
      <BFormLabel>Только время</BFormLabel>
      <BCalendar class="mb-3" v-model="valueTime" time-only show-seconds />
      <pre class="mb-0">value: {{ valueTime }}</pre>
    </div>
    <div class="col-6">
      <BFormLabel>Кастомный timepicker</BFormLabel>
      <BCalendar
        ref="customCalendarRef"
        class="mb-3"
        v-model="customCalendarTime.modelValue"
        date-format="dd.mm.yy"
        hour-format="24"
        show-time
      >
        <template #timepicker="{ attrs }">
          <div class="flex-column gap-2" v-bind="attrs">
            <div>
              <BInputMask placeholder="Время" v-bind="customCalendarTimeInputMask" />
            </div>
            <BButtonGroup>
              <BButton size="sm" label="+5 мин" severity="primary" @click="customCalendarTime.doAction('minute', 5)" />
              <BButton
                size="sm"
                label="+10 мин"
                severity="primary"
                @click="customCalendarTime.doAction('minute', 10)"
              />
              <BButton
                size="sm"
                label="+30 мин"
                severity="primary"
                @click="customCalendarTime.doAction('minute', 30)"
              />
              <BButton size="sm" label="+1 час" severity="primary" @click="customCalendarTime.doAction('hour', 1)" />
              <BButton size="sm" label="+1 сутки" severity="primary" @click="customCalendarTime.doAction('date', 1)" />
            </BButtonGroup>
          </div>
        </template>
      </BCalendar>
      <pre class="mb-0">value: {{ customCalendarTime.modelValue }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
const date = ref(new Date());
</script>

<template>
  <div class="row justify-content-center gy-3">
    <div class="col-6">
      <BCalendar class="mb-3" v-model="date" date-format="dd.mm.yy" disabled />
      <pre class="mb-0">value: {{ date }}</pre>
    </div>
  </div>
</template>