React Native日期时间选择组件

forrest23

发布于 2018-08-03 15:25:44

5K0

发布于 2018-08-03 15:25:44

文章被收录于专栏：React Native开发圈React Native开发圈

本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

首先祝大家劳动节快乐，劳动最光荣！

React Native日期时间选择组件：react-native-datepicker，支持安卓和IOS双平台，支持单独选择日期、单独选择时间和选择日期和时间，支持自定义日期格式。

效果图

安装方法

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: 'absolute',
              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：设置初始显示的日期 mode：显示的模式，date,datetime,time format：设置日期格式，默认为'YYYY-MM-DD' confirmBtnText：确定按钮的显示名称 cancelBtnText：取消按钮的显示名称 minDate：显示的最小日期 maxDate：显示的最大日期 duration：时间间隔 onDateChange：日期变化时触发的事件 placeholder：占位符

完整示例

完整代码：GitHub - forrest23/ReactNativeComponents: React Native组件大全，介绍React Native常用组件的使用方法和使用示例本次示例代码在 Component11文件夹中。请不要吝啬你们的Star！

组件地址

GitHub - xgfe/react-native-datepicker: react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-04-26，如有侵权请联系 cloudcommunity@tencent.com 删除

react