/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

5 votes166 views1 answer
How to create component in reactjs
Javascript React
1 vote166 views1 answer
Scale text in div react
Javascript React
1 vote516 views1 answer
React waypoint loadmore not working
Javascript React
6 votes158 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React
0 vote172 views1 answer
Module missing for arearange highcharts react
Javascript React
-3 votes167 views2 answers
Generate android folder in react native
Javascript React
1 vote166 views1 answer
React native get current time
Javascript React
0 vote184 views1 answer
Which algorithm React is used to compare dom?
Javascript React
0 vote243 views1 answer
React hook form reset only one field
Javascript React
0 vote182 views1 answer
Doughnut chartjs with react display percentage
Javascript React