组件规范 前端代码

DatePicker 日期选择框

输入或选择日期的控件。

何时使用#

当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

API#

DatePicker#

参数说明类型默认值
prefix组件的品牌前缀Stringnext-
defaultOpen默认展开Booleanfalse
defaultValue默认日期String or Date无
value日期String or Date无
size输入框大小，large medium smallStringmedium
locale国际化配置Object无
format展示的日期格式，配置参考momentString or Function(timestamp)YYYY-MM-DD
disabled禁用Booleanfalse
disabledDate不可选择的日期Function无
onChange时间发生变化的回调，发生在用户选择时间时Function(Date, Date string)无
className格外的弹出日历样式String无

DatePicker.RangePicker#

参数说明类型默认值
prefix组件的品牌前缀Stringnext-
defaultOpen默认展开Booleanfalse
defaultValue默认日期[String/Date, String/Date]无
value日期[String/Date, String/Date]无
size输入框大小，large medium smallStringmedium
locale国际化配置Object无
format展示的日期格式，配置参考momentString or Function(timestamp)YYYY-MM-DD
disabledDate不可选择的日期Function无
disabled禁用Booleanfalse
onChange时间发生变化的回调，发生在用户选择时间时Function([Date, Date], [Date string, Date string])无
onStartChange发生在用户选择起始时间时Function(Date, Date string)无
onEndChange发生在用户选择结束时间时Function(Date, Date string)无
className格外的弹出日历样式String无

DatePicker.MonthPicker#

参数说明类型默认值
prefix组件的品牌前缀Stringnext-
defaultOpen默认展开Booleanfalse
defaultValue默认日期String or Date无
value日期String or Date无
size输入框大小，large medium smallStringmedium
locale国际化配置Object无
format展示的日期格式，配置参考momentString or Function(timestamp)YYYY-MM
disabled禁用Booleanfalse
onChange时间发生变化的回调，发生在用户选择时间时Function(Date, Date string)无
className格外的弹出日历样式String无

代码演示 

import 'blue/lib/date-picker/index.scss';
import DatePicker from 'blue/lib/date-picker';

ReactDOM.render(<DatePicker onChange={(a, b) => console.log(a, b)} />, mountNode);
基本

最简单的用法。监听了 change 事件, 输入框值改变时控制台有日志显示。

import 'blue/lib/date-picker/index.scss';
import DatePicker, { RangePicker } from 'blue/lib/date-picker';

ReactDOM.render(<div>
    <DatePicker defaultValue={new Date()} />
    <br/>
    <br/>
    <RangePicker defaultValue={['2015-06-02', '2015-06-11']} />
</div>, mountNode);
默认值

最简单的用法。监听了 change 事件, 输入框值改变时控制台有日志显示。

import 'blue/lib/date-picker/index.scss';
import moment from 'blue/lib/moment';
import DatePicker, { RangePicker } from 'blue/lib/date-picker';

const disabledDate = function (theDate) {
    return theDate && theDate > new Date().getTime();
};

// 选择本周
const disabledRange = function (theDate) {
    let ret = false,
        now = moment(),
        nowWeek = now.isoWeekday();

    if (!theDate) {
        return ret;
    }

    if (theDate > ((7 - nowWeek) * 24 * 60 * 60 * 1000 + now.valueOf())) {
        ret = true;
    }

    if (theDate < (now.valueOf() - nowWeek * 24 * 60 * 60 * 1000)) {
        ret = true;
    }

    return ret;
};

ReactDOM.render(<div>
    <DatePicker disabledDate={disabledDate} />
    <br />
    <br />
    <RangePicker disabledDate={disabledRange} />
</div>, mountNode);
指定不可选择日期

设置 disabledDate 方法，来确定不可选时段。

如上例：不可选择今天之后的日期。

import 'blue/lib/date-picker/index.scss';
import DatePicker, { MonthPicker, RangePicker } from 'blue/lib/date-picker';

ReactDOM.render(<div>
    <DatePicker defaultValue="2015-06-06" disabled />
    <br />
    <br />
    <MonthPicker defaultValue="2015-06" disabled />
    <br />
    <br />
    <RangePicker defaultValue={['2015-06-06', '2015-06-30']} disabled />
</div>, mountNode);
禁用选择框

选择框的不可用状态。

import 'blue/lib/date-picker/index.scss';
import DatePicker, { RangePicker } from 'blue/lib/date-picker';

const formatFunc = (val) => {
    return val;
};

ReactDOM.render(<div>
    <DatePicker defaultValue="2015/01/01" format="YYYY/MM/DD" />
    <br/>
    <br/>
    <DatePicker format="YYYY-MM-DD HH:mm" />
    <br/>
    <br/>
    <DatePicker format={formatFunc} onChange={(val, str) => console.log(val, str)}/>
    <br/>
    <br/>
    <RangePicker format="YYYY/MM/DD" onChange={(val, str) => console.log(val, str)}/>
    <br/>
    <br/>
    <RangePicker format={formatFunc} onChange={(val, str) => console.log(val, str)}/>
</div>, mountNode);
日期格式化

使用 format 属性，可以自定义你需要的日期显示格式，如 YYYY/MM/DD。

import 'blue/lib/date-picker/index.scss';
import { RangePicker } from 'blue/lib/date-picker';

ReactDOM.render(<RangePicker 
                    onStartChange={(val, str) => console.log(val, str)}
                    onEndChange={(val, str) => console.log(val, str)}
                    onChange={(val, str) => console.log(val, str)} />, mountNode);
日期范围选择组件

用于选择日期范围。

import 'blue/lib/date-picker/index.scss';
import DatePicker from 'blue/lib/date-picker';

ReactDOM.render(<DatePicker showTime onChange={(val, str) => console.log(val, str)}/>, mountNode);
与时间选择联动

最简单的用法。监听了 change 事件, 输入框值改变时控制台有日志显示。

import 'blue/lib/date-picker/index.scss';
import DatePicker from 'blue/lib/date-picker';

ReactDOM.render(<div>
    <DatePicker size="large" />
    <br/>
    <br/>
    <DatePicker />
    <br/>
    <br/>
    <DatePicker size="small" />
</div>, mountNode);
不同尺寸

三种大小的输入框，大的用在表单中，中的为默认。

import 'blue/lib/date-picker/index.scss';
import DatePicker from 'blue/lib/date-picker';

class Demo extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            lang: 'zh-cn'
        };
    }
    onChange (e) {
        this.setState({
            lang: e.target.value
        });
    }
    render () {
        let { lang } = {...this.state};

        return (
            <div>
                <select value={lang} onChange={this.onChange.bind(this)}>
                    <option value="zh-cn">zh-cn</option>
                    <option value="en-us">en-us</option>
                </select>
                <br/>
                <br/>
                <h3>修改语言</h3>
                <DatePicker language={lang}
                            onChange={(a, b) => console.log(a, b)} />
                <br/>
                <br/>
                <h3>自定义locale</h3>
                <DatePicker language={lang}
                            locale={{placeholder: 'ceshi'}}
                            onChange={(a, b) => console.log(a, b)}/>
            </div>
        );
    }
}

ReactDOM.render(<Demo />, mountNode);
多语言

自定义传入多语言文案，可用于组件中所有文案的自定义。

import 'blue/lib/date-picker/index.scss';
import { MonthPicker } from 'blue/lib/date-picker';

ReactDOM.render(<MonthPicker onChange={(val, str) => console.log(val, str)} />, mountNode);
年月选择组件

仅选择年份和月份。