Month Range Picker

1"use client";
2import * as React from "react";
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import { Button, buttonVariants } from "./button";
5import { cn } from "@/lib/utils";
6 
7const addMonths = (input: Date, months: number) => {
8    const date = new Date(input);
9    date.setDate(1);
10    date.setMonth(date.getMonth() + months);
11    date.setDate(Math.min(input.getDate(), getDaysInMonth(date.getFullYear(), date.getMonth() + 1)));
12    return date;
13};
14const getDaysInMonth = (year: number, month: number) => new Date(year, month, 0).getDate();
15 
16type Month = {
17    number: number;
18    name: string;
19    yearOffset: number;
20};
21 
22const MONTHS: Month[][] = [
23    [
24        { number: 0, name: "Jan", yearOffset: 0 },
25        { number: 1, name: "Feb", yearOffset: 0 },
26        { number: 2, name: "Mar", yearOffset: 0 },
27        { number: 3, name: "Apr", yearOffset: 0 },
28        { number: 0, name: "Jan", yearOffset: 1 },
29        { number: 1, name: "Feb", yearOffset: 1 },
30        { number: 2, name: "Mar", yearOffset: 1 },
31        { number: 3, name: "Apr", yearOffset: 1 },
32    ],
33    [
34        { number: 4, name: "May", yearOffset: 0 },
35        { number: 5, name: "Jun", yearOffset: 0 },
36        { number: 6, name: "Jul", yearOffset: 0 },
37        { number: 7, name: "Aug", yearOffset: 0 },
38        { number: 4, name: "May", yearOffset: 1 },
39        { number: 5, name: "Jun", yearOffset: 1 },
40        { number: 6, name: "Jul", yearOffset: 1 },
41        { number: 7, name: "Aug", yearOffset: 1 },
42    ],
43    [
44        { number: 8, name: "Sep", yearOffset: 0 },
45        { number: 9, name: "Oct", yearOffset: 0 },
46        { number: 10, name: "Nov", yearOffset: 0 },
47        { number: 11, name: "Dec", yearOffset: 0 },
48        { number: 8, name: "Sep", yearOffset: 1 },
49        { number: 9, name: "Oct", yearOffset: 1 },
50        { number: 10, name: "Nov", yearOffset: 1 },
51        { number: 11, name: "Dec", yearOffset: 1 },
52    ],
53];
54 
55type QuickSelector = {
56    label: string;
57    startMonth: Date;
58    endMonth: Date;
59    variant?: ButtonVariant;
60    onClick?: (selector: QuickSelector) => void;
61};
62 
63const QUICK_SELECTORS: QuickSelector[] = [
64    { label: "This year", startMonth: new Date(new Date().getFullYear(), 0), endMonth: new Date(new Date().getFullYear(), 11) },
65    { label: "Last year", startMonth: new Date(new Date().getFullYear() - 1, 0), endMonth: new Date(new Date().getFullYear() - 1, 11) },
66// … truncated