개발/React Native

[React Native][라이브러리] React Native Date Picker

ENFP Jake 2023. 2. 4. 18:26
728x90
반응형

# react-native-modern-datepicker

- 앱 개발 과정에서 날짜나 시간이 포함된 기능을 개발하다 보면, 시간이나 날짜를 선택해야 하는 UI가 필요한 경우가 있습니다.  이를 직접 개발하기에는 너무 많은 시간이 필요하기 때문에, 적절한 라이브러리를 활용하는 것이 좋습니다. 오늘 포스팅에서는 이런 상황에 사용할 수 있는 라이브러리를 소개하려고 합니다.

 

 

# Github Page

 

React Native Modern Datepicker | React Native Modern Datepicker

A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale) View on Github

hosseinshabani.github.io

 

# 설치 및 사용법

- 라이브러리를 설치합니다

$ yarn add react-native-modern-datepicker

- 아래와 같이 구현해서 사용하실 수 있습니다. 선택 가능한 기간을 정하는 프로퍼티 등, 추가적인 사용 방법은 깃헙 페이지를 참고하시기 바랍니다. 

import React from 'react';
import DatePicker from 'react-native-modern-datepicker';

const FullUsageExample = () => {
  return (
    <DatePicker
      options={{
        backgroundColor: '#090C08',
        textHeaderColor: '#FFA25B',
        textDefaultColor: '#F6E7C1',
        selectedTextColor: '#fff',
        mainColor: '#F4722B',
        textSecondaryColor: '#D6C7A1',
        borderColor: 'rgba(122, 146, 165, 0.1)',
      }}
      current="2020-07-13"
      selected="2020-07-23"
      mode="calendar"
      minuteInterval={30}
      style={{ borderRadius: 10 }}
    />
  );
};

 


728x90
반응형