20 lines
1.7 KiB
JSON
20 lines
1.7 KiB
JSON
{
|
|
"name": "VDatePickerWithRange",
|
|
"type": "registry:example",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"utils",
|
|
"button",
|
|
"popover",
|
|
"v-calendar"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "example/VDatePickerWithRange.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 { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n start: new Date(2022, 0, 20),\n end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n <Popover>\n <PopoverTrigger as-child>\n <Button\n id=\"date\"\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\n <span>\n {{ date.start ? (\n date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n : format(date.start, 'LLL dd, y')\n ) : 'Pick a date' }}\n </span>\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\" align=\"start\">\n <Calendar\n v-model.range=\"date\"\n :columns=\"2\"\n />\n </PopoverContent>\n </Popover>\n </div>\n</template>\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|