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