/Javascript/React/React native calender date picker

React native calender date picker

//Prerequisits
/*
	1. expo install react-native-calendar-picker or yarn add react-native-calendar-picker
    2. yarn add moment //required
*/

//Example

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import CalendarPicker from 'react-native-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.toString() : '';
    return (
      <View style={styles.container}>
        <CalendarPicker
          onDateChange={this.onDateChange}
        />

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

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

Source: npmjs.com

Similar codes

1 vote207 views1 answer
React map array limit
Javascript React
2 votes226 views2 answers
Past value from parent in reactjs
Javascript React
0 vote225 views2 answers
React hook will mount
Javascript React
1 vote211 views1 answer
Rich editor react
Javascript React
0 vote203 views1 answer
Input hook react
Javascript React
1 vote216 views1 answer
Npm react dropdown
Javascript React
94 votes234 views6 answers
Install react router
Javascript React
0 vote197 views2 answers
Why we use react js
Javascript React
12 votes212 views3 answers
Font weight react native
Javascript React
48 votes216 views1 answer
Emmet not working react js
Javascript React