22 lines
9.1 KiB
JSON
22 lines
9.1 KiB
JSON
{
|
|
"name": "DatePickerWithIndependentMonths",
|
|
"type": "registry:example",
|
|
"dependencies": [
|
|
"reka-ui"
|
|
],
|
|
"registryDependencies": [
|
|
"utils",
|
|
"button",
|
|
"popover",
|
|
"range-calendar"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "example/DatePickerWithIndependentMonths.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n RangeCalendarCell,\n RangeCalendarCellTrigger,\n RangeCalendarGrid,\n RangeCalendarGridBody,\n RangeCalendarGridHead,\n RangeCalendarGridRow,\n RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n CalendarDate,\n type DateValue,\n isEqualMonth,\n} from '@internationalized/date'\nimport {\n Calendar,\n ChevronLeft,\n ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n start: new CalendarDate(2022, 1, 20),\n end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n createMonth({\n dateObj: placeholder.value,\n locale: locale.value,\n fixedWeeks: true,\n weekStartsOn: 0,\n }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n createMonth({\n dateObj: secondMonthPlaceholder.value,\n locale: locale.value,\n fixedWeeks: true,\n weekStartsOn: 0,\n }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n if (reference === 'first') {\n placeholder.value = placeholder.value.add({ months })\n }\n else {\n secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n months,\n })\n }\n}\n\nwatch(placeholder, (_placeholder) => {\n firstMonth.value = createMonth({\n dateObj: _placeholder,\n weekStartsOn: 0,\n fixedWeeks: false,\n locale: locale.value,\n })\n if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n months: 1,\n })\n }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n secondMonth.value = createMonth({\n dateObj: _secondMonthPlaceholder,\n weekStartsOn: 0,\n fixedWeeks: false,\n locale: locale.value,\n })\n if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n <Popover>\n <PopoverTrigger as-child>\n <Button\n variant=\"outline\"\n :class=\"\n cn(\n 'w-[280px] justify-start text-left font-normal',\n !value && 'text-muted-foreground',\n )\n \"\n >\n <Calendar class=\"mr-2 h-4 w-4\" />\n <template v-if=\"value.start\">\n <template v-if=\"value.end\">\n {{\n formatter.custom(toDate(value.start), {\n dateStyle: \"medium\",\n })\n }}\n -\n {{\n formatter.custom(toDate(value.end), {\n dateStyle: \"medium\",\n })\n }}\n </template>\n\n <template v-else>\n {{\n formatter.custom(toDate(value.start), {\n dateStyle: \"medium\",\n })\n }}\n </template>\n </template>\n <template v-else>\n Pick a date\n </template>\n </Button>\n </PopoverTrigger>\n <PopoverContent class=\"w-auto p-0\">\n <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n <div\n class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n >\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex items-center justify-between\">\n <button\n :class=\"\n cn(\n buttonVariants({ variant: 'outline' }),\n 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n )\n \"\n @click=\"updateMonth('first', -1)\"\n >\n <ChevronLeft class=\"h-4 w-4\" />\n </button>\n <div :class=\"cn('text-sm font-medium')\">\n {{\n formatter.fullMonthAndYear(\n toDate(firstMonth.value),\n )\n }}\n </div>\n <button\n :class=\"\n cn(\n buttonVariants({ variant: 'outline' }),\n 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n )\n \"\n @click=\"updateMonth('first', 1)\"\n >\n <ChevronRight class=\"h-4 w-4\" />\n </button>\n </div>\n <RangeCalendarGrid>\n <RangeCalendarGridHead>\n <RangeCalendarGridRow>\n <RangeCalendarHeadCell\n v-for=\"day in weekDays\"\n :key=\"day\"\n class=\"w-full\"\n >\n {{ day }}\n </RangeCalendarHeadCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridHead>\n <RangeCalendarGridBody>\n <RangeCalendarGridRow\n v-for=\"(\n weekDates, index\n ) in firstMonth.rows\"\n :key=\"`weekDate-${index}`\"\n class=\"mt-2 w-full\"\n >\n <RangeCalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <RangeCalendarCellTrigger\n :day=\"weekDate\"\n :month=\"firstMonth.value\"\n />\n </RangeCalendarCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridBody>\n </RangeCalendarGrid>\n </div>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex items-center justify-between\">\n <button\n :class=\"\n cn(\n buttonVariants({ variant: 'outline' }),\n 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n )\n \"\n @click=\"updateMonth('second', -1)\"\n >\n <ChevronLeft class=\"h-4 w-4\" />\n </button>\n <div :class=\"cn('text-sm font-medium')\">\n {{\n formatter.fullMonthAndYear(\n toDate(secondMonth.value),\n )\n }}\n </div>\n\n <button\n :class=\"\n cn(\n buttonVariants({ variant: 'outline' }),\n 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n )\n \"\n @click=\"updateMonth('second', 1)\"\n >\n <ChevronRight class=\"h-4 w-4\" />\n </button>\n </div>\n <RangeCalendarGrid>\n <RangeCalendarGridHead>\n <RangeCalendarGridRow>\n <RangeCalendarHeadCell\n v-for=\"day in weekDays\"\n :key=\"day\"\n class=\"w-full\"\n >\n {{ day }}\n </RangeCalendarHeadCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridHead>\n <RangeCalendarGridBody>\n <RangeCalendarGridRow\n v-for=\"(\n weekDates, index\n ) in secondMonth.rows\"\n :key=\"`weekDate-${index}`\"\n class=\"mt-2 w-full\"\n >\n <RangeCalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <RangeCalendarCellTrigger\n :day=\"weekDate\"\n :month=\"secondMonth.value\"\n />\n </RangeCalendarCell>\n </RangeCalendarGridRow>\n </RangeCalendarGridBody>\n </RangeCalendarGrid>\n </div>\n </div>\n </RangeCalendarRoot>\n </PopoverContent>\n </Popover>\n</template>\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|