lonare-react-date-picker

Lonare React Date Picker

A modern, customizable date picker component for React applications, built with Tailwind CSS. This component provides an intuitive interface for date selection with various configuration options.

Features

• 📅 Clean and intuitive interface
• 🎨 Styled with Tailwind CSS
• 📱 Responsive design
• 🔧 Highly customizable
• 🎯 Date range restrictions
• 🚀 Easy to implement
• ⚡ Lightweight

Installation

npm install lonare-react-date-picker

or with yarn:

yarn add lonare-react-date-picker

Prerequisites

This package requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "@heroicons/react": ">=2.0.0"
}

Make sure you have Tailwind CSS configured in your project.

Usage

import { DatePicker } from 'lonare-react-date-picker';

function App() {
  const handleDateChange = (date) => {
    console.log('Selected date:', date);
  };

  return (
    <DatePicker 
      setDate={handleDateChange}
      yearRange={{ before: 5, after: 5 }}
    />
  );
}

Props

Prop	Type	Default	Description
default_date	Date | string	new Date()	Initial date to display
align	'left' | 'right'	'left'	Alignment of the date picker dropdown
defaultYear	number	null	Pre-selected year
defaultMonth	number	null	Pre-selected month (0-11)
setDate	function	undefined	Callback function when date is selected
dateFuture	boolean	false	Only allow future dates
datePast	boolean	false	Only allow past dates
dateRangeStart	Date | string	null	Start date for range restriction
dateRangeEnd	Date | string	null	End date for range restriction
yearRange	object	{ before: 0, after: 5 }	Number of years to show before/after current year

Examples

Basic Usage

<DatePicker setDate={(date) => console.log(date)} />

With Date Range Restriction

<DatePicker 
  dateRangeStart="2023-01-01"
  dateRangeEnd="2024-12-31"
  setDate={(date) => console.log(date)}
/>

Future Dates Only

<DatePicker 
  dateFuture={true}
  setDate={(date) => console.log(date)}
/>

Custom Year Range

<DatePicker 
  yearRange={{ before: 10, after: 10 }}
  setDate={(date) => console.log(date)}
/>

Styling

The component uses Tailwind CSS classes for styling. You can override the default styles by wrapping the component in a parent element with custom Tailwind classes.

Browser Support

• Chrome (and Chromium based browsers)
• Firefox
• Safari
• Edge

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

• Fork the repository
• Create your feature branch (`git checkout -b feature/AmazingFeature`)
• Commit your changes (`git commit -m 'Add some AmazingFeature'`)
• Push to the branch (`git push origin feature/AmazingFeature`)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Lonare

• GitHub: @lonare
• npm: @lonare

Acknowledgments

• Built with React
• Styled with Tailwind CSS
• Icons from Heroicons

Changelog

1.0.0

• Initial release
• Basic date picker functionality
• Tailwind CSS styling
• Date range restrictions
• Year range customization

Support

If you like this project, please consider giving it a ⭐️ on GitHub!

For bugs and feature requests, please create an issue.

FAQ

How do I customize the styling?

The component uses Tailwind CSS classes which can be overridden using your project's Tailwind configuration.

Can I use this with Next.js?

Yes, the component is compatible with Next.js projects.

Does it support form libraries?

Yes, you can integrate it with form libraries like Formik or React Hook Form using the `setDate` prop.