Year Month Picker

Example

Select date

typescript

"use client"

import { useState } from "react";
import { YmPicker } from "year-month-picker";

export function Example() {
  const [ym, setYm] = useState<{ year: number | null; month: number | null }>({
    year: null,
    month: null,
  });

  return <YmPicker ym={ym} onSelect={setYm} />;
}

Installation

npm

npx install year-month-picker

Usecase

Integrate with headLessUI(shadcn.popover)

typescript

"use client";

import { useState } from "react";
import { YmPicker } from "year-month-picker";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function Example2Component() {
  const [ym, setYm] = useState<{ year: number | null; month: number | null }>({
    year: null,
    month: null,
  });

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant={"outline"} className="min-w-32">
          {ym.year && ym.month ? `${ym.year} · ${ym.month}` : "Select date"}
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <YmPicker
          ym={ym}
          onSelect={setYm}
          container={{ className: "border-none! w-full!" }}
        />
      </PopoverContent>
    </Popover>
  );
}

3 mode available

Select date

typescript

<YmPicker mode="year-month" />

API Reference

Props	Type	Default
mode	year-monthyearmonth	year-month
ym	{year: number \| null, month: number \| null }	-
onSelect	({year: number \| null, month: number \| null }) => void	-
message	string	Select date
container	React.HTMLAttributes<HTMLDivElement>	-
header	React.HTMLAttributes<HTMLDivElement>	-
yearGrid	React.HTMLAttributes<HTMLDivElement>	-
monthGrid	React.HTMLAttributes<HTMLDivElement>	-
button	React.HTMLAttributes<HTMLDivElement>	-

Customize

Fully customizable design with tailwindCSS

Customize it!

typescript

"use client";

import { useState } from "react";
import { YmPicker } from "year-month-picker";

export function Example() {
  const [ym, setYm] = useState<{ year: number | null; month: number | null }>({
    year: null,
    month: null,
  });

  return (
    <YmPicker
      ym={ym}
      onSelect={setYm}
      message="Customize it!"
      container={{ className: "bg-rose-50 rounded-lg" }}
      button={{
        className: "bg-rose-200 rounded-full text-rose-400",
      }}
    />
  );
}