@cawfree/react-native-simple-date-picker

An idiot-proof date picker for React Native, backed by moment.js.

🚨 This project has been deprecated. Please use @cawfree/react-native-simpler-date-picker.

@cawfree/react-native-simple-date-picker

🚀 Getting Started

Using npm:

npm install --save @cawfree/react-native-simple-picker

Using yarn:

yarn add @cawfree/react-native-simple-date-picker

✍️ Example

import React from 'react';
import {
  Platform,
  View,
  StyleSheet,
  Dimensions,
} from 'react-native';
import { ModalProvider } from '@cawfree/react-native-modal-provider';
import MaterialMenuModal from '@cawfree/react-native-modal-provider/RNModalProvider/src/components/MaterialMenuModal';

import SimpleDatePicker from './components/SimpleDatePicker';

const styles = StyleSheet
  .create(
    {
      container: {
        width: 250,
      },
    },
  );

const App = () => (
  <View
    style={styles.container}
  >
    <ModalProvider
      ModalComponent={MaterialMenuModal}
      position={({ x, y, width, height }) => ({
        position: 'absolute',
        left: x,
        // XXX: Apply some additional padding.
        top: y + height + 5,
      })}
    >
    
      <SimpleDatePicker
      />
    </ModalProvider>
  </View>
);

let hotWrapper = () => () => App;
if (Platform.OS === 'web') {
  const { hot } = require('react-hot-loader');
  hotWrapper = hot;
}
export default hotWrapper(module)(App);

📋 Prop Types

Prop NameData TypeRequiredDefaultDescription
ContainerpropTypes.funcfalse({ children, …extraProps }) => ( <View {…extraProps} > {children} )Defines the React Component instance to use when containing the DatePicker components.
themepropTypes.shape({})false{ fontSize: 16, color: ‘#444444’, disabledColor: ‘#CCCCCC’, borderRadius: 5, padding: 1, borderWidth: 1, highlightColor: ‘blue’, }Defines some style configuration for the .
datepropTypes.shapefalseundefinedA moment object. Can be used to define the current date to render using the SimpleDatePicker, or can be left null/undefined.
onDatePickedpropTypes.funcfalsemoment => nullCallback for when the user has finished selecting a date, or made an update to an existing date and that date is valid.
minDatepropTypes.shape({})falseMoment().subtract(100, ‘years’)The minimum allowable selectable date.
maxDatepropTypes.shape({})falseMoment()The maximum allowable selectable date.
renderDescriptionpropTypes.funcfalsemoment => {moment.format(…)}A function that can be called to render a React component once a valid date has been selected.

✌️ License

MIT.