wm-react-native-datepicker

Datepicker for mobile, based on https://code.tutsplus.com/tutorials/how-to-create-a-react-native-calendar-component--cms-33664

Timepicker for mobile, based from https://www.npmjs.com/package/react-native-wheel-time-picker

Installation

Put dependence in package.json as

wm-react-native-datepicker: "bitbucket:watermelontecnologia/wm-react-standard-datepicker.git"

npm install wm-react-native-datepicker

Usage

import DateTimePicker from 'wm-react-native-datepicker';

// ...

const [date, setDate] = useState(new Date());
  return (
    <View style={styles.container}>
     <DateTimePicker
        activeDate={date}
        setActiveDate={(value) => setDate(value)}
        isOpen={isOpen}
        setIsOpen={(value) => setIsOpen(value)}
        language={'pt'}
        type={'both'}
        dateProps={{headerStyle: {backgroundColor: 'blue'}}}
      />
    </View>
  );

Props

| name | required | type | description | |---------------|----------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------| | setIsOpen | y | (value: number) => void | Function to set state isOpen, to close modal | | isOpen | y | bool | State isOpen for modal, to open and close | | dateProps | n | object | Style for date picker (see below) | | timeProps | n | object | Props for time picker(see below) | | type | y | string | Type of picker, date to display calendar, time to display timepicker, both to display calendar and after display time | | activeDate | y | Date | Selected date | | setActiveDate | y | (value: Date) => void | Function to set activeDate | | language | y | string | language code, such as "en", "pt" | | minDate | n | Date | minimum date that can be selected | | maxDate | n | Date | maximun date that can be selected | | buttonConfirm | n | object | style of confirmed button | | buttonCancel | n | object | style of cancel button | | weekDaysDisable | n | Array | Array of week days to be disabled, accepted values ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sat'] | | daysDisable | n | Array | Array of days to be disabled | | minInterval | n | number | interval of minutes |

dateProps

| name | type | description | |-----------------------|--------|------------------------------------------------------| | headerStyle | object | Style for header of calendar | | monthTextStyle | object | Style for text of month | | arrowButtonStyle | object | Style for button of previous and next month | | backgroundCalendar | string | Background color of calendar | | arrowTextColor | string | Color of text of buttons of previous and next month | | activeTextColor | string | Color of text of active date | | activeBackgroundColor | string | Background color of active date | | currentTextColor | string | Text color of current date | | daysTextColor | string | Text color of days | | colorDisable | string | Text color of disabled days |

timeProps

| name | type | description | |----------------|-----------|----------------------------| | containerStyle | ViewStyle | style of the outer view | | itemHeight | number | height of item in Wheel | | selectedColor | string | color of selected time | | disabledColor | string | color of deselected time | | displayCount | number | number of displayed values | | markerColor | string | color of marker |

Run example

yarn example android

Fix lint

npm run lint -- --fix

Publish in npm

Change version number in package.json, then run

npm login

and then run

npm run publish:npm

License

MIT

Made with create-react-native-library