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.

License

Simple DatePicker Calendar is open-source, licensed under the MIT License.

Contact

For inquiries or suggestions, feel free to submit Github Issue. Your feedback is invaluable. Thank you for using Simple DatePicker!