React-native-amazing-date-picker NPM

React Native Amazing Date Picker

A customizable date picker modal for React Native applications.

Installation

You can install react-native-amazing-date-picker via npm or Yarn:

npm install react-native-amazing-date-picker

or

yarn add react-native-amazing-date-picker

Example Preview

Here’s a preview of how the DatePickerModal looks when rendered:

showYear prop to true it unable the year column. Default view of the date picker modal.

Dependencies

This package requires the following dependencies:

react-native-modal: For the modal functionality.

Usage

Here is a simple example of how to use the DatePickerModal component in your React Native application:

<DatePickerModal
  isVisible={isModalVisible}
  onClose={() => setModalVisible(false)}
  date={isStartDate ? startDate : endDate}
  onChange={onChange}
  isStartDate={isStartDate}
  showYear={false} // To show only date and month
  modalContentStyle={{ height: 350 }} // Example custom style
  modalTitleStyle={{ color: "blue" }} // Example custom style
  selectionOverlayStyle={{ backgroundColor: "rgba(0,0,0,0.2)" }} // Example custom style
  buttonContainerStyle={{ justifyContent: "flex-end" }} // Example custom style
  cancelButtonStyle={{ backgroundColor: "red" }} // Example custom style
  confirmButtonStyle={{ backgroundColor: "green" }} // Example custom style
/>

Below is the complete example of how to use this component within a simple app:

import React, { useState } from "react";
import { View } from "react-native";
import { DatePickerModal } from "react-native-amazing-date-picker";

const App = () => {
  const [isModalVisible, setModalVisible] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
    setModalVisible(false);
  };

  const formattedDate = selectedDate.toLocaleDateString("en-US", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{formattedDate}</Text>
      {/* Your component code */}
      <TouchableOpacity
        style={styles.button}
        onPress={() => setModalVisible(!isModalVisible)}
      >
        <Text style={styles.buttonText}>Open Picker</Text>
      </TouchableOpacity>
      <DatePickerModal
        isVisible={isModalVisible}
        onClose={() => setModalVisible(false)}
        date={selectedDate}
        onChange={handleDateChange}
        isStartDate={true} // if you want to have two modal for different date then can handle with this prop
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20,
    backgroundColor: "#fff",
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  button: {
    backgroundColor: "skyblue",
    padding: 15,
    borderRadius: 5,
    marginBottom: 15,
    alignItems: "center",
  },
  text: {
    fontSize: 18,
    color: "#333",
    marginBottom: 20,
  },
});
export default App;