rnc

react-native-calendar-select-elara

A component to select period from calendar like Airbnb

Showing:

Popularity

Downloads/wk

10

GitHub Stars

288

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-calendar-select Build Status Coverage Status

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

Features added by elara Spanish language support ('es')

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

PropertyTypeDefaultDescription
i18nString'en'Language of the component, supports en / zh / jp.
customI18nObject{}Customize text of the component, the structure of this object is shown in the example above.
colorObject{}Customize color.
formatstring'YYYY-MM-DD'Define date format, you can also pass Date Object or Moment Object as props.
minDateString / Object-Min date of calendar
maxDateString / Object-Max date of calendar
startDateString / ObjectnullStart date of selection
endDateString / ObjectnullEnd date of selection
onConfirmFunction-Callback function when the period is confirmed, receives an object as only parameter, contains startDate / endDate / startMoment / endMoment four property.

Instance methods

MethodDescription
cancelCancel modification of state and close modal
closeClose select modal
openOpen select modal
clearReset state of component
confirmConfirm selection and close modal

LICENSE MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100