React Native Custom Date Time Picker Modal

This library is customized datetimepicker modal for react-native and didn't use other third-party library.

Install

1$ npm install rn-datetimepicker-modal --save

1$ yarn add rn-datetimepicker-modal

Usage/Examples

1import React from 'react';
2import DatePickerModal from 'rn-datetimepicker-modal'
3
4class DateModal extends React.Component {
5
6constructor(props) {
7        super(props);
8        this.state = {
9            showDatePicker: false,
10            showTimePicker: false,
11            date: new Date(),
12            fromDate: null,
13        };
14    }
15
16componentDidMount() {
17        const { date } = this.state;
18        this.setState({fromDate: new Date(date.getFullYear(), date.getMonth(), 1)});
19}
20
21render() {
22  return (
23    //   implement datepickermodal action
24    //   can also set the 
25    //   minYear => for minimum year
26    //   minMonth => for minimum month 
27    //   done => done text (can use multi translation)
28    //   cancel => cancel text (can use multi translation) 
29    //   doneColor => done text color 
30    //   borderColor => border color
31
32     <DatePickerModal
33        mode={'date'} // for date picker
34        // for month picker => mode={'month'}
35        maxYear={new Date().getFullYear()}
36        maxMonth={new Date().getMonth() + 1}
37        currentDate={new Date()}
38        visible={this.state.showDatePicker}
39        onCancel={() => this.setState({ showDatePicker: false })}
40        onDone={date => {
41                        if (!date) return;
42                        this.setState({ fromDate: date });
43                        this.setState({ showDatePicker: false });
44                }}
45    />
46
47// for time picker
48    <DatePickerModal
49        currentDate={new Date()}
50        visible={this.state.showTimePicker}
51        onCancel={() => this.setState({ showTimePicker: false })}
52        onDone={date => {
53                        if (!date) return;
54                        this.setState({ fromDate: date });
55                        this.setState({ showTimePicker: false });
56                }}
57    />
58  );
59}
60}
61export default DateModal;

---

Demo image

Date Picker Modal

Month Picker Modal

Time Picker Modal