31

A simple and fully customizable React Native date range picker component

 4 years ago
source link: https://reactnativeexample.com/a-simple-and-fully-customizable-react-native-date-range-picker-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

rnv-date-range-picker

A simple and fully customizable React Native date range picker component.

Installing:

npm install rnv-date-range-picker

yarn add rnv-date-range-picker

Screenshot

rnv-date-range-picker

Prerequisites

CalendarPicker requires Moment JS.

npm install --save moment

Example

import moment from "moment";
import React, { useState } from "react";
import { SafeAreaView, StyleSheet, View, Text } from "react-native";
import DateRangePicker from "rnv-date-range-picker";

const App = () => {
  const [selectedRange, setRange] = useState({});
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <DateRangePicker
          onSelectDateRange={(range) => {
            setRange(range);
          }}
          responseFormat="YYYY-MM-DD"
          maxDate={moment()}
          minDate={moment().subtract(100, "days")}
        />
        <View style={styles.container}>
          <Text>first date: {selectedRange.firstDate}</Text>
          <Text>second date: {selectedRange.secondDate}</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 50,
  },
});

export default App;

CalendarPicker Props

Prop Type Description maxDate Moment() Optional. If you need to pass Max Date user can select, set this prop as a moment date minDate Moment() Optional. If you need to pass Min Date user can select, set this prop as a moment date responseFormat String Optional. Please refere the date formats here Moment Date Formats onSelectDateRange Method This will return a object with firstDate and lastDate

onSelectDateRange response

{
    firstDate: if you pass responseFormat it will be a formatted date, if not it will be a moment date
    lastDate: if you pass responseFormat it will be a formatted date, if not it will be a moment date
}

Run the sample app

cd example
npm install
npx react-native run-ios

GitHub

https://github.com/dilipchandima/rnv-date-range-picker


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK