[RN]날짜, 시간 선택 라이브러리<react-native-date-picker>

https://github.com/henninghall/react-native-date-picker

GitHub - henninghall/react-native-date-picker: React Native Date Picker is datetime picker for Android and iOS. It includes date

날짜&시간선택을 도와주는 라이브러리이다. 

어떤 라이브러리를 사용할까 고민하던중 이 라이브러리가 제일 나아보이기도 하고 코드도 단순해서 사용하기 쉬워보였다.

한번 테스트용으로 써봤는데 꽤 괜찮았다. 굿~

 

react-native-date-picker

 

1. 설치하기

npm install react-native-date-picker

yarn add react-native-date-picker

2. Install pods

cd ios && pod install

3. Rebuild the project

npx react-native run-android
npx react-native run-ios

 

 

---

#1 모달모드 예시

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

---

#2 인라인모드 예시

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())

  return <DatePicker date={date} onDateChange={setDate} />
}

 

 

Props 

기타 프롭스는 아래링크에서 선택사용가능

https://github.com/henninghall/react-native-date-picker#props