custom-lib-datepicker

A simple, customizable React modal component. Easy to use, minimal setup, and lightweight.

Installation

npm install custom-lib-datepicker

or

yarn add custom-lib-datepicker

Usage

import React, { useState } from 'react';
import DatePicker from 'custom-lib-datepicker';
import 'custom-lib-datepicker/src/datePicker.css';

function App() {
  const [date, setDate] = useState(null);

  return (
    <div>
      <h2>Select your date:</h2>
      <DatePicker
        selected={date}
        onChange={(newDate) => setDate(newDate)}
        minAge={18}       // Optional: minimum age restriction
        yearRange={100}   // Optional: number of years to display
        placeholder="Choose a date"
      />
      <p>Selected date: {date ? date.toLocaleDateString() : 'None'}</p>
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------------- | -------- | --------------- | -------------------------------------------------------- | | selected | Date | null | The currently selected date | | onChange | function | — | Callback function called when a date is selected | | placeholder | string | 'Select date' | Placeholder text for the input | | minAge | number | null | (Optional) Minimum age restriction in years (e.g., 18) | | yearRange | number | 50 | Number of years to display in the dropdown | | className | string | '' | (Optional) Custom class name for styling |

Features

• Displays days from previous and next months for better context
• Month and year dropdown navigation
• Supports minAge restrictions (e.g., for birth dates)
• Fully customizable with your own CSS if needed

Styling

The components includes his own main style, please use the props to modify it and don't override the CSS. The component includes a default CSS file:

import 'custom-lib-datepicker/src/datePicker.css';

Repository

GitHub - Matpetitj/custom-lib-datePicker

License

MIT