tinysymphony / react-native-calendar-select Goto Github PK

View Code? Open in Web Editor NEW

306.0 9.0 97.0 2.88 MB

A component to select period from calendar like Airbnb

License: MIT License

JavaScript 82.38% Python 4.08% Java 3.11% Objective-C 10.42%

calendar select picker airbnb date react-native

react-native-calendar-select's Introduction

react-native-calendar-select

A date picker component like Airbnb. You can select a date period from the calendar modal.

Examples

iOS Examples

Android Examples

Usage

This component use moment.js to process date.

install from npm

npm install --save react-native-calendar-select

import in project

import Calendar from 'react-native-calendar-select';

constructor (props) {
  super(props);
  this.state = {
    startDate: new Date(2017, 6, 12),  
    endDate: new Date(2017, 8, 2)
  };
  this.confirmDate = this.confirmDate.bind(this);
  this.openCalendar = this.openCalendar.bind(this);
}
// when confirm button is clicked, an object is conveyed to outer component
// contains following property:
// startDate [Date Object], endDate [Date Object]
// startMoment [Moment Object], endMoment [Moment Object]
confirmDate({startDate, endDate, startMoment, endMoment}) {
  this.setState({
    startDate,
    endDate
  });
}
openCalendar() {
  this.calendar && this.calendar.open();
}
// in render function
render() {
  // It's an optional property, I use this to show the structure of customI18n object.
  let customI18n = {
    'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
    'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    'text': {
      'start': 'Check in',
      'end': 'Check out',
      'date': 'Date',
      'save': 'Confirm',
      'clear': 'Reset'
    },
    'date': 'DD / MM'  // date format
  };
  // optional property, too.
  let color = {
    subColor: '#f0f0f0'
  };
  return (
    <View>
      <Button title="Open Calendar" onPress={this.openCalendar}>
      <Calendar
        i18n="en"
        ref={(calendar) => {this.calendar = calendar;}}
        customI18n={customI18n}
        color={color}
        format="YYYYMMDD"
        minDate="20170510"
        maxDate="20180312"
        startDate={this.state.startDate}
        endDate={this.state.endDate}
        onConfirm={this.confirmDate}
      />
    </View>
  );
}

Properties

Property	Type	Default	Description
i18n	String	'en'	Language of the component, supports `en` / `zh` / `jp`.
customI18n	Object	{}	Customize text of the component, the structure of this object is shown in the example above.
color	Object	{}	Customize color.
format	string	'YYYY-MM-DD'	Define date format, you can also pass Date Object or Moment Object as props.
minDate	String / Object	-	Min date of calendar
maxDate	String / Object	-	Max date of calendar
startDate	String / Object	null	Start date of selection
endDate	String / Object	null	End date of selection
onConfirm	Function	-	Callback function when the period is confirmed, receives an object as only parameter, contains `startDate` / `endDate` / `startMoment` / `endMoment` four property.

Instance methods

Method	Description
cancel	Cancel modification of state and close modal
close	Close select modal
open	Open select modal
clear	Reset state of component
confirm	Confirm selection and close modal

LICENSE MIT

react-native-calendar-select's People

Contributors

Stargazers

Watchers

Forkers

kevinchappell sbhkin septiyanandika sunnypatel giraldezjorge py389172739 yaoshaojun heruijun ronindong nazartrynko rnfomin mycentrio fever324 pnktweb bachvanthe1994 mgufrone anyhua heyman333 ahmad2smile okusnadi sethcarrino zapsa ericklarac isholaomotayo gettydata hoangdoan267 nirobon xuanhescript sxqjsl loiclouvet olympikesofts drflax tranhuuthinhit takayukicho duydatpham cyclonecat blackholesoftware zhazihong shahbazmancho hs3 xuyazhong halinhrma reactnativeexample zakasnemo ilhantekir yitzikonoapps namlh1912 nattym harminder99 chenzhaobin sayyidisal yangzhaoguo olawlieto imchintan irontony shooksie jwthanh 7laria homedydev hoangtrucit dungphung kristoff2016 abhikumar22 txfyteen mpwind powerinthepocket song06971 barbarossusuz tnghia944 fabriciofilho digicard jagadesarjun jonaspereirar umrashrf bilibba pn-wiseverge dipacevik

react-native-calendar-select's Issues

Multiple dates

Great calendar, thanks for sharing. We are just wondering is it possible to have multiple dates that are not a consecutive range? Eg. 1st Jan, 20th Feb etc.

deprecated-react-native-listview

ListView has been removed from React Native please update repo

how to set the calendar default month show

if minDate='20180101' and startDate='20180611', calendar list default show 201801 view, how to set the list will be show 201806? anyone can help me ? Thank you

not selected to the end of year

and I have a question!
How can I scroll to months before, now it's default current month, thank you!

ListView Has been removed from React Native.

Calendar Crashes Application

When testing on my VMs, all goes out well.

When i generate a pkg using gradlew assembleRelease, the calendar crashes my application when the user rolls it down.

Any idea what can be happening?

Thanks for the help :)

Here my code:

<Calendar
        i18n="en"
        ref={(calendar) => {this.calendar = calendar;}}
        customI18n={customI18n}
        color={color}
        format="YYYYMMDD"
        minDate="20181221"
        maxDate="20191121"
        startDate={this.state.startDate}
        endDate={this.state.endDate}
        onConfirm={this.confirmDate}
      />

Please help me to fix it