react-year-date-picker v0.2.1

React Year/Month Date Picker UI Library

This library provides a datepicker for selecting a year, month, or both!

Check out the Example Website https://mrbonk97.github.io/react-year-date-picker/

Example

Month Calendar

https://github.com/mrbonk97/react-year-picker-gogo/assets/60309133/633804dd-28fe-4abd-bfed-cbb56a6de788

Year Month Calendar

https://github.com/mrbonk97/react-year-picker-gogo/assets/60309133/cb108f33-9acb-40a3-a3ed-133ec78aa1dc

Installation

Install the library from your command line.

npm install react-year-date-picker

Usage

• year picker

import { useState } from "react";
import { DatePicker } from "react-year-date-picker";

function App() {
  const [year, setYear] = useState<number>();

  return (
    <DatePicker type="YEAR" year={year} setYear={setYear} />
  );
}

export default App;

• month picker

import { useState } from "react";
import { DatePicker } from "react-year-date-picker";

function App() {
  const [month, setMonth] = useState<number>();

  return (
    <DatePicker
      type="YEAR_MONTH"
      locale="ko-KR"
      month={month}
      setMonth={setMonth}
    />
  );
}

export default App;

• year-month picker

import { useState } from "react";
import { DatePicker, DatePickerType } from "react-year-date-picker";

function App() {
  const [date, setDate] =
    useState <
    DatePickerType >
    {
      year: undefined,
      month: undefined,
    };

  return <DatePicker type="YEAR_MONTH" date={date} setDate={setDate} />;
}

export default App;

API Reference

locale

new Date(2000, month - 1).toLocaleString(locale, { month: "long" });

Above is the code used in date picker

to set the correct locale, refer to the toLocaleString documentation for the appropriate locale format and pass it to the locale prop.