@payal_maniyar/react-native_datetimepicker NPM

@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