React-native-calendars: Allow to select year and month directly

[mogarick]

I'd like to use this component for all date related needs but it looks it is not a practical fit for selecting dates too far in the past such as birthdays since it doesn't have support to select directly month and year. Having to select a date in the 1970's, 1980's, etc. by manually navigating month by month is not UX/time saving friendly.
Is there any plans to allow to select directly year and month?

Thank you in advance for your attention.

[tautvilas]

Hi, currently such components are not being planned for this package. I would suggest you to implement your own year/month pickers using platform native combobox components. After user chooses year/month you can update current prop of <Calendar /> to allow user to interact with that month.

[mogarick]

Thank you for your answer @tautvilas.
I think it would be really great to integrate such kind of functionality in the calendar components.
I was using an awesome component (IMHO) called react-infinite-calendar by @clauderic.
Unfortunately it's not fully implemented yet for react native. There's only a partial implementation as a concept proof.
I started toward completing the React Native version but time is not on my side and that's why I needed to look elsewhere for a React Native solution and I found Wix React Native Calendars.
Maybe you can look at React Infinite Calendar and think about doing something similar or even joining forces with @clauderic for the CalendarList component. I'd like to know about what you think.

Meanwhile I'm gonna try to make some time to continue with my effort with Infinite Calendar or with your CalendarList component to add this functionality.

Thank you again for your attention. 👍

[bansalayush]

Hi @tautvilas @mogarick I have implemented an year list which appears on the click of year . You can select a particular year and navigate back to current month of that year . There are two props minYear and maxYear for Calendar component using which max and min year can be specified . If not then 1900 for min and current year for max will be set .
FInd the code here .
https://github.com/bansalayush/react-native-calendars/tree/feat/year-flow

I hope this helps

[naomipol]

@bansalayush The link you dropped to your code is not updated. Just couldn't find it!
Could you drop me an updated link? I'd love to use it, I'ts exactly what I need!
Thanks!

[bansalayush]

Will update the code over the weekend and post it back here . :)

[ducpt2]

@bansalayush can you share your code or suggest the way you do that?
This is awesome. Thank you alot.

[naomipol]

@ducpt2 I've implemented the above snippet:

First you need to apply the changes in this pull request to react-native-calendars.

Then use this code:

import { Calendar } from 'react-native-calendars';
import ReversedFlatList from 'react-native-reversed-flat-list';

const initYear = 1949;
const currentYear = Number((new Date()).getFullYear());
const years = Array(currentYear - initYear + 3).fill().map((v,i)=>i + 1);

// react-native-calendar + select year from list on press year in calendar header
export class CalendarWithList extends Component<any,any> {

    constructor(props) {
        super(props);

        this.state = {
            month: undefined,
            yearListVisible: false,
            current: this.props.current,
        }

        this.renderYear = this.renderYear.bind(this);

        this.onPressYear = this.onPressYear.bind(this);
        this.onPressHeader = this.onPressHeader.bind(this);

    }

    componentWillReceiveProps(nextProps) {
        if(this.props.current !== nextProps.current) {
            this.setState({current: nextProps.current})
        }
    }

    renderYear({item}) {
        const year = initYear + item;

        return <TouchableOpacity
                    onPress={() => this.onSelectYear(year)}
                    style={{height: 50, alignItems: 'center'}}>
                    <Text>{year}</Text>
               </TouchableOpacity>
    }

    onPressYear(month) {

        const current = month.toString('yyyy-MM-dd');
        this.setState({
            yearListVisible: true,
            month,
            current
        })

    }

    onPressHeader() {

        this.setState({
            yearListVisible: false,
        })

    }

    onSelectYear(year) {

        this.setState(({month}) => {
            month.setFullYear(year);
            const current = month.toString('yyyy-MM-dd');
            return {
                yearListVisible: false,
                current
            }
        })

    }

    render() {
        const { yearListVisible, month } = this.state;
        const themeForMonth = {
            textMonthFontFamily: 'System',
            textMonthFontWeight: '300',
            textMonthFontSize: 16,
            ...this.props.theme
        };
        return yearListVisible ?
            <View style={[{flex: 1}, this.props.style]}>
                <View style={{padding: 10, height: 45, justifyContent: 'center'}}>
                <TouchableOpacity onPress={this.onPressHeader} style={{alignItems: 'center'}}>
                        <Text style={{
                            fontSize: themeForMonth.textMonthFontSize,
                            fontFamily: themeForMonth.textMonthFontFamily,
                            fontWeight: themeForMonth.textMonthFontWeight,
                            color: themeForMonth.monthTextColor || themeForMonth.textDefaultColor || '#2d4150'}}>
                        {month.toString('MMMM yyyy')}
                        </Text>
                    </TouchableOpacity>
                </View>
                <ReversedFlatList
                    style={{marginTop: 5, maxHeight: 270}}
                    data={years}
                    keyExtractor={item => item}
                    renderItem={this.renderYear}
                />
                </View> :
                <Calendar {...this.props}
                    current={this.state.current}
                    onPressYear={this.onPressYear}
                />
    }

Hope it helps