reactnative-neat-date-picker-2022 v1.2.6

React Native Neat Date Picker

An easy-to-use date picker for react native.

Main Features

📲 Both Android and iOS devices are supported 👍 Providing range and single selection modes 🕒 Using mordern Date object to manipulate dates. 🌈 Color customization ✨ Clean UI 🈶 Chinese / English

New Update

Changed the output format. Now you can get both JS Date object and formatted date string like 2022-02-14 or 20220214 from the output. The date string format can be specified.

Limitation

This package is not for web. It is okay to use on web but there might be some problems.

Dependencies

No need to manually install dependencies.

How to Start

First install

npm i react-native-neat-date-picker

Import

import DatePicker from 'react-native-neat-date-picker';

Basic Usage

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

const App = () => {
  const [showDatePicker, setShowDatePicker] = useState(false);

  const openDatePicker = () => {
    setShowDatePicker(true);
  };

  const onCancel = () => {
    // You should close the modal in here
    setShowDatePicker(false);
  };

  const onConfirm = output => {
    // You should close the modal in here
    setShowDatePicker(false);

    // The parameter 'output' is an object containing date and dateString (for single mode).
    // For range mode, the output contains startDate, startDateString, endDate, and EndDateString
    console.log(output.date);
    console.log(output.dateString);
  };

  return (
    <View style={styles.container}>
      <Button title={'open'} onPress={openDatePicker} />
      <DatePicker
        isVisible={showDatePicker}
        mode={'single'}
        onCancel={onCancel}
        onConfirm={onConfirm}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Properties

OnConfirm

this prop passes an argument output For 'single' mode, output contains two properties date, dateString. As for 'range' mode, it contains four properties startDate, startDateString, endDate and endDateString

Example:

// single mode
const onConfirm = ({ date, dateString }) => {
  console.log(date.getTime())
  console.log(dateString)
}

// range mode
const onConfirm = (output) => {
  const {startDate, startDateString, endDate, endDateString} = output
  console.log(startDate.getTime())
  console.log(startDateString)
  console.log(endDate.getTime())
  console.log(endDateString)
}

...

<DatePicker
  onConfirm={onConfirm}
/>

ColorOptions

The colorOptions prop contains several color settings. It helps you customize the date picker.

* : Only six-digits HEX code colors (like #ffffff. #fff won't work) are allowed because I do something like this behind the scene.

style={{color:'{dateTextColor}22'}}  // '#rrggbbaa'

Example:

const colorOptions = {
  headerColor:'#9DD9D2',
  backgroundColor:'#FFF8F0'
}
...
<DatePicker
  ...
  colorOptions={colorOptions}
/>

TODOs

• Add font customization.
• Turn to typescript.

Inspiration

react-native-daterange-picker

Contact Me

This is my first open source. Therefore, I expect there are lots of improvements that could be done. Any Suggestions or contributions would be very appreciated. Feel free to contact me by 2roto93Stark@gmail.com.