Giter VIP home page Giter VIP logo

react-native-calendar-range-picker's Introduction

๐Ÿ‘† react-native-calendar-range-picker

platforms npm npm

A Simple react native calendar picker using Hooks.

demo-play

Install

yarn add react-native-calendar-range-picker

or

npm install react-native-calendar-range-picker --save

Usage

Select date range

import Calendar from "react-native-calendar-range-picker";

<View style={{ flex: 1 }}>
  <Calendar
    startDate="2020-05-05"
    endDate="2020-05-12"
    onChange={({ startDate, endDate }) => console.log({ startDate, endDate })}
  />
</View>;

Select single date

<View style={{ height: 600 }}>
  <Calendar startDate="2020-05-05" singleSelectMode onChange={(date) => console.log(date)} />
</View>

Props

Common props you may want to specify include:

Properties PropType Description
onChange func (Required) Handler which gets executed on day press including date data.(start, end or single date)
singleSelectMode boolean Only select single date. (default = false)
pastYearRange number Amount of months allowed to scroll to the past. (default = 1)
futureYearRange number Amount of months allowed to scroll to the future. (default = 2)
locale object Can be localized by adding custom locales to locale object.
startDate string(YYYY-MM-DD) Initially visible start date.
endDate string(YYYY-MM-DD) Initially visible end date.
initialNumToRender number FlatList initialNumToRender prop.(to protect slow initial render)(default = 7)
flatListProps FlatList Props FlatList all props.
isMonthFirst boolean Switch year and month order. (2021 April -> April 2021)
disabledBeforeToday boolean Disable select day before today.
disabledAfterToday boolean Disable select day after today.
style object Customize style.

Locale

const CUSTOM_LOCALE = {
    monthNames: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
    ],
    dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    today: 'Today',
    year: '', // letter behind year number -> 2020{year}
  }

<Calendar
  locale={CUSTOM_LOCALE}
  ...
/>;

Customize Style

<Calendar
  style={{
    container: {},
    monthContainer: {},
    weekContainer:{},
    monthNameText: {},
    dayNameText: {},
    dayText: {},
    dayTextColor: '#f7f7f7',
    holidayColor: 'rgba(0,0,0,0.5)',
    todayColor: 'blue',
    disabledTextColor: '#Hex',
    selectedDayTextColor: '#Hex',
    selectedDayBackgroundColor: '#Hex',
    selectedBetweenDayTextColor: '#Hex',
    selectedBetweenDayBackgroundTextColor: '#Hex',
  }}
  ...
/>;

License

MIT

react-native-calendar-range-picker's People

Contributors

dependabot[bot] avatar hrmnt avatar huurray avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.