React Native 날짜/시간 선택기 구성 요소를 사용하는 방법

이번에는 React Native 날짜 및 시간 선택 컴포넌트 사용 방법과 React Native 날짜 및 시간 선택 컴포넌트 사용 시 주의사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

React 기본 날짜 및 시간 선택 구성 요소: React-native-datepicker, Android 및 IOS 듀얼 플랫폼 지원, 독립적인 날짜 선택, 독립적인 시간 선택 및 날짜 및 시간 선택을 지원하고 사용자 정의 날짜 형식을 지원합니다.

Rendering

InstallationMethod

npm install react-native-datepicker --save

샘플 코드

<Text style={styles.instructions}>time: {this.state.time}</Text>
    <DatePicker
     style={{width: 200}}
     date={this.state.datetime}
     mode="datetime"
     format="YYYY-MM-DD HH:mm"
     confirmBtnText="确定"
     cancelBtnText="取消"
     showIcon={false}
     onDateChange={(datetime) => {this.setState({datetime: datetime});}}
    />
    <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
    <DatePicker
     style={{width: 200}}
     date={this.state.datetime1}
     mode="datetime"
     format="YYYY-MM-DD HH:mm"
     confirmBtnText="确定"
     cancelBtnText="取消"
     customStyles={{
      dateIcon: {
       position: &#39;absolute&#39;,
       left: 0,
       top: 4,
       marginLeft: 0
      },
      dateInput: {
       marginLeft: 36
      }
     }}
     minuteInterval={10}
     onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
    />
    <Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>

주요 매개변수 설명

date: 초기 표시 날짜 모드를 설정합니다. : 표시된 모드, 날짜, 날짜시간, time format: 날짜 형식을 설정합니다. 기본값은 'YYYY-MM-DD'입니다. verifyBtnText: 확인 버튼의 표시 이름 cancelBtnText: 취소 버튼의 표시 이름 minDate: 표시되는 최소 날짜 maxDate: 표시되는 최대 날짜 기간: 시간 간격 onDateChange: 변경 시 실행되는 날짜 Event 자리 표시자: 자리 표시자

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

vue-baidu-map을 만들어 페이지에 들어가서 자동으로 위치 지정하는 방법

Vue2.0을 사용하여 카메라를 호출하여 사진을 찍는 방법

위 내용은 React Native 날짜/시간 선택기 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!