react-native-date-picker

Basic Date Picker

This code demonstrates a basic date picker where a button opens the date picker modal. The selected date is stored in the state.

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';

const App = () => {
  const [date, setDate] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <View>
      <Button title="Open Date Picker" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false);
          setDate(date);
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />
    </View>
  );
};

export default App;

Time Picker

This code demonstrates a time picker where a button opens the time picker modal. The selected time is stored in the state.

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';

const App = () => {
  const [time, setTime] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <View>
      <Button title="Open Time Picker" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={time}
        mode="time"
        onConfirm={(time) => {
          setOpen(false);
          setTime(time);
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />
    </View>
  );
};

export default App;

Date and Time Picker

This code demonstrates a date and time picker where a button opens the date and time picker modal. The selected date and time are stored in the state.

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';

const App = () => {
  const [dateTime, setDateTime] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <View>
      <Button title="Open DateTime Picker" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={dateTime}
        mode="datetime"
        onConfirm={(dateTime) => {
          setOpen(false);
          setDateTime(dateTime);
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />
    </View>
  );
};

export default App;

Customizable Date Picker

This code demonstrates a customizable date picker where the text color and fade color are customized. The selected date is stored in the state.

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';

const App = () => {
  const [date, setDate] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <View>
      <Button title="Open Custom Date Picker" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false);
          setDate(date);
        }}
        onCancel={() => {
          setOpen(false);
        }}
        textColor="blue"
        fadeToColor="white"
        mode="date"
      />
    </View>
  );
};

export default App;