V1.0.0

Native module for date & time picker which opens picker dialog and lets you select date or time.

Inatallation

npm i native-date-picker-module

Usage

import * as React from 'react';

import { StyleSheet, View, Button } from 'react-native';
import { DateTimePicker } from 'native-date-picker-module';

export default function App() {
  const showDatePicker = async () => {
    const result = await DateTimePicker.open({
      mode: 'date',
    });
    console.log(result);
  };

  const showTimePicker = async () => {
    const result = await DateTimePicker.open({
      mode: 'time',
      is24HoursView: false,
    });
    console.log(result);
  };

  return (
    <View style={styles.container}>
      <Button title="Date Picker" onPress={showDatePicker} />
      <Button title="Time Picker" onPress={showTimePicker} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

DateTimePicker native module

• DateTimePicker.open({}) will open picker.

Props

• mode: date or time
• is24HoursView: Used to show 24 hours view for time picker
• colorMode: light or dark
• pickerTheme: default or spinner

V0.1.1

native-date-picker-module

native module for date picker which opens date picker dialog and let's you select date.

Inatallation

npm i native-date-picker-module

Usage

import * as React from 'react';

import {
  StyleSheet,
  View,
  Text,
  Button,
} from 'react-native';
import { getDatePicker } from 'native-date-picker-module';

export default function App() {
  const [result, setResult] = React.useState<{
    day: string;
    month: string;
    year: string;
  }>({
    day: '',
    month: '',
    year: '',
  });

  const [date, setDate] = React.useState<Date | null>(null);

  React.useEffect(() => {
    const day = parseInt(result.day);
    const month = parseInt(result.month);
    const year = parseInt(result.year);
    const date = new Date(year, month, day);
    setDate(date);
  }, [result]);

  return (
    <View style={styles.container}>
      <Text>Selected date: {`${date?.toLocaleDateString()}`}</Text>
      <Button
        title="Click me"
        onPress={async () => {
          const result = await getDatePicker();
          setResult(result);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

• getDatePicker is function that returns promise of result date selected from DatePickerDialog.

License

MIT

---

Made with create-react-native-library