Dips Package

Component From Dipstrategy.

Installation

To install the package, run the following command:

npm install dipstrategy-package

Or, if you are using Yarn:

yarn add dipstrategy-package

Peer Dependencies

This package requires the following peer dependencies:

react-native: ^0.76.3
react: 18.3.1

Make sure these dependencies are installed in your project.

Usage

Import the Component After installing the package, you can import the component into your React Native project:

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { DateTimePickerComponent } from 'dipstrategy-package';

Example: Using DateTimePickerComponent You can now use the DateTimePickerComponent in your application. Here's an example of how to integrate it:

const MyApp = () => {
  const [startDate, setStartDate] = useState(new Date());

  const handleStartDateChange = (event, selectedDate) => {
    const currentDate = selectedDate || startDate;
    setStartDate(currentDate);
  };

  return (
    <View>
      <Text>Select Start Date</Text>
      <DateTimePickerComponent
        StartDate={startDate}
        onStartDateChange={handleStartDateChange}
        style={styles}
      />
    </View>
  );
};

export default MyApp;

Custom Styling

You can pass a style prop to customize the appearance of the DateTimePickerComponent. The style prop can accept the following styles:

container: The outer container of the picker (e.g., margins, padding).
label: The label text for the date picker.
datePicker: The main date picker itself (e.g., height, width).
dateInput: The input field where the selected date is displayed (e.g., background color, border).

Example of custom styling:

<DateTimePickerComponent
  StartDate={startDate}
  onStartDateChange={handleStartDateChange}
  style={{
    container: { marginTop: 20, padding: 20 },
    label: { fontSize: 18, color: 'blue' },
    datePicker: { height: 60, width: 200 },
    dateInput: { backgroundColor: '#e0e0e0' },
  }}
/>

Props

| Prop | Type | Description | |---------------------|-----------|-----------------------------------------------------------------| | StartDate | Date | The selected date value (default is new Date()). | | onStartDateChange | function| A function that handles the date change (returns the selected date). | | style | object | Custom styles to modify the appearance of the picker. |

License

This package is licensed under the MIT License.