@payal_maniyar/react-native_datetimepicker
v1.0.8
Published
Date Time Picker view as a modal
Downloads
18
Maintainers
Readme
@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 |