date picker react native

1expo install react-native-modal-datetime-picker @react-native-community/datetimepicker
2
3import React, { useState } from "react";
4import { Button, View } from "react-native";
5import DateTimePickerModal from "react-native-modal-datetime-picker";
6
7const Example = () => {
8  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
9
10  const showDatePicker = () => {
11    setDatePickerVisibility(true);
12  };
13
14  const hideDatePicker = () => {
15    setDatePickerVisibility(false);
16  };
17
18  const handleConfirm = (date) => {
19    console.warn("A date has been picked: ", date);
20    hideDatePicker();
21  };
22
23  return (
24    <View>
25      <Button title="Show Date Picker" onPress={showDatePicker} />
26      <DateTimePickerModal
27        isVisible={isDatePickerVisible}
28        mode="date"
29        onConfirm={handleConfirm}
30        onCancel={hideDatePicker}
31      />
32    </View>
33  );
34};
35
36export default Example;

1import React, { Component } from 'react';
2import {
3  StyleSheet,
4  Text,
5  View
6} from 'react-native';
7import CalendarPicker from 'react-native-calendar-picker';
8
9export default class App extends Component {
10  constructor(props) {
11    super(props);
12    this.state = {
13      selectedStartDate: null,
14    };
15    this.onDateChange = this.onDateChange.bind(this);
16  }
17
18  onDateChange(date) {
19    this.setState({
20      selectedStartDate: date,
21    });
22  }
23  render() {
24    const { selectedStartDate } = this.state;
25    const startDate = selectedStartDate ? selectedStartDate.toString() : '';
26    return (
27      <View style={styles.container}>
28        <CalendarPicker
29          onDateChange={this.onDateChange}
30        />
31
32        <View>
33          <Text>SELECTED DATE:{ startDate }</Text>
34        </View>
35      </View>
36    );
37  }
38}
39
40const styles = StyleSheet.create({
41  container: {
42    flex: 1,
43    backgroundColor: '#FFFFFF',
44    marginTop: 100,
45  },
46});

1
2import {
3  SafeAreaView,
4  StyleSheet,
5  Text,
6  View,
7  TextInput,
8  Picker,
9  Button,
10  Image,
11  DatePickerIOS,
12  TouchableOpacity,
13} from 'react-native';
14import DatePicker from 'react-native-datepicker';          
15
16<DatePicker
17            style={styles.datePickerStyle}
18            date={date}
19            mode="date"
20            placeholder="select date"
21            format="DD-MM-YYYY"
22            minDate="01-01-2016"
23            maxDate="01-01-20900"
24            confirmBtnText="Confirm"
25            cancelBtnText="Cancel"
26            customStyles={{
27              dateIcon: {
28                //display: 'none',
29                position: 'absolute',
30                left: 0,
31                top: 4,
32                marginLeft: 0,
33              },
34              dateInput: {
35                marginLeft: 36,
36              },
37            }}
38          />

1//Prerequisits
2/*
3	1. expo install react-native-calendar-picker or yarn add react-native-calendar-picker
4    2. yarn add moment //required
5*/
6
7//Example
8
9import React, { Component } from 'react';
10import {
11  StyleSheet,
12  Text,
13  View
14} from 'react-native';
15import CalendarPicker from 'react-native-calendar-picker';
16
17export default class App extends Component {
18  constructor(props) {
19    super(props);
20    this.state = {
21      selectedStartDate: null,
22    };
23    this.onDateChange = this.onDateChange.bind(this);
24  }
25
26  onDateChange(date) {
27    this.setState({
28      selectedStartDate: date,
29    });
30  }
31  render() {
32    const { selectedStartDate } = this.state;
33    const startDate = selectedStartDate ? selectedStartDate.toString() : '';
34    return (
35      <View style={styles.container}>
36        <CalendarPicker
37          onDateChange={this.onDateChange}
38        />
39
40        <View>
41          <Text>SELECTED DATE:{ startDate }</Text>
42        </View>
43      </View>
44    );
45  }
46}
47
48const styles = StyleSheet.create({
49  container: {
50    flex: 1,
51    backgroundColor: '#FFFFFF',
52    marginTop: 100,
53  },
54});