react-native(리액트 네이티브) API - DatePickerAndroid

react-native(리액트 네이티브) API - DatePickerAndroid

const React = require('react')

const ReactNative = require('react-native')

const {

DatePickerAndroid,

StyleSheet,

Text,

View,

TouchableWithoutFeedback,

} = ReactNative

class DatePickerAndroidExample extends React.Component {

static title = 'DatePickerAndroid'

static description = 'message example...'

state = {

presetDate: new Date(2020, 4, 5),

simpleDate: new Date(2020, 4, 5),

spinnerDate: new Date(2020, 4, 5),

calendarDate: new Date(2020, 4, 5),

defaultDate: new Date(2020, 4, 5),

allDate: new Date(2020, 4, 5),

simpleText: 'pick a data',

spinnerText: 'pick a date',

calendarText: 'pick a date',

defaultText: 'pick a date',

minText: 'pick a date, no earlier than today',

maxText: 'pick a date, no later than todat',

presetText: 'pick a date, preset to 2020/5/5',

allText: 'pick a date between 2020/5/1 and 2020/5/10',

}

showPicker = async (stateKey, options) => {

try {

const newState = {}

const {

action, year, month, day,

} = await DatePickerAndroid.open(options)

if (action === DatePickerAndroid.dismissedAction) {

newState[`$stateKey}Text`] = 'dismissed'

} else {

const date = new Date(year, month, day)

newState[`${stateKey}Text`] = date.toLocaleDateString()

newState[`${stateKey}Date`] = date

}

this.setState(newState)

} catch ({code, message}) {

console.warn(`Error in example '${stateKey}': `, message)

}

}

render() {

return(

<View>

<View>

<Text>Simple date picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'simple', {

date: this.state.simpleDate,

})}

>

<Text style={styles.text}>{this.state.simpleText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Simple spinner date picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'spinner', {

date: this.state.spinnerDate,

mode: 'spinner',

})}

>

<Text style={styles.text}>{this.state.spinnerText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Simple calendar date picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'calendar', {

date: this.state.calendarDate,

mode: 'calendar',

})}

>

<Text style={styles.text}>{this.state.calendarText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Simple default date picker</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'default', {

date: this.state.defaultDate,

mode: 'default',

})}

>

<Text style={styles.text}>{this.state.defaultText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Date picker with pre-set date</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'preset', {

date: this.state.presetDate,

})}

>

<Text style={styles.text}>{this.state.presetText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Date picker with minDate</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'min', {

date: this.state.minDate,

minDate: new Date(),

})}

>

<Text style={styles.text}>{this.state.minText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Date picker with maxDate</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'max', {

date: this.state.maxDate,

maxDate: new Date(),

})}

>

<Text style={styles.text}>{this.state.maxText}</Text>

</TouchableWithoutFeedback>

</View>

<View>

<Text>Date picker with all options</Text>

<TouchableWithoutFeedback

onPress={this.showPicker.bind(this, 'all', {

date: this.state.allDate,

minDate: new Date(2020, 4, 1),

maxDate: new Date(2020, 4, 10),

})}

>

<Text style={styles.text}>{this.state.allText}</Text>

</TouchableWithoutFeedback>

</View>

</View>

)

}

}

var styles = StyleSheet.create({

text: {

color: 'black',

},

})

module.exports = DatePickerAndroidExample