react-native-flexi-datepicker v1.0.40
react-native-flexi-datepicker
A highly customizable and flexible date picker component for React Native applications. This component provides a rich set of features and customization options to fit various design needs and use cases.
Features
- Fully customizable theme and styles
- Year picker with smooth scrolling
- Custom locale support for internationalization
- Animated transitions for a polished user experience
- Configurable date range (min and max dates)
- Customizable header and button text
- Support for custom day marking
- Swipeable months
- Accessibility support
Demo
Installation
npm install react-native-flexi-datepicker
# or
yarn add react-native-flexi-datepicker
Peer Dependencies
This package requires the following peer dependencies:
react (>= 17.0.0)
react-native (>= 0.60.0)
moment (>= 2.29.0)
react-native-calendars (>= 1.1284.0)
Make sure to install these in your project if they're not already present.
Usage
Here's a basic example of how to use the DatePicker
component:
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { DatePicker } from 'react-native-flexi-datepicker';
const App = () => {
const [isDatePickerVisible, setDatePickerVisible] = useState(false);
const [selectedDate, setSelectedDate] = useState('');
const showDatePicker = () => setDatePickerVisible(true);
const hideDatePicker = () => setDatePickerVisible(false);
const handleDateChange = (date) => {
setSelectedDate(date);
hideDatePicker();
};
return (
<View>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DatePicker
isVisible={isDatePickerVisible}
onClose={hideDatePicker}
onDateChange={handleDateChange}
initialDate={new Date()}
minDate="2020-01-01"
maxDate="2025-12-31"
theme={{
primary: '#007AFF',
background: '#FFFFFF',
text: '#000000',
}}
/>
</View>
);
};
export default App;
Props
Here's a detailed list of all available props for the DatePicker
component:
Prop | Type | Default | Description |
---|---|---|---|
isVisible | boolean | - | Controls the visibility of the date picker. |
onClose | function | - | Callback function when the date picker is closed. |
onDateChange | function | - | Callback function when a date is selected. Receives the selected date as a string in 'YYYY-MM-DD' format. |
initialDate | string | Date | Moment | new Date() | Initial date to display when the picker opens. |
minDate | string | Date | Moment | '1900-01-01' | Minimum selectable date. |
maxDate | string | Date | Moment | '2700-12-31' | Maximum selectable date. |
localeData | LocaleData | - | Custom locale data for internationalization. |
cancelButton | string | 'Cancel' | Text for the cancel button. |
okButton | string | 'OK' | Text for the OK button. |
animationEnabled | boolean | true | Enable/disable animations for month changes and transitions. |
theme | Partial | defaultTheme | Custom theme colors. |
headerFormat | string | 'ddd, D MMM' | Format for the header date display. |
monthYearFormat | string | 'MMMM YYYY' | Format for the month and year display. |
customStyles | object | - | Custom styles for various components of the date picker. |
LocaleData Interface
interface LocaleData {
abbr: string;
calendar: {
monthNames: string[];
monthNamesShort: string[];
dayNames: string[];
dayNamesShort: string[];
};
}
ThemeColors Interface
interface ThemeColors {
primary: string;
background: string;
text: string;
selectedText: string;
disabledText: string;
headerBackground: string;
yearText: string;
monthYearText: string;
buttonText: string;
todayText: string;
dayText: string;
dotColor: string;
selectedDotColor: string;
arrowColor: string;
monthTextColor: string;
indicatorColor: string;
}
Customization
Theme Customization
You can customize the appearance of the date picker by passing a theme object. Here's an example:
<DatePicker
// ... other props
theme={{
primary: '#007AFF',
background: '#F2F2F7',
text: '#1C1C1E',
selectedText: '#FFFFFF',
headerBackground: '#007AFF',
yearText: '#FFFFFF',
monthYearText: '#1C1C1E',
buttonText: '#007AFF',
}}
/>
Custom Styles
For more granular control over the component's appearance, you can use the customStyles
prop:
<DatePicker
// ... other props
customStyles={{
datePickerContainer: {
borderRadius: 20,
},
headerContainer: {
height: 100,
},
yearSelector: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
padding: 10,
borderRadius: 5,
},
// ... other custom styles
}}
/>
Localization
To use a custom locale, you can pass localeData
prop:
<DatePicker
// ... other props
localeData={{
abbr: 'fr',
calendar: {
monthNames: ['Janvier', 'Février', 'Mars', ...],
monthNamesShort: ['Jan', 'Fév', 'Mar', ...],
dayNames: ['Dimanche', 'Lundi', 'Mardi', ...],
dayNamesShort: ['Dim', 'Lun', 'Mar', ...],
},
}}
/>
Performance Considerations
The component uses useMemo
and useCallback
hooks to optimize performance and prevent unnecessary re-renders. Animations can be disabled for performance-critical applications by setting animationEnabled={false}
.
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.md file for details.
Acknowledgments
- Thanks to the
react-native-calendars
library for providing the base calendar component. - Inspired by material design and iOS date pickers.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago