rnj
react-native-jalali-calendar-picker
npm i react-native-jalali-calendar-picker
rnj

react-native-jalali-calendar-picker

CalendarPicker Component for React Native (Jalali version)

by Afshin Mehrabani

0.2.6 (see all)License:GPLv3TypeScript:Not Found
npm i react-native-jalali-calendar-picker
Readme

react-native-jalali-calendar-picker

This is the Jalali (and Farsi) version of "react-native-calendar-picker" (https://github.com/stephy/CalendarPicker), Calendar Picker Component for React Native

I have tried to cast the Date object to moment-jalali (https://github.com/jalaali/moment-jalaali) but this is somehow ugly.

It was a 5-hour work and there are still many issues (i.e minDate and maxDate does not work properly and might raise error)

Following features work at the moment:

alt tag

To use the calendar you just need to:

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

How to use it

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import JalaliCalendarPicker from 'react-native-jalali-calendar-picker';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedStartDate: null,
    };
    this.onDateChange = this.onDateChange.bind(this);
  }

  onDateChange(date) {
    this.setState({
      selectedStartDate: date,
    });
  }
  render() {
    const { selectedStartDate } = this.state;

    const startDate = selectedStartDate ? selectedStartDate.format('jYYYY/jM/jD [is] YYYY/M/D') : '';

    return (
      <View style={styles.container}>
        <JalaliCalendarPicker
          onDateChange={this.onDateChange}
        />

        <View>
          <Text>SELECTED DATE:{ startDate }</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    marginTop: 100,
  },
});

JalaliCalendarPicker Props

PropTypeDescription
weekdaysArrayOptional. List of week days. Eg. ['Mon', 'Tue', ...] Must be 7 days
monthsArrayOptional. List of months names. Eg. ['Jan', 'Feb', ...] Must be 12 months
startFromMondayBooleanOptional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is false
allowRangeSelectionBooleanOptional. Allow to select date ranges. Default is false
previousTitleStringOptional. Title of button for previous month. Default is Previous
nextTitleStringOptional. Title of button for next month. Default is Next
selectedDayColorStringOptional. Color for selected day
selectedDayTextColorStringOptional. Text color for selected day
todayBackgroundColorStringOptional. Background color for today. Default is #cccccc
textStyleObjectOptional. Style overall text. Change fontFamily, color, etc.
scaleFactorNumberOptional. Default (375) scales to window width
minDateDateOptional. Specifies minimum date to be selected
maxDateDateOptional. Specifies maximum date to be selected
initialDateDateOptional. Date that calendar opens to. Defaults to today.
widthNumberOptional. Width of CalendarPicker's container. Defaults to Dimensions width.
heightNumberOptional. Height of CalendarPicker's container. Defaults to Dimensions height.

Styles

Some styles will overwrite some won't. For instance:

  • If you provide textStyle with fontFamily and color, out of ranges dates will not apply your color, just fontFamily.

Order of precedence:

  • defaultColor => textStyle => selectedDayColor
  • defaultTodayBackgroundColor => todayBackgroundColor
  • defaultBackgroundColor => selectedDayColor
  • defaultTextStyles => textStyle => selectedDayTextColor

Mutli select

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import JalaliCalendarPicker from 'react-native-calendar-picker';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedStartDate: null,
      selectedEndDate: null,
    };
    this.onDateChange = this.onDateChange.bind(this);
  }

  onDateChange(date, type) {
    if (type === 'END_DATE') {
      this.setState({
        selectedEndDate: date,
      });
    } else {
      this.setState({
        selectedStartDate: date,
        selectedEndDate: null,
      });
    }
  }

  render() {
    const { selectedStartDate, selectedEndDate } = this.state;
    const startDate  =  selectedStartDate ? selectedStartDate.format('jYYYY/jM/jD [is] YYYY/M/D') : '';
    const endDate = selectedEndDate ? selectedEndDate.format('jYYYY/jM/jD [is] YYYY/M/D') : '';

    return (
      <View style={styles.container}>
        <JalaliCalendarPicker
          allowRangeSelection={true}
          todayBackgroundColor="#f2e6ff"
          selectedDayColor="#7300e6"
          selectedDayTextColor="#FFFFFF"
          onDateChange={this.onDateChange}
        />

        <View>
          <Text>SELECTED START DATE:{ startDate }</Text>
          <Text>SELECTED END DATE:{ endDate }</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    marginTop: 100,
  },
});

Suggestions?

Open Issues. Submit PRs.

Running on device

npm start

Running on iOS Simulator

npm run ios

Downloads/wk

7

GitHub Stars

32

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

17

OPEN ISSUES

4

OPEN PRs

2
VersionTagPublished
0.2.6
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial