직딩 개발기-날짜 선택
직딩에는 입사일 선택하는 기능이 있었어요. (출시하기전에 삭제되었지만… 😭)
iOS에서는 날짜를 선택하는데 아래와 같은 UI를 제공해요. 이것을 UIDate Picker라고 부르죠.
그래서 date picker로 검색해보니 react-native-date-picker라는 것이 있어서 실행해봤는데 Android에서 아래와 같이 나타나서 사용할 수 없다고 생각했어요.
또 다른 datetimepicker는 아래와 같이 Modal 형태로만 나타나서 아예 쓸 수 없었죠 😭. (물론 Picker 형태도 아니었지만 😋)
다시 react-native-date-picker를 확인해보니 다행히 androidVariant는 옵션이 있었어요. (Android도 iOS 처럼 보일지를 선택할 수가 있다는 거죠!)
/**
* The Android style variant.
*/
androidVariant?: 'iosClone' | 'nativeAndroid'화면에 DatePicker로 Import 해서 date만 넣었더니
import DatePicker from 'react-native-date-picker'
...
const [joinDate, setJoinDate] = useState(new Date())
...
<DatePicker date={joinDate} />아래와 같이 날짜와 시간을 선택할 수 있는 것을 확인할 수 있었죠.
하지만 직딩에서는 날짜만 나오게 해야했고, 옵션을 찾아보니 mode에 ‘date’를 주면
<DatePicker mode='date'
date={joinDate} />아래와 같이 날짜만 선택할 수 있게 되는 것을 확인할 수 있었어요.
그런데 보이는 것처럼 영어로 나와서 한국어로 보이는 방법을 찾아보니 locale을 설정할 수 있었고
<DatePicker mode='date' locale='ko-KR'
date={joinDate} />실행 했을 때 아래와 같이 한국어 날짜 표기가 잘 나오는 것을 확인할 수 있었죠.
이렇게 추가한 Picker의 날짜를 변경하면 감지해서 저장을 해야 하는데 DatePicker는 onDateChange라는 이벤트를 제공하고 있었어요.
const onSelectDate = useCallback((date: Date) => {
setJoinDate(date)
}, [])
...
<DatePicker
style={styles.joinDatePicker}
mode='date'
locale='ko-KR'
date={joinDate}
onDateChange={onSelectDate} />아직 저장 기능이 없어서 로그로 확인 했더니
useEffect(() => {
console.log(__LOG__, 'select', joinDate)
}, [joinDate])아래와 같이 잘 감지되는 것을 확인할 수 있었어요. 😀
LOG 입사일 선택 화면 select 2023–01–15T05:13:43.813Z
