20 lines
1.3 KiB
JSON
20 lines
1.3 KiB
JSON
{
|
|
"name": "VDateTimePickerDemo",
|
|
"type": "registry:example",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"utils",
|
|
"button",
|
|
"popover",
|
|
"v-calendar"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "example/VDateTimePickerDemo.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n <Popover>\n <PopoverTrigger as-child>\n <Button\n :variant=\"'outline'\"\n :class=\"cn(\n 'w-[280px] justify-start text-left font-normal',\n !date && 'text-muted-foreground',\n )\"\n >\n <CalendarIcon class=\"mr-2 h-4 w-4\" />\n <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\">\n <Calendar v-model=\"date\" mode=\"datetime\" />\n </PopoverContent>\n </Popover>\n</template>\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|