DateTime

DateTime component for React Native. (Android & iOS)

Demo:

Demo Source Code

Installation

https://github.com/caoyongfeng0214/rn-overlay#installation

Usage

import React from 'react';
import { View, Overlay } from 'react-native';

const DateTime = Overlay.DateTime;

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            dt0: [-1, -1, -1]
        };
    }

    render() {
        return <View style={{paddingTop:88}}>
            <DateTime placeholder='YYYY-MM-DD' placeholderColor='#666'
                value={this.state.dt0}
                onConfirm={(selectedVals) => {
                    this.setState({ dt0: selectedVals });
                }}
            ></DateTime>
        </View>;
    }
}

export default App;

Enums

Mode

values:

• YM
• YMD (default value)
• YMDh
• YMDhm
• YMDhms
• hm
• hms

Y: Year； M: Month； D: Date； h: hour； m: minute； s: second

Props

some styles

refer: https://github.com/caoyongfeng0214/rn-overlay/wiki/Picker#some-styles

placeholder

String. display some text when not any item be selected.

placeholderColor

String. font color of placeholder.

mode

DateTime.Mode Enum. default value: DateTime.Mode.YMD .

value

Array. value of the selected item. each item in the array corresponds to the meaning of each letter in the props.mode .

e.g.

if value of mode is DateTime.Mode.YMD, and value of value is [2020, 3, 20], then the value means March 20, 2020 .

NOTE: value of month starts from 1, not from 0 .

min

Object. Minimum value.

format:

{
    Y: 2020,
    M: 3, // NOTE: value of month starts from 1, not from 0
    D: 20,
    h: 15,
    m: 50,
    s: 30
}

max

Object. Max value.

format:

{
    Y: 2020,
    M: 3, // NOTE: value of month starts from 1, not from 0
    D: 20,
    h: 15,
    m: 50,
    s: 30
}

titles

Array. titles of Columns.

closeText

String. text on [ CloseButton ]. default value: 'Close' .

confirmText

String. text on [ ConfirmButton ]. default value: 'Confirm' .

head

Component or Function. customize [ Head ] .

input

Component or Function. customize [ Input ] .

onShow

Function. callback triggered right after the shown of the picker.

onClose

Function. callback triggered right after the closed of the picker.

onConfirm

Function. callback triggered right after clicked [ ConfirmButton ].

onChange

Function. call the function after selected item changed.

Instance Methods

show()

open the picker.

close()

close the picker.

fireConfirm()

fire confirm event of the picker. same as click [ ConfirmButton ] .