23mofang-react-native-datepicker 中文文档教程

发布于 7年前 浏览 23 项目主页 更新于 3年前

修改源码

添加defaultDate

react-native-datepicker Build StatusCoverage StatusMonthly downloadTotal downloads

react native datePicker component for both Android and IOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS

Install

npm install react-native-datepicker --save

Or using react-native-ui-xg, our react-naitve ui kit.

npm install react-native-ui-xg --save

Example

Check index.android.js in the Example.

android ios

Usage

import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'

export default class MyDatePicker extends Component {
  constructor(props){
    super(props)
    this.state = {date:"2016-05-15"}
  }

  render(){
    return (
      <DatePicker
        style={{width: 200}}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36
          }
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(date) => {this.setState({date: date})}}
      />
    )
  }
}

You can check index.js in the Example for detail.

Properties

PropDefaultTypeDescription
style-objectSpecify the style of the DatePicker, eg. width, height…
date-string &#124; dateSpecify the display date of DatePicker. string type value must match the specified format
mode'date'enumThe enum of date, datetime and time
androidMode'default'enumThe enum of default, calendar and spinner (only Android)
format'YYYY-MM-DD'stringSpecify the display format of the date, which using moment.js. The default value change according to the mode.
confirmBtnText'确定'stringSpecify the text of confirm btn in ios.
cancelBtnText'取消'stringSpecify the text of cancel btn in ios.
iconSource-{uri: string} &#124; numberSpecify the icon. Same as the source of Image, always using require()
minDate-string &#124; dateRestricts the range of possible date values.
maxDate-string &#124; dateRestricts the range of possible date values.
duration300numberSpecify the animation duration of datepicker.
customStyles-numberThe hook of customize datepicker style, same as the native style. dateTouchBody, dateInput
showIcontruebooleanController whether or not show the icon
hideTextfalsebooleanController whether or not show the dateText
iconComponent-elementSet the custom icon
disabledfalsebooleanController whether or not disable the picker
is24Hour-booleanSet the TimePicker is24Hour flag. The default value depend on format. Only work in Android
placeholder''stringThe placeholder show when this.props.date is falsy
onDateChange-functionThis is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property.
onOpenModal-functionThis is called when the DatePicker Modal open.
onCloseModal-functionThis is called when the DatePicker Modal close
onPressMask-functionThis is called when clicking the ios modal mask
modalOnResponderTerminationRequest-functionSet the callback for React Native's Gesture Responder System's call to onResponderTerminationRequest. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases.
TouchableComponentTouchableHighlightComponentReplace the TouchableHighlight with a custom Component. For example : TouchableOpacity
defaultDate-string点击日历选择器后,默认弹出的时间

Property customStyles available keys

  • appearance: dateInput, disabled, dateTouchBody, dateIcon, placeholderText, dateText
  • ios select panel: datePickerCon, datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel

Instance Methods

MethodParamsDescription
onPressDate-Manually open the date picker panel
onPressCancel-Manually close the date picker panel like, similarly pressing cancel btn
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文