/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

2 votes367 views1 answer
What is virtual dom in react
Javascript React
0 vote392 views1 answer
How to send data to another page in react from button
Javascript React
0 vote404 views1 answer
Github create react app buildpack
Javascript React
0 vote391 views2 answers
How to render a component multiple times in react
Javascript React
0 vote377 views1 answer
Edit json text react
Javascript React
0 vote385 views1 answer
Assign random colors react chartjs
Javascript React
0 vote371 views1 answer
React native set variable key in loop
Javascript React
0 vote362 views1 answer
How to only register one click on nested component and not parent component in react js
Javascript React
24 votes342 views6 answers
React native navigation
Javascript React
17 votes372 views5 answers
Add background image react native
Javascript React