react-native-customized-datepicker

A cross platform fully customisable and advanced date picker with flexibility to customise variety options built on top of react-native-date-picker.

This is a React Native Customized Date Picker with following main features:

📱  Supports iOS, Android 🕑  3 different modes: Time, Date, DateTime 🎨  Fully Customizable

Requirements

• Xcode >= 11.6
• React Native >= 0.57.
• If using React Native 0.64, 0.64.2 or later must be used.
• If using Expo, SDK 42 or later must be used. If using Expo SDK 44, 44.0.4 or later must be used.

Installation

See github page for installation instructions.

Documentation

See github page for documentation and more info.

Examples

See github page for examples.

Props

| Prop | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------- | | date | The default or selected date [Required] | | visible | Boolean indicating datepicker visibility [Required] | | onConfirm | Callback function to get the date after user selects and click on confirm button [Required] | | onCancel | Callback function to dismiss datepicker after user clicks on cancel button [Required] | | backgroundColor | Background Color of the datepicker default to #FFFFFF [Optional] | | pickerTitle | Title of datepicker default to "Select Date" [Optional] | | pickerTitleColor | Text Color of title default to #000000 [Optional] | | cancelButtonText | Cancel button text default to "Cancel" [Optional] | | confirmButtonText | Confirm button text default to "Confirm" [Optional] | | confirmButtonBackground | Confirm button background color default to #0052CC [Optional] | | cancelButtonBackground | Cancel button background color default to #E0E1E4 [Optional] | | cancelButtonTextColor | Cancel button text color default to #000000 [Optional] | | confirmButtonTextColor | Confirm button text color default to #FFFFFF [Optional] | | cancelButtonBorderColor | Cancel button border color default to "transparent" [Optional] | | minimumDate | Minimum selectable date For Example : new Date("2004-09-12") [Optional] | | maximumDate | Maximum selectable date For Example : new Date("2022-01-31") default to today's date [Optional] | | androidVariant | Choose from 2 android style variants. "iosClone", "nativeAndroid" [Optional] | | modalAnimationType | Modal apperance animatiion choose from 3 animation variants "fade", "none" , "slide"; default to "slide" [Optional] | | theme | iOS 13+: The theme of the modal. "light", "dark", "auto". default to "auto". [Optional] | | mode | The date picker mode. "datetime", "date", "time" [Optional] | | cancelButtonStyle | Cancel Button Style [Optional] | | confirmButtonStyle | Confirm Button Style [Optional] | | buttonTextSize | Font Size for the buttons [Optional] | | modalHeight | Height for the datpicker[Optional] | | modalWidth | Width for the datepicker[Optional] |

Support this package!

If you like this package, consider giving it a github → star ⭐ Also, PR's are welcome!