react-native-jalali-calendar-picker

    0.2.6 • Public • Published

    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:

    • Date picker grid
    • Single selection
    • Multi selection

    Please refer to the original author's README (https://github.com/stephy/CalendarPicker) for more options and examples.

    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

    Prop Type Description
    weekdays Array Optional. List of week days. Eg. ['Mon', 'Tue', ...] Must be 7 days
    months Array Optional. List of months names. Eg. ['Jan', 'Feb', ...] Must be 12 months
    startFromMonday Boolean Optional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is false
    allowRangeSelection Boolean Optional. Allow to select date ranges. Default is false
    previousTitle String Optional. Title of button for previous month. Default is Previous
    nextTitle String Optional. Title of button for next month. Default is Next
    selectedDayColor String Optional. Color for selected day
    selectedDayTextColor String Optional. Text color for selected day
    todayBackgroundColor String Optional. Background color for today. Default is #cccccc
    textStyle Object Optional. Style overall text. Change fontFamily, color, etc.
    scaleFactor Number Optional. Default (375) scales to window width
    minDate Date Optional. Specifies minimum date to be selected
    maxDate Date Optional. Specifies maximum date to be selected
    initialDate Date Optional. Date that calendar opens to. Defaults to today.
    width Number Optional. Width of CalendarPicker's container. Defaults to Dimensions width.
    height Number Optional. 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

    Install

    npm i react-native-jalali-calendar-picker

    DownloadsWeekly Downloads

    32

    Version

    0.2.6

    License

    GPLv3

    Last publish

    Collaborators

    • afshinmeh