NuxtUIのUFormにDatePickerを配置する

入力フォームに日付項目が必要になることは多いです。でもってDatePickerは必須です。 NuxtUIにも、DatePickerが用意されていました。 動きませんTT どうして?? 

というか、これ、UDatePickerじゃないですよね; v-calendarのDatePickerをラップしたMyDatePickerを作成して、それを使用するときには、さらにUPopover内に設置しましょう!という説明です。ん?わたしが欲しいのは、UFormGroup直下に配置できるUDatePickerなのですが...

NuxtUIドキュメントのDatePickerに関する説明はいろいろ混乱を招くので完全に余計でむしろない方が良い気がします。 なぜなら、v-calendarのDatePickerには、それ自身にPopoverを処理する機能もあって、どちらを使うの?を迷います。 いろいろ試した結果、下記のようなコードでv-calendarのDatePickerを直接配置することはできました。

<script lang="ts" setup>
    import { DatePicker as VDatePicker } from 'v-calendar'
    import 'v-calendar/style.css'
    …
</script>
<template>
    <div class="md:flex mt-4" >
        <UForm :schema="schema" :state="state" class="space-y-4 w-full" @submit="onSubmit" >
    … 
            <UFormGroup label="掲載開始日" name="publicationStart" class="w-full">
                <VDatePicker v-model="state.publicationStart">
                    <template #default="{ inputValue, inputEvents }">
                        <UInput :value="inputValue" v-on="inputEvents" />
                    </template>
                </VDatePicker>
            </UFormGroup>
    … 
<template>

しかし、Componentの関連を理解して使用しているという状況からはほど遠い気がします。 単に馴染んでいないという理由以上の混乱を感じます。いや、ただPopoverになじんでないだけなのか。

登録:2024-12-18 02:13
更新:2024-12-18 23:41
by nasu38yen
Copyright (C) 2014 Stadio Peace All Rights Reserved.