TimePicker 日期/时间选择组件 >=1.3.0

渲染出一个可以选择日期/时间的组件。这是一个受控组件，需要在 onDateChange 的回调中设置 date。

ScrollView

属性

mode { 'date' / 'time' / 'datetime' }

选择时间的模式，支持三种：datetime为日期和时间，time为时间，date为日期。

默认值: datetime

date { Date }

当前的选中值，由于这是一个受控组件，所以需要在 onDateChange 回调中每次修改这个值。

默认值: new Date()

minimumDate { Date }

可选的最小值，超过范围会自动回弹。

maximumDate { Date }

可选的最大值，超过范围会自动回弹。

minuteInterval { oneOf([1, 2, 3, 5, 6, 10, 12, 15, 20, 30]) }

可选的最小的分钟单位。

默认值: 1

onDateChange { function }

(date) => void

当选择的事件发生变化之后触发的回调

方法参数:

参数名 类型 描述 版本
date Date 当前选择的时间
示例

import React, { TimePicker, View, Component, StyleSheet, Text, Button } from 'qunar-react-native';

const styles = StyleSheet.create({
    operationContainer: {
        paddingBottom: 5,
        paddingHorizontal: 10,
        flexDirection: 'row',
    },
    operationText: {
        flex: 1,
        alignSelf: 'center',
    },
    operationTextHighlight: {
        color: '#1ba9ba',
    },
    itemText: {
        padding: 5,
        color: '#fff',
        alignSelf:'flex-end',
        fontSize: 32,
        fontWeight: 'bold'
    }
});

class TimePickerExample extends Component {
  constructor(props){
    super(props);

    this.state = {
      date: new Date(),
      minimumDate: this.props.mode === 'time' ? getRandomMinTime() : getRandomMinDate(),
      maximumDate: this.props.mode === 'time' ? getRandomMaxTime() : getRandomMaxDate(),
      minuteInterval: 1,
    }
  }

  render() {
    return (
      <View style={{flex:1}}>
        <View style={styles.operationContainer}>
          <Text style={styles.operationText}>最小值：<Text style={styles.operationTextHighlight}>{this.state.minimumDate ? formatDate(this.state.minimumDate) : 'None'}</Text>
          </Text>
          <Button text='切换' onPress={() => this.setState({minimumDate: this.state.minimumDate ? null : ( this.props.mode === 'time' ? getRandomMinTime() : getRandomMinDate())})} />
        </View>
        <View style={styles.operationContainer}>
          <Text style={styles.operationText}>最大值：<Text style={styles.operationTextHighlight}>{this.state.maximumDate ? formatDate(this.state.maximumDate) : 'None'}</Text>
          </Text>
          <Button text='切换' onPress={() => this.setState({maximumDate: this.state.maximumDate ? null : ( this.props.mode === 'time' ? getRandomMaxTime() : getRandomMaxDate())})} />
        </View>
        <View style={styles.operationContainer}>
          <Text style={styles.operationText}>minuteInterval：<Text style={styles.operationTextHighlight}>{this.state.minuteInterval}</Text>
          </Text>
          <Button text='切换' onPress={() => this.setState({minuteInterval: getRandomInterval()})} />
        </View>
        <TimePicker
          mode={this.props.mode}
          date={this.state.date}
          onDateChange={(currentDate) => {console.log(currentDate); this.setState({date: currentDate})}}
          minimumDate={this.state.minimumDate}
          maximumDate={this.state.maximumDate}
          minuteInterval={this.state.minuteInterval}
        />
      </View>
    );
  }
}

function getRandomInterval() {
    const intervals = [1, 2, 3, 5, 6, 10, 12, 15, 20, 30, 1];
    return intervals[Math.floor(Math.random() * 10)];
}

function getRandomMinDate() {
    let date = new Date();

    date.setFullYear(date.getFullYear() - Math.floor(Math.random() * 5));
    date.setMonth(date.getMonth() - Math.floor(Math.random() * 12));
    date.setDate(date.getDate() - Math.floor(Math.random() * 31));
    date.setHours(Math.floor(Math.random() * 24));
    date.setMinutes(Math.floor(Math.random() * 60));

    return date;
}

function getRandomMaxDate() {
    let date = new Date();

    date.setFullYear(date.getFullYear() + Math.floor(Math.random() * 5));
    date.setMonth(date.getMonth() + Math.floor(Math.random() * 12));
    date.setDate(date.getDate() + Math.floor(Math.random() * 31));
    date.setHours(Math.floor(Math.random() * 24));
    date.setMinutes(Math.floor(Math.random() * 60));

    return date;
}

function getRandomMinTime() {
    let date = new Date(),
        _date = date.getDate(),
        _hour = date.getHours(),
        _minute = date.getMinutes();

    let _isYesterday = Math.random() > 0.5

    date.setDate( _isYesterday ? _date - 1 : _date);
    date.setHours(Math.floor(Math.random() * (_isYesterday ? 24 : _hour)));
    date.setMinutes(Math.floor(Math.random() * _minute));

    return date;
}

function getRandomMaxTime() {
    let date = new Date(),
        _hour = date.getHours(),
        _minute = date.getMinutes();

    date.setHours(_hour + Math.floor(Math.random() * (24 - _hour)));
    date.setMinutes(_minute + Math.floor(Math.random() * (60 - _minute)));

    return date;
}

function formatDate(date) {
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();
}

module.exports = {
    title: 'TimePicker',
    scroll: true,
    examples: [
    {
        subtitle: 'Default settings',
        render: () => {
            return (
            <View>
              <TimePickerExample />
              <TimePickerExample mode={'time'}/>
              <TimePickerExample mode={'date'}/>
            </View>
          )
        },
    }
    ],
};