1.0.40 • Published 10 months ago

react-native-flexi-datepicker v1.0.40

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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:

PropTypeDefaultDescription
isVisibleboolean-Controls the visibility of the date picker.
onClosefunction-Callback function when the date picker is closed.
onDateChangefunction-Callback function when a date is selected. Receives the selected date as a string in 'YYYY-MM-DD' format.
initialDatestring | Date | Momentnew Date()Initial date to display when the picker opens.
minDatestring | Date | Moment'1900-01-01'Minimum selectable date.
maxDatestring | Date | Moment'2700-12-31'Maximum selectable date.
localeDataLocaleData-Custom locale data for internationalization.
cancelButtonstring'Cancel'Text for the cancel button.
okButtonstring'OK'Text for the OK button.
animationEnabledbooleantrueEnable/disable animations for month changes and transitions.
themePartialdefaultThemeCustom theme colors.
headerFormatstring'ddd, D MMM'Format for the header date display.
monthYearFormatstring'MMMM YYYY'Format for the month and year display.
customStylesobject-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.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. 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.
1.0.19

10 months ago

1.0.2

10 months ago

1.0.18

10 months ago

1.0.39

10 months ago

1.0.17

10 months ago

1.0.38

10 months ago

1.0.16

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.40

10 months ago

1.0.22

10 months ago

1.0.21

10 months ago

1.0.20

10 months ago

1.0.26

10 months ago

1.0.25

10 months ago

1.0.24

10 months ago

1.0.23

10 months ago

1.0.29

10 months ago

1.0.28

10 months ago

1.0.27

10 months ago

1.0.33

10 months ago

1.0.11

10 months ago

1.0.32

10 months ago

1.0.31

10 months ago

1.0.30

10 months ago

1.0.37

10 months ago

1.0.15

10 months ago

1.0.36

10 months ago

1.0.14

10 months ago

1.0.35

10 months ago

1.0.13

10 months ago

1.0.34

10 months ago

1.0.12

10 months ago

1.0.1

11 months ago

1.0.0

11 months ago