React-simple-datepicker-calendar NPM

Simple DatePicker Calendar for React

Overview

Simple Datepicker is a date picker component for React. Select dates easily and customize the color scheme to fit your design needs. It will continually evolving to offer a variety of designs.

Features

☝️ Select any date.
🔢 Input a date manually.
👀 Browse previous or future months in current month.
🚚 Navigate quickly to a specific date.
☀️ Distinguish today's date from the selected date.

Installation

To install the Simple DatePicker Calendar in your React project, use the following command:

npm install react-simple-datepicker-calendar

Usage

import { useState } from 'react';
import { Calendar } from 'react-simple-datepicker-calendar';

function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (newDate: Date) => {
    setSelectedDate(newDate);
  };

  return (
    <Calendar
      calendarBackgroundColor="#252525"
      displayBackgroundColor="#252525"
      displayFontColor="#c5c5c5"
      dayFontColor="#899797"
      currentDateFontColor="#d5d5d5"
      prevNextDateFontColor="#899797"
      language="en"
      value={selectedDate}
      onChange={handleDateChange}
    />
  );
}

export default App;

Props

Prop Name	Type	Description	Default
calendarBackgroundColor	string	Background color of the entire calendar component.	'#252525'
displayBackgroundColor	string	Background color for the display area (e.g., month and year display).	'#252525'
displayFontColor	string	Font color for the display area, such as the selected date and year-month header.	'#c5c5c5'
dayFontColor	string	Font color for the day names (e.g., Sun, Mon) in the calendar.	'#899797'
currentDateFontColor	string	Font color for the current date in the calendar.	'#d5d5d5'
prevNextDateFontColor	string	Font color for the dates of the previous and next month.	'#899797'
language	'en'\|'ko'	Supported values are 'en' for English and 'ko' for Korean.	'en'
value	Date	The currently selected date.
onChange	(newDate: Date) => void	Language settings for the calendar. Function to call when the date is changed.

Planned Updates

Enhance Customization: Further customization options are in development. You'll soon be able to tailor the calendar to your preferences, including date format, start day, and more.