@payal_maniyar/react-native_datetimepicker

Removes all spaces from a string.

Install

$ npm install @payal_maniyar/react-native_datetimepicker

Usage

import DateTimePicker from '@payal_maniyar/react-native_datetimepicker';

 <DateTimePicker
        style = {
          {
            width: '100%',
            marginBottom: 8
          }
        }
        mode = "datetime" //{"datetime"}
        placeholder = "Pick a Date"
        format = "DD/M/YYYY HH:mm a"
        date = {
          this.state.date
        }
        minDate = {
          moment().add(10, 'years').format("DD/M/YYYY HH:mm a")
        }
        maxDate = {
          moment().subtract(10, 'years').format("DD/M/YYYY HH:mm a")
        }
        confirmBtnText = "Done"
        cancelBtnText = "Cancel"
        customStyles = {
          {
            dateIcon: {
              position: 'absolute',
              right: 0,
              marginLeft: 0
            },
            dateInput: {
              marginRight: 36,
              borderRadius: 5,
            }
            // ... You can check the source to find the other keys.
          }
        }
        onDateChange = {
          (date) =>
          this.setState({
            date: date
          })
        }

        />

Properties

Prop	Default	Type	Description
style	-	object	Specify the style of the DateTimePicker container, eg. width, height,backgroundColor etc...
date	-	string | date | Moment instance	Specify the display date of DatePicker. string type value must match the specified format
mode	'date'	enum	The enum of date, datetime and time
androidMode	'default'	enum	The enum of default, calendar and spinner (only Android)
format	'YYYY-MM-DD'	string	Specify the display format of the date, which using moment.js. The default value change according to the mode.
confirmBtnText	'确定'	string	Specify the text of confirm btn in ios.
cancelBtnText	'取消'	string	Specify the text of cancel btn in ios.
iconSource	-	{uri: string} | number	Specify the icon. Same as the source of Image, always using require()
minDate	-	string | date	Restricts the range of possible date values.
maxDate	-	string | date	Restricts the range of possible date values.
duration	300	number	Specify the animation duration of datepicker.
customStyles	-	object	The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...
showIcon	true	boolean	Controller whether or not show the icon
hideText	false	boolean	Controller whether or not show the dateText
iconComponent	-	element	Set the custom icon
disabled	false	boolean	Controller whether or not disable the picker
is24Hour	-	boolean	Set the TimePicker is24Hour flag. The default value depend on format. Only work in Android
allowFontScaling	true	boolean	Set to false to disable font scaling for every text component
placeholder	''	string	The placeholder show when this.props.date is falsy
onDateChange	-	function	This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property.
onOpenModal	-	function	This is called when the DatePicker Modal open.
onCloseModal	-	function	This is called when the DatePicker Modal close
onPressMask	-	function	This is called when clicking the ios modal mask
getDateStr	-	Function	A function to override how to format the date into a String for display, receives a Date instance

Property customStyles available keys

• appearance: dateInput, disabled, dateTouchBody, dateIcon, placeholderText, dateText
• ios select panel: datePickerCon, datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel

Instance Methods

Method	Params	Description
onPressDate	-	Manually open the date picker panel
onPressCancel	-	Manually close the date picker panel like, similarly pressing cancel btn