@saksham-gupta-1024/react-native-custom-date-picker v1.0.2

react-native-custom-date-picker

The React Native Date Picker Library is a versatile and customizable date picker component for React Native applications. This library is designed to provide cross-platform support, enabling it to run seamlessly on both iOS and Android platforms. With various customization options, you can tailor the date picker to suit your application's design and functionality.

Screenshots

Works same way on both ios and android platform. | Day | Month | Year | Labels | | :------- |:------- | :------- | :--------- | |||||

Installation

To install this package with npm use following command inside project root directory

• If you are using npm use this

  npm i @saksham-gupta-1024/react-native-custom-date-picker

• If you are using yarn use this

  yarn add @saksham-gupta-1024/react-native-custom-date-picker

Features

• Cross-Platform Support

  The React Native Date Picker Library is compatible with both iOS and Android, ensuring a consistent user experience across different platforms.

• Fully Customizable

  Customize the date picker to match your application's visual style and requirements. You can modify various aspects, including:

  • Background color
  • Title
  • Formate etc...

• Three Main Date Formats

  This library offers three primary date formats based on the specified type prop:

  • Day (mode="day")

    Displays the date in the dd-mm-yyyy format.

  • Month (mode="month")

    Displays the date in the mm-yyyy format.

  • Year (mode="year")

    Displays the date in the yyyy format.

Usage/Examples

import React, { useState } from 'react';
import { Button, View } from 'react-native';
import DatePicker from 'react-native-custom-date-picker';

const Example = () => {
	const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

	const showDatePicker = () => {
		setDatePickerVisibility(true);
	};

	const hideDatePicker = () => {
		setDatePickerVisibility(false);
	};

	const handleSelect = (date) => {
		console.log('Selected Date: ', date);
		hideDatePicker();
	};

	const handleReset = (date) => {
		console.log('Reset Date: ', date);
		hideDatePicker();
	};

	return (
		<View>
			<Button title='Show Date Picker' onPress={showDatePicker} />
			<DatePicker
				isVisible={isDatePickerVisible}
				mode='year'
				startYear={2000}
				endYear={2050}
				defaultValue={2023}
				showTitle={true}
				onSelect={handleSelect}
				onReset={handleReset}
				onClose={hideDatePicker}
			/>
		</View>
	);
};

export default Example;

Props

Methods

Author

• @Saksham Gupta

Support

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

• For support, email or join our Slack channel.