React-mdp NPM | npm.io

React Modern Date Picker

Description

A modern date picker component for React applications.

Installation

To install the package, run:

npm install react-mdp

Peer Dependencies

This package has the following peer dependencies:

react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0

Make sure these are installed in your project.

Usage

Here is a simple example of how to use the date picker in your React component:

import React from 'react';
import DatePicker from 'react-mdp';

const App = () => {
    return (
        <div>
            <h1>Select a Date</h1>
            <DatePicker />
        </div>
    );
};

export default App;

You can also pass the date or range to control

 const [singleDate, setSingleDate] = useState<Date | null>(null);
  const [dateRange, setDateRange] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null
  });
  const [selectedPost, setSelectedPost] = useState<Post | null>(null);

  const handleSingleDateChange = (date: Date | null) => {
    setSingleDate(date);
    console.log('Selected date:', date);
  };

  const handleRangeChange = (range: { start: Date | null; end: Date | null }) => {
    setDateRange(range);
    console.log('Selected range:', range);
  };

   <h3>Single Date Picker</h3>
          <DatePicker
            selectedDate={singleDate || undefined}
            onDateChange={handleSingleDateChange}
            dateFormat="MM/dd/yyyy"
            placeholder="Select date..."
          />
        </div>

        <div>
          <h3>Range Date Picker</h3>
          <DatePicker
            isRange={true}
            onRangeChange={handleRangeChange}
            dateFormat="MM/dd/yyyy"
            placeholder="Select date range..."
          />
        </div>

DatePicker Component Properties

The DatePicker component accepts the following properties:

selectedDate (Date | undefined): The date that is currently selected. If not provided, it defaults to the current date.
onDateChange ((date: Date | null) => void): Callback function that is called when the date is changed. It receives the selected date as an argument.
isRange (boolean): If true, the date picker allows selection of a date range. Defaults to false.
onRangeChange ((range: { start: Date | null; end: Date | null }) => void): Callback function that is called when the date range is changed. It receives the start and end dates as an argument.
dateFormat (string): The format in which the date is displayed. Defaults to 'MM/dd/yyyy'.
placeholder (string): Placeholder text for the input field. Defaults to 'Select a date'.
selectionColor (string): The color used to highlight the selected date. Defaults to '#007bff'.
hoverColor (string): The color used when hovering over a date. Defaults to '#0056b3'.
className (string): Additional CSS classes to apply to the date picker component.
allowPastDate (boolean): If true, the date picker allows selection of past dates. Defaults to false.

Contributing

If you would like to contribute to this project, please follow these steps: 1. Fork the repository. 2. Create a new branch. 3. Make your changes. 4. Submit a pull request.