Date Picker

<script setup lang="ts">import { ref } from 'vue'import { AdminDatePicker } from '@/components/admin/date-picker'​const value = ref<Date | null>(null)</script>​<template>  <div class="flex w-full max-w-sm flex-col gap-2">    <admin-date-picker v-model="value" emit-as="date" format="yyyy/MM/dd" placeholder="選擇日期" />    <p class="text-sm text-text-50">modelValue: {{ value ?? 'null' }}</p>  </div></template>

<script setup lang="ts">import { computed, ref } from 'vue'import { cn } from '@/lib/utils'import { AdminDatePicker } from '@/components/admin/date-picker'​interface TimeModel {  hours?: number  minutes?: number  seconds?: number}​function toTimeModel(h: number | null, m: number | null, s: number | null): TimeModel | undefined {  const norm = (v: unknown): number | null => {    if (v == null || v === '' || (typeof v === 'number' && Number.isNaN(v))) {      return null    }    return typeof v === 'number' ? v : Number(v)  }  const nh = norm(h)  const nm = norm(m)  const ns = norm(s)  if (nh == null && nm == null && ns == null) {    return undefined  }  const t: TimeModel = {}  if (nh != null) {    t.hours = nh  }  if (nm != null) {    t.minutes = nm  }  if (ns != null) {    t.seconds = ns  }  return t}​// withTime=true 時若 format 不含時間 token，round-trip 會把時間段截掉、stepper 看似動了又被 watch 拉回 0；// playground 自動補時間 token 避免此踩雷。function ensureTimeTokens(fmt: string, withTime: boolean, enableSeconds: boolean): string {  if (!withTime) {    return fmt  }  if (fmt.includes('H') || fmt.includes('h') || fmt.includes('m') || fmt.includes('s')) {    return fmt  }  return enableSeconds ? `${fmt} HH:mm:ss` : `${fmt} HH:mm`}​const FORMAT_PRESETS = [  'yyyy/MM/dd',  'dd/MM/yyyy',  'yyyy-MM-dd',  'yyyy/MM/dd HH:mm',  'yyyy/MM/dd HH:mm:ss']const LOCALES = ['zh-TW', 'en-US', 'ja-JP']​const formatPreset = ref('yyyy/MM/dd')const formatCustom = ref('')const withTime = ref(false)const enableSeconds = ref(false)const disabled = ref(false)const readonly = ref(false)const isError = ref(false)const locale = ref('zh-TW')const placeholder = ref('選擇日期')const minDate = ref<Date | null>(null)const maxDate = ref<Date | null>(null)const minHour = ref<number | null>(null)const minMinute = ref<number | null>(null)const minSecond = ref<number | null>(null)const maxHour = ref<number | null>(null)const maxMinute = ref<number | null>(null)const maxSecond = ref<number | null>(null)const value = ref<Date | string | number | null>(null)​const format = computed(() =>  ensureTimeTokens(    formatCustom.value.trim() || formatPreset.value,    withTime.value,    enableSeconds.value  ))const minTime = computed(() => toTimeModel(minHour.value, minMinute.value, minSecond.value))const maxTime = computed(() => toTimeModel(maxHour.value, maxMinute.value, maxSecond.value))</script>​<template>  <section class="w-full space-y-4 rounded-[8px] border border-text-20 bg-bg-90 p-6">    <div class="grid grid-cols-2 gap-x-4 gap-y-3">      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">format（preset）</span>        <select          v-model="formatPreset"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        >          <option v-for="opt in FORMAT_PRESETS" :key="opt" :value="opt">{{ opt }}</option>        </select>      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">format（自訂，非空覆蓋 preset）</span>        <input          v-model="formatCustom"          placeholder="留空使用 preset"          type="text"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        />      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">locale</span>        <select          v-model="locale"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        >          <option v-for="opt in LOCALES" :key="opt" :value="opt">{{ opt }}</option>        </select>      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">placeholder</span>        <input          v-model="placeholder"          type="text"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        />      </label>      <div class="flex flex-wrap items-center gap-3 typo-caption-small text-text-70">        <label class="inline-flex items-center gap-1">          <input v-model="withTime" type="checkbox" /> withTime        </label>        <label class="inline-flex items-center gap-1">          <input v-model="enableSeconds" type="checkbox" :disabled="!withTime" />          enableSeconds        </label>        <label class="inline-flex items-center gap-1">          <input v-model="disabled" type="checkbox" /> disabled        </label>        <label class="inline-flex items-center gap-1">          <input v-model="readonly" type="checkbox" /> readonly        </label>        <label class="inline-flex items-center gap-1">          <input v-model="isError" type="checkbox" /> isError        </label>      </div>      <div></div>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">minDate</span>        <admin-date-picker          v-model="minDate"          emit-as="date"          format="yyyy/MM/dd"          placeholder="無下限"        />      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">maxDate</span>        <admin-date-picker          v-model="maxDate"          emit-as="date"          format="yyyy/MM/dd"          placeholder="無上限"        />      </label>      <label v-if="withTime" class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">          minTime（時 / 分{{ enableSeconds ? ' / 秒' : '' }}）        </span>        <div class="flex items-center gap-1">          <input            v-model.number="minHour"            max="23"            min="0"            placeholder="hh"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />          <span class="text-text-60">:</span>          <input            v-model.number="minMinute"            max="59"            min="0"            placeholder="mm"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />          <template v-if="enableSeconds">            <span class="text-text-60">:</span>            <input              v-model.number="minSecond"              max="59"              min="0"              placeholder="ss"              type="number"              :class="                cn(`                  h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                  typo-content-medium text-text-70 outline-none                  focus:border-info-40                `)              "            />          </template>        </div>      </label>      <label v-if="withTime" class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">          maxTime（時 / 分{{ enableSeconds ? ' / 秒' : '' }}）        </span>        <div class="flex items-center gap-1">          <input            v-model.number="maxHour"            max="23"            min="0"            placeholder="hh"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />          <span class="text-text-60">:</span>          <input            v-model.number="maxMinute"            max="59"            min="0"            placeholder="mm"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />          <template v-if="enableSeconds">            <span class="text-text-60">:</span>            <input              v-model.number="maxSecond"              max="59"              min="0"              placeholder="ss"              type="number"              :class="                cn(`                  h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                  typo-content-medium text-text-70 outline-none                  focus:border-info-40                `)              "            />          </template>        </div>      </label>    </div>    <div class="border-t border-text-20 pt-4">      <admin-date-picker        v-model="value"        :disabled="disabled"        :enable-seconds="enableSeconds"        :format="format"        :is-error="isError"        :locale="locale"        :max-date="maxDate ?? undefined"        :max-time="maxTime"        :min-date="minDate ?? undefined"        :min-time="minTime"        :placeholder="placeholder"        :readonly="readonly"        :with-time="withTime"      />      <pre        :class="          cn(`            mt-2 max-h-32 overflow-auto rounded-md bg-bg-70 px-3 py-2 typo-caption-small            text-text-70          `)        "      >modelValue: {{ JSON.stringify(value) }}</pre>    </div>  </section></template>

