A flexible and customizable date picker component for React applications.
Install the package using npm:
npm install toonba-react-date-picker-library
Import the DatePicker component and built in configuration and use it in your React application:
import React from 'react'
import { config, DatePicker } from 'toonba-react-date-picker-library'
function App() {
return (
<div>
<h1>Select a Date</h1>
<DatePicker minDate={config.minDate} maxDate={config.maxDate} customStyle={config.lightTheme} getData={yourCustomeFunction} inputReset={yourReset} />
</div>
)
}
The DatePicker component accepts the following props:
- minDate: Minimum selectable date (must be a Date object).
- maxDate: Maximum selectable date(must be a Date object).
- customeStyle: object containing custome Style
- getData : is the function that allow you to retrieve the date selected it will be a Date object
- inputReset : string that will allow you to reset the datePicker if you pass ''
In the config file you will find minDate en maxDate + 2 custome Style (dark and light mode), you can create your own custome style it must look like the one in config
const config = {
minDate: new Date('01.01.2020'),
maxDate: new Date('12.31.2025'),
lightTheme: {
borderRadius: '7px', // handle border-radius for focused input, calendar Wrapper, select input, current day
calendarWidth: '500px', // handle width of calandarWrapper
backgroundColor: 'white', // handle background color for callandar Wrapper, select and input
primaryColor: 'rgba(145, 175, 37, 0.3)',
primaryColorHover: 'rgba(145, 175, 37, 0.6)',
secondaryColor: 'rgba(192, 192, 192, 0.3)',
secondaryColorHover: 'rgba(192, 192, 192, 0.7)',
textColor: 'black',
inputBackground: 'white'
inputWidth: '200px'
},
darkTheme: {
borderRadius: '7px',
calendarWidth: '500px',
backgroundColor: ' #121212',
primaryColor: 'rgba(187, 134, 252, 0.5)',
primaryColorHover: 'rgba(187, 134, 252, 0.9)',
secondaryColor: 'rgba(192, 192, 192, 0.6)',
secondaryColorHover: 'rgba(255, 255, 255, 0.9)',
textColor: 'white',
inputBackground: 'rgba(192, 192, 192, 0.6)',
inputWidth: '200px'
}
}
Contributing Contributions, bug reports, and feature requests are welcome! Feel free to open an issue or submit a pull request on the GitHub repository.
License This project is licensed under the MIT License. See the LICENSE file for details.