Date Picker

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

// Keep a date-only value (YYYY-MM-DD).
const selectedDate = ref<string | undefined>()
</script>

<template>
  <DsnDatePicker v-model="selectedDate" />
</template>

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

// Time mode returns ISO datetime when time is selected.
const appointmentAt = ref<string | undefined>()
</script>

<template>
  <DsnDatePicker
    v-model="appointmentAt"
    time-picker
    clearable
    :week-starts-on="1" />
</template>

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

const dateValue = ref<string | undefined>('')
</script>

<template>
  <DsnDatePicker
    v-model="dateValue"
    layout="month-and-year" />
</template>

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

// Disable dates outside the allowed booking window.
const bookingDate = ref<string | undefined>()
</script>

<template>
  <DsnDatePicker
    v-model="bookingDate"
    min-value="2026-04-10"
    max-value="2026-04-20"
    clearable />
</template>

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

// Override built-in labels and formatting.
const localizedDate = ref<string | undefined>()
</script>

<template>
  <DsnDatePicker
    v-model="localizedDate"
    date-style="long"
    date-time-separator=" | "
    clearable
    :lang="{
      pick_date: 'Pilih tanggal',
      select_time: 'Pilih jam',
      close_btn: 'Tutup'
    }"
    time-picker
    class="w-60" />
</template>

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

// Useful when you want a more explicit date-time display.
const interviewAt = ref<string | undefined>()
</script>

<template>
  <DsnDatePicker
    v-model="interviewAt"
    time-picker
    date-style="full"
    date-time-separator=" at "
    clearable
    class="w-80" />
</template>

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

// Clear call-to-action text for empty state.
const departureDate = ref<string | undefined>()
</script>

<template>
  <!--
  Currently, only 'en' and 'id' are available for the date picker labels. 
  You can add more locales directly in the DsnDatePicker component or via the 'lang' prop.
  -->
  <DsnDatePicker
    v-model="departureDate"
    locale="es-ES"
    placeholder="Seleccionar fecha de salida"
    :week-starts-on="1"
    time-picker
    :lang="{
      pick_date: 'Seleccionar fecha',
      select_time: 'Seleccionar hora',
      close_btn: 'Cerrar'
    }" />
</template>

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

const selectedDate = ref<string | undefined>('2026-04-12')
const message = ref('')

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

watch(selectedDate, (val) => {
  if (val) {
    message.value = ''
  }
})
</script>

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