<script setup lang="ts">import { computed, ref } from 'vue'import { cn } from '@/lib/utils'import { AdminDatePicker, AdminDatePickerRange } from '@/components/admin/date-picker'​interface TimeModel {  hours?: number  minutes?: number  seconds?: number}​function toTimeModel(h: number | null, m: number | null, s: number | null): TimeModel | undefined {  const norm = (v: unknown): number | null => {    if (v == null || v === '' || (typeof v === 'number' && Number.isNaN(v))) {      return null    }    return typeof v === 'number' ? v : Number(v)  }  const nh = norm(h)  const nm = norm(m)  const ns = norm(s)  if (nh == null && nm == null && ns == null) {    return undefined  }  const t: TimeModel = {}  if (nh != null) {    t.hours = nh  }  if (nm != null) {    t.minutes = nm  }  if (ns != null) {    t.seconds = ns  }  return t}​function ensureTimeTokens(fmt: string, withTime: boolean, enableSeconds: boolean): string {  if (!withTime) {    return fmt  }  if (fmt.includes('H') || fmt.includes('h') || fmt.includes('m') || fmt.includes('s')) {    return fmt  }  return enableSeconds ? `${fmt} HH:mm:ss` : `${fmt} HH:mm`}​const FORMAT_PRESETS = [  'yyyy/MM/dd',  'dd/MM/yyyy',  'yyyy-MM-dd',  'yyyy/MM/dd HH:mm',  'yyyy/MM/dd HH:mm:ss']const LOCALES = ['zh-TW', 'en-US', 'ja-JP']​const formatPreset = ref('yyyy/MM/dd')const formatCustom = ref('')const withTime = ref(false)const enableSeconds = ref(false)const disabled = ref(false)const readonly = ref(false)const isError = ref(false)const locale = ref('zh-TW')const startPlaceholder = ref('開始日期')const endPlaceholder = ref('結束日期')const separator = ref(' - ')const minDate = ref<Date | null>(null)const maxDate = ref<Date | null>(null)const minHour = ref<number | null>(null)const minMinute = ref<number | null>(null)const maxHour = ref<number | null>(null)const maxMinute = ref<number | null>(null)const value = ref<Date[]>([])​const format = computed(() =>  ensureTimeTokens(    formatCustom.value.trim() || formatPreset.value,    withTime.value,    enableSeconds.value  ))const minTime = computed(() => toTimeModel(minHour.value, minMinute.value, null))const maxTime = computed(() => toTimeModel(maxHour.value, maxMinute.value, null))</script>​<template>  <section class="w-full space-y-4 rounded-[8px] border border-text-20 bg-bg-90 p-6">    <div class="grid grid-cols-2 gap-x-4 gap-y-3">      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">format（preset）</span>        <select          v-model="formatPreset"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        >          <option v-for="opt in FORMAT_PRESETS" :key="opt" :value="opt">{{ opt }}</option>        </select>      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">format（自訂）</span>        <input          v-model="formatCustom"          placeholder="留空使用 preset"          type="text"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        />      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">locale</span>        <select          v-model="locale"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        >          <option v-for="opt in LOCALES" :key="opt" :value="opt">{{ opt }}</option>        </select>      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">separator</span>        <input          v-model="separator"          type="text"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        />      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">startPlaceholder</span>        <input          v-model="startPlaceholder"          type="text"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        />      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">endPlaceholder</span>        <input          v-model="endPlaceholder"          type="text"          :class="            cn(`              h-9 rounded-md border border-text-30 bg-bg-90 px-2 typo-content-medium text-text-70              outline-none              focus:border-info-40            `)          "        />      </label>      <div class="flex flex-wrap items-center gap-3 typo-caption-small text-text-70">        <label class="inline-flex items-center gap-1">          <input v-model="withTime" type="checkbox" /> withTime        </label>        <label class="inline-flex items-center gap-1">          <input v-model="enableSeconds" type="checkbox" :disabled="!withTime" />          enableSeconds        </label>        <label class="inline-flex items-center gap-1">          <input v-model="disabled" type="checkbox" /> disabled        </label>        <label class="inline-flex items-center gap-1">          <input v-model="readonly" type="checkbox" /> readonly        </label>        <label class="inline-flex items-center gap-1">          <input v-model="isError" type="checkbox" /> isError        </label>      </div>      <div></div>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">minDate</span>        <admin-date-picker          v-model="minDate"          emit-as="date"          format="yyyy/MM/dd"          placeholder="無下限"        />      </label>      <label class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">maxDate</span>        <admin-date-picker          v-model="maxDate"          emit-as="date"          format="yyyy/MM/dd"          placeholder="無上限"        />      </label>      <label v-if="withTime" class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">minTime（時 / 分）</span>        <div class="flex items-center gap-1">          <input            v-model.number="minHour"            max="23"            min="0"            placeholder="hh"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />          <span class="text-text-60">:</span>          <input            v-model.number="minMinute"            max="59"            min="0"            placeholder="mm"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />        </div>      </label>      <label v-if="withTime" class="flex flex-col gap-1 typo-content-medium text-text-70">        <span class="typo-caption-small text-text-50">maxTime（時 / 分）</span>        <div class="flex items-center gap-1">          <input            v-model.number="maxHour"            max="23"            min="0"            placeholder="hh"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />          <span class="text-text-60">:</span>          <input            v-model.number="maxMinute"            max="59"            min="0"            placeholder="mm"            type="number"            :class="              cn(`                h-9 w-14 rounded-md border border-text-30 bg-bg-90 px-2 text-center                typo-content-medium text-text-70 outline-none                focus:border-info-40              `)            "          />        </div>      </label>    </div>    <div class="border-t border-text-20 pt-4">      <admin-date-picker-range        v-model="value"        emit-as="date"        :disabled="disabled"        :enable-seconds="enableSeconds"        :end-placeholder="endPlaceholder"        :format="format"        :is-error="isError"        :locale="locale"        :max-date="maxDate ?? undefined"        :max-time="maxTime"        :min-date="minDate ?? undefined"        :min-time="minTime"        :readonly="readonly"        :separator="separator"        :start-placeholder="startPlaceholder"        :with-time="withTime"      />      <pre        :class="          cn(`            mt-2 max-h-32 overflow-auto rounded-md bg-bg-70 px-3 py-2 typo-caption-small            text-text-70          `)        "      >modelValue (length {{ value.length }}): {{          JSON.stringify(value.map((d) => d?.toString?.() ?? d))        }}</pre>    </div>  </section></template>

<script setup lang="ts">import { ref } from 'vue'import { AdminDatePicker } from '@/components/admin/date-picker'​const value = ref<Date | null>(null)</script>​<template>  <div class="flex w-full max-w-sm flex-col gap-2">    <admin-date-picker      v-model="value"      emit-as="date"      format="yyyy/MM/dd"      placeholder="選擇日期"      is-error    />  </div></template>

<script setup lang="ts">import { ref } from 'vue'import { AdminDatePickerRange } from '@/components/admin/date-picker'​const value = ref<Date[]>([])</script>​<template>  <div class="flex w-full max-w-md flex-col gap-2">    <admin-date-picker-range      v-model="value"      emit-as="date"      end-placeholder="結束日期"      format="yyyy/MM/dd"      start-placeholder="開始日期"      is-error    />  </div></template>