rn-wheel-scroll-date-input-picker

A sleek, scrollable date picker for React Native that allows users to easily select or input dates through a customizable text input field. Designed for flexibility and seamless integration, with options to personalize colors and styles to fit any app's design.

Installation

To install the package, run:

npm install rn-wheel-scroll-date-input-picker

Or using Yarn:

yarn add rn-wheel-scroll-date-input-picker

Usage

Here's how you can use rn-wheel-scroll-date-input-picker in your project:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import RnDateInputPicker from 'rn-wheel-scroll-date-input-picker';

const App = () => {
   const [showDateModal, setShowDateModal] = useState(false);
   const [newdate, setNewDate] = useState(new Date());
   const closeModal = () => {
    setShowDateModal(false);
   };

  const onSelected = values => {
    setNewDate(values.date);
  };

  return (
    <View>
      <Button title="Select Date" onPress={() => setShowDateModal(true)} />
       <RnDateInputPicker
        lastYear="1900"
        defaultDate={newdate} // 2024-09-09T11:33:40.097Z
        visible={showDateModal} // show Modal
        closeModal={closeModal} // close Modal
        onSelected={onSelected} // seleted Date
      />
    </View>
  );
};

export default App;

Props

| Prop Name | Type | Default | Description | | ---------------------- | ---------- | ------------ | ----------------------------------------------------------------------------------------------------------------- | | lastYear | string | "1900" | The minimum year limit that can be selected in the date picker. | | defaultDate | Date | new Date() | The default date that will be selected when the date picker opens. Pass a JavaScript Date object. | | visible | boolean | false | Controls the visibility of the date picker modal. Set true to show the modal, and false to hide it. | | closeModal | function | null | Callback function that closes the modal. Typically passed as a function to hide the modal. | | onSelected | function | null | Callback function triggered when a date is selected. The selected date is passed as a parameter to this function. | | btnColor | string | #000 | Defines the background color of the action button (e.g., "Confirm" or "Cancel"). Accepts a valid color string. | | activeTextColor | string | #000 | Defines the text color for the currently selected date. Accepts a valid color string. | | highlightBorderWidth | number | 1 | Specifies the width of the border used to highlight the selected date. Accepts a number value for pixel width. |