Date Range Picker

<script setup lang="ts">
import { ref } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const travelDates = ref<{
  start?: string
  end?: string
} | undefined>()
</script>

<template>
  <DsnDateRangePicker v-model="travelDates" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const shiftDays = (value: Date, amount: number) => {
  const nextValue = new Date(value)
  nextValue.setDate(nextValue.getDate() + amount)
  return nextValue
}

const bookingWindow = ref<{
  start?: string
  end?: string
} | undefined>()

const presets = [
  'last-7-days',
  'last-30-days',
  'this-month',
  'last-month',
  {
    id: 'next-14-days',
    label: 'Next 14 days',
    value: () => {
      const start = new Date()
      const end = shiftDays(start, 13)
      return { start, end }
    },
  },
] as const
</script>

<template>
  <DsnDateRangePicker
    v-model="bookingWindow"
    :presets="presets"
    clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const reportingPeriod = ref<{
  start?: string
  end?: string
} | undefined>()
</script>

<template>
  <DsnDateRangePicker
    v-model="reportingPeriod"
    default-date-view="2026-05-01"
    min-value="2026-05-10"
    max-value="2026-05-24"
    clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const invoicePeriod = ref<{
  start?: string
  end?: string
} | undefined>()
</script>

<template>
  <DsnDateRangePicker
    v-model="invoicePeriod"
    placeholder="Seleccionar periodo"
    locale="es-ES"
    date-style="long"
    clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const campaignDates = ref<{
  start?: string
  end?: string
} | undefined>()
</script>

<template>
  <DsnDateRangePicker
    v-model="campaignDates"
    clearable
    :presets="['last-7-days', 'this-month']"
    :lang="{
      pick_date_range: 'Pilih periode',
      clear_date: 'Reset tanggal',
      last_7_days: '7 hari terakhir',
      this_month: 'Bulan ini',
      custom_date_range: 'Pilih manual'
    }" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const compactRange = ref<{
  start?: string
  end?: string
} | undefined>()
</script>

<template>
  <DsnDateRangePicker
    v-model="compactRange"
    date-style="short"
    clearable />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { DsnDateRangePicker } from '@/components/ui/dsn-date-range-picker'

const travelDates = ref<{
  start?: string
  end?: string
} | undefined>({
  start: '2026-04-12',
  end: '2026-04-18'
})
const message = ref('')

const onClear = () => {
  message.value = 'Date range cleared!'
}

watch(travelDates, (val) => {
  if (val?.start || val?.end) {
    message.value = ''
  }
})
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <DsnDateRangePicker
      v-model="travelDates"
      clearable
      @clear="onClear" />
    <p v-if="message" class="text-sm text-destructive font-medium">{{ message }}</p>
  </div>
</template>