react-native-persian-calendar-modal/main/ChangeInitial.js

Persian Calendar Modal Component for React Native

import React, {useState, useEffect} from 'react';
import {View, Button, Text, Input, Item} from 'native-base';
var moment = require('moment-jalaali');
import {Touchable} from './Touchable';
import {CALENDARSHOW, SELECTMONTH, SELECTYEAR, GetMonths} from './helper';
import {persianCalendarCss} from './main.css';


const ChangeInitial = (props) => {

    const [error, setError] = useState(false);

    const selectMonth = (month) => {
        month = month.value;
        let miladiDay, miladiMonth, miladiYear, jalaiMonth, jalaliYear,jalaliDate,finalDate;
        try{
            if (props.initialDate._d) {
                miladiDay = props.initialDate.day();
                if(miladiDay===0){
                    miladiDay=1;
                }
                miladiMonth = props.initialDate.month();
                miladiYear = props.initialDate.year();
                miladiMonth = miladiMonth + 1;

                jalaliDate = moment(`${miladiYear.toString()}/${miladiMonth.toString()}/${miladiDay}`, 'YYYY/M/D').format('jYYYY/jMM/jDD');
                jalaiMonth=jalaliDate.split('/');
                jalaiMonth=jalaiMonth[1];
                jalaiMonth = parseInt(jalaiMonth);
            } else {
                jalaliDate = moment(props.initialDate, 'YYYY/M/D').format('jYYYY/jM/jD');
                jalaiMonth=jalaliDate.split('/');
                jalaiMonth=jalaiMonth[1];
            }

            if (jalaiMonth < month) { //must add month
                finalDate = moment(jalaliDate, 'jYYYY/jM/jD');
                finalDate = finalDate.add(month - jalaiMonth, 'jMonth').format('jYYYY/jMM/jDD');
            } else {
                finalDate =new moment(jalaliDate, 'jYYYY/jM/jD');
                finalDate = finalDate.subtract(jalaiMonth - month, 'jMonth').format('jYYYY/jMM/jDD');
            }
            moment(finalDate, 'jYYYY/jMM/jDD').format('YYYY/MM/DD');
            props.setInitialDate(moment(finalDate, 'jYYYY/jMM/jDD').format('YYYY/MM/DD'));
            props.changeCalendar(CALENDARSHOW);
        }catch (e) {
            console.log(e);
        }
    };

    const selectYear = (year) => {
        let miladiDay, miladiMonth, miladiYear, jalaiMonth, jalaliYear, jalaliDate, finalDate;
        try{
            console.log('try',props.initialDate);
            if (props.initialDate._d) {
                console.log('if');
                miladiDay = props.initialDate.day();
                if(miladiDay===0){
                    miladiDay=1;
                }
                miladiMonth = props.initialDate.month();
                miladiYear = props.initialDate.year();
                miladiMonth = miladiMonth + 1;

                jalaliDate = moment(`${miladiYear.toString()}/${miladiMonth.toString()}/${miladiDay}`, 'YYYY/M/D').format('jYYYY/jM/jD');
                let month=jalaliDate.split('/');
                month=month[1];
                let day=month[2];
                      finalDate=moment(`${year}/${month}/1`,'jYYYY/jMM/jDD').format('YYYY/MM/DD');
            }else{
                day = moment(props.initialDate, 'YYYY/MM/DD').format('jDD');
                month = moment(props.initialDate, 'YYYY/MM/DD').format('jMM');
                finalDate = moment(`${year}/${month}/1`,'jYYYY/jMM/jDD').format('YYYY/MM/DD');
            }
            props.setInitialDate(finalDate);
            props.changeCalendar(CALENDARSHOW);

        }catch (e) {
            setError(true);
            console.log('e',e)
        }
    };

    const monthRow = (item1, item2, index) => {
        return (
            <View style={persianCalendarCss.rowMonth} key={index}>
                <Touchable
                    style={persianCalendarCss.touchMonth}
                    onPress={selectMonth}
                    value={item1}>
                    <Text>
                        {item1.label}
                    </Text>
                </Touchable>

                <Touchable
                    style={persianCalendarCss.touchMonth}
                    onPress={selectMonth}
                    value={item2}
                >
                    <Text>
                        {item2.label}
                    </Text>
                </Touchable>
            </View>
        )
    };

    if (props.type === SELECTMONTH) {
        return (
            <View>
                {GetMonths().map((item, index) => {
                    if (index % 2 === 0) {
                        item1 = item;
                    } else {
                        return monthRow(item1, item, index);
                    }
                })}
            </View>
        )
    } else if (props.type === SELECTYEAR) {
        return(
            <Year
                selectYear={selectYear}
                error={error}
            />
        )
    }

};

export default ChangeInitial;

const Year = (props) => {

    const [value, setValue] = useState('');

    const handleChangeyear = (val) => {
        if (val.length <= 4) {
            setValue(val);
        }

    };

    const pressGoToYear = () => {
        props.selectYear(value);
    };
    return (
        <View style={persianCalendarCss.containerYear}>
            <View style={persianCalendarCss.viewYear1}>
                <Item style={persianCalendarCss.row}>
                    <Input
                        onChangeText={handleChangeyear}
                        keyboardType={"numeric"}
                        value={value}
                    />
                    <Button style={{height: '100%'}}
                            onPress={pressGoToYear}>
                        <Text>
                            برو به سال
                        </Text>
                    </Button>
                </Item>
            </View>
            {props.error?
                <View style={persianCalendarCss.viewErrorYear}>
                    <Text style={persianCalendarCss.textError}>سال معتبر نیست</Text>
                </View>

                :false
            }

        </View>
    )
};