@aligov/components-quick-time-range

如果样式不对劲，除了引用组件外，还需要额外手动引用样式文件

import '@aligov/components-quick-time-range/lib/style';

快速选择如最近7天或自定义时间段。

支持的时间段包括：

其中，最近 3 天、7 天会把开始时间和结束设为 0 点，但 24 小时的不会。

API

参数名 说明 必填 类型 默认值 备注
value 受控模式下设置时间范围 [startMoment, endMoment] 如果设置了开始或结束时间，那么应该是 Moment 的对象实例
defaultValue 非受控模式下的初识值 [startMoment, endMoment] 同 value
defaultOptIndex 默认选择的快捷时间范围 number 如果有该选项，那么基于该选项来设置默认设置的时间范围
showTime 选择时间范围时是否具体到秒 boolean true
onChange 选择范围改变后的回调 ([startMoment, endMoment]) => void

除此之外，其余属性会传递给 Fusion 的 DatePicker.RangePicker 组件。

DEMO 列表

Simple Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import QuickTimeRange from '@aligov/components-quick-time-range';
import moment from 'moment';

const defaultRange1 = [moment('2019-08-01'), moment()];

class App extends Component {
  state = {
    range: []
  };

  onRangeChange = val => {
    console.log('demo change', val.map(i => i ? i.format() : 'N/A'));
    this.setState({
      range: val
    });
  };

  render() {
    const { range } = this.state;
    return (
      <div>
        <h3>简单使用</h3>
        <QuickTimeRange />

        <h3>到秒</h3>
        <QuickTimeRange showTime={true} />
        
        <h3>受控</h3>
        <QuickTimeRange value={range} onChange={this.onRangeChange} />

        <h3>设置默认值</h3>
        <QuickTimeRange showTime={true} defaultValue={defaultRange1} />

        <h3>默认选择快速范围</h3>
        <QuickTimeRange defaultOptIndex={2} onChange={console.log.bind(console)} />

        <h3>过滤选项 + 隐藏时间选择器</h3>
        <QuickTimeRange includeOpts={['-24h', '-2d', '-6d']} defaultOptIndex={0} showDatePicker={false} onChange={console.log.bind(console)} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);