https://github.com/nayojs/react-datetime-picker
React DateTime Picker is a robust and highly customizable date-time picker library for React applications. This component offers seamless integration with various UI designs, allowing developers to choose from a wide range of styling options or apply custom styles to match their projects' specific requirements.
https://github.com/nayojs/react-datetime-picker
styled-components typescript webpack
Last synced: 10 months ago
JSON representation
React DateTime Picker is a robust and highly customizable date-time picker library for React applications. This component offers seamless integration with various UI designs, allowing developers to choose from a wide range of styling options or apply custom styles to match their projects' specific requirements.
- Host: GitHub
- URL: https://github.com/nayojs/react-datetime-picker
- Owner: nayojs
- Created: 2024-05-27T16:11:16.000Z (about 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-08-14T02:04:38.000Z (almost 2 years ago)
- Last Synced: 2025-07-06T10:02:57.070Z (12 months ago)
- Topics: styled-components, typescript, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@nayojs/react-datetime-picker
- Size: 111 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React DateTime Picker
## Overview
[](https://badge.fury.io/js/@nayojs%2Freact-datetime-picker)
[](https://npmjs.org/package/@nayojs/react-datetime-picker)
React DateTime Picker is a robust and highly customizable date-time picker library for React applications. This component offers seamless integration with various UI designs, allowing developers to choose from a wide range of styling options or apply custom styles to match their projects' specific requirements.
## Installation
To install the library, use [npm](https://www.npmjs.com/package/@nayojs/react-datetime-picker):
```ruby
npm install @nayojs/react-datetime-picker
```
## Features
- **Date Selection:** Easily select dates using the intuitive date picker interface.
- **Time Selection:** Includes a time picker for selecting specific hours and minutes.
- **Calendar View:** Displays a fully interactive calendar for navigating through months and years.
- **Customizable Styles:** Override default styles with ease using CSS classes or a utility function for merging styles.
## Components
### 1. DatePicker
The `DatePicker` component combines the functionality of a calendar and time picker into a single component. It can be customized with styles and classes that are passed down to the `Calendar` and `TimePicker` components.
### 2. Calendar
The `Calendar` component provides a visual representation of a calendar where users can select a date. It is fully customizable, allowing developers to define the appearance of various parts of the calendar.
### 3. TimePicker
The `TimePicker` component allows users to select a specific time. Like the `Calendar`, it is highly customizable, with various style options for different elements.
## Usage
### DatePicker Example
Here’s a basic example of how to use the `DatePicker` component:
```jsx
import React from 'react';
import { DatePicker } from '@nayojs/react-datetime-picker';
function App() {
const selectDateHandler = (date) => {
console.log('Selected Date:', date);
};
const selectTimeHandler = (time) => {
console.log('Selected Time:', time);
};
return (
);
}
export default App;
```
### Calendar Example
To use the `Calendar` component independently:
```jsx
import React from 'react';
import { Calendar } from '@nayojs/react-datetime-picker';
function App() {
const selectDateHandler = (date) => {
console.log('Selected Date:', date);
};
return (
);
}
export default App;
```
### TimePicker Example
To use the `TimePicker` component independently:
```jsx
import React from 'react';
import { TimePicker } from '@nayojs/react-datetime-picker';
function App() {
const selectTimeHandler = (time) => {
console.log('Selected Time:', time);
};
return (
);
}
export default App;
```
### Custom Styling
The `DatePicker`, `Calendar`, and `TimePicker` components come with default styles, but you can easily override them by passing custom class names or styles.
#### Example: Custom Styles for DatePicker
```jsx
import React from 'react';
import { DatePicker } from '@nayojs/react-datetime-picker';
function App() {
const selectDateHandler = (date) => {
console.log('Selected Date:', date);
};
return (
);
}
export default App;
```
### Style Prop Options
For each component, you can override specific style classes and styles:
- **DatePicker**
- `containerClass`: Styles the main container of the date picker.
- `triggerClass`: Styles the trigger button/input.
- `calendarClasses`: Classes passed down to the Calendar component.
- `calendarStyles`: Styles passed down to the Calendar component.
- **Calendar**
- `containerClass`: Styles the main container of the calendar.
- `headerClass`: Styles the header of the calendar.
- `dateClass`: Styles individual date cells.
- `selectedDateClass`: Styles the selected date.
- `navigatorClass`: Styles the navigation buttons.
- **TimePicker**
- `containerClass`: Styles the main container of the time picker.
- `triggerClass`: Styles the trigger button/input.
- `timeContainerClass`: Styles the time selection container.
- `timeItemClass`: Styles each time option.
- `selectedTimeItemClass`: Styles the selected time option.
## Default Styles
The library provides default styles for all components. If you do not override these styles, the components will use the following defaults:
- [DatePicker Styles](src/components/DatePicker/styles/defaultStyles.ts)
- [Calendar Styles](src/components/Calendar/styles/defaultStyles.ts)
- [TimePicker Styles](src/components/timepicker/defaultStyles.ts)
## Advanced Usage
### Overriding Default Styles with Helper Function
To ensure that overriding a specific style doesn’t remove other default styles, use the `mergeStyles` utility function:
```jsx
import React from 'react';
import { DatePicker, mergeStyles } from '@nayojs/react-datetime-picker';
const customStyles = mergeStyles({
nayojsDatetimePickerContainer: 'background-color: blue;',
});
function App() {
const selectDateHandler = (date) => {
console.log('Selected Date:', date);
};
return (
);
}
export default App;
```
## Contribution
If you'd like to contribute to the project, please follow these guidelines:
1. Fork the repository.
2. Create a new branch.
3. Make your changes and commit them.
4. Push to your branch and submit a pull request.
## Show your support
If you find EduMeet helpful, please give us a star ⭐️ on GitHub! Your support is greatly appreciated and motivates us to keep improving the project.
## Author
:bust_in_silhouette: **RWUBAKWANAYO**
- GitHub: [https://github.com/RWUBAKWANAYO](https://github.com/RWUBAKWANAYO)
- LinkedIn: [https://www.linkedin.com/in/rwubakwanayo/](https://www.linkedin.com/in/rwubakwanayo/)
## 📝 License
React DateTime Picker is licensed under the MIT License. For more information, see the [LICENSE file](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt).