DatePicker 日期选择框

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

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

API

日期选择框

DatePicker.MonthPicker

DatePicker.RangePicker

DatePicker.YearPicker

代码示例

基本用法

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

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
ReactDOM.render(
  <div>
    <h3>日期选择</h3>
    <DatePicker onChange={(val, str) => console.log(val, str)} />
    <h3>月份选择</h3>
    <MonthPicker onChange={(val, str) => console.log(val, str)} />
    <h3>年份选择</h3>
    <YearPicker onChange={(val, str) => console.log(val, str)} />
    <h3>区间选择</h3>
    <RangePicker
      onChange={(val, str) => console.log(val, str)}
      onStartChange={(val, str) => console.log(val, str)}
    />
  </div>,
  mountNode
);

自定义日期范围选择

例如，示例中的日期选择可以自由的更改开始或结束日期，而不必每次选择时重置日期。如果默认的 RangePicker 在交互上无法满足您的使用需求，您还可以基于 DatePicker 封装实现类似的功能。

查看源码在线预览

import { DatePicker } from "@icedesign/base";
class CustomRangePicker extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      startValue: null,
      endValue: null,
      endOpen: false
    };
  }
  disabledStartDate(startValue) {
    const { endValue } = this.state;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }
  disabledEndDate(endValue) {
    const { startValue } = this.state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  }
  onChange(field, value) {
    this.setState({
      [field]: value
    });
  }
  onStartChange(value) {
    this.onChange("startValue", value);
  }
  onEndChange(value) {
    this.onChange("endValue", value);
  }
  handleStartOpenChange(open) {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }
  handleEndOpenChange(open) {
    this.setState({ endOpen: open });
  }
  render() {
    const { startValue, endValue, endOpen } = this.state;
    return (
      <div>
        <DatePicker
          disabledDate={this.disabledStartDate.bind(this)}
          showTime
          value={startValue}
          placeholder="Start"
          onChange={this.onStartChange.bind(this)}
          onOpenChange={this.handleStartOpenChange.bind(this)}
        />
        &nbsp;
        <DatePicker
          disabledDate={this.disabledEndDate.bind(this)}
          showTime
          value={endValue}
          placeholder="End"
          onChange={this.onEndChange.bind(this)}
          open={endOpen}
          onOpenChange={this.handleEndOpenChange.bind(this)}
        />
      </div>
    );
  }
}
ReactDOM.render(
  <div>
    <CustomRangePicker />
  </div>,
  mountNode
);

提供默认值

为选择器设置默认值。

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
ReactDOM.render(
  <div>
    <h3>日期选择</h3>
    <DatePicker defaultValue={"2017年02月14日"} formater={["YYYY年MM月DD日"]} />
    <h3>月份选择</h3>
    <MonthPicker defaultValue={"2017-02"} />
    <h3>年份选择</h3>
    <YearPicker defaultValue={"2017"} />
    <h3>区间选择</h3>
    <RangePicker defaultValue={["2017-02-14", "2017-03-24"]} />
  </div>,
  mountNode
);

禁用日期、月份、年份

设置 disabledYear 方法，来确定不可选年份。设置 disabledMonth 方法，来确定不可选月份。设置 disabledDate 方法，来确定不可选日期。

查看源码在线预览

import { moment, DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
// 2018不可选
const disabledYear = function(calendarDate) {
  return calendarDate.year === 2018;
};
// 五月份不可选
const disabledMonth = function(calendarDate) {
  return calendarDate.month === 4;
};
// 选择今天以后的时间
const disabledDate = function(calendarDate) {
  const { year, month, date } = calendarDate;
  const theDate = moment(`${year}-${month + 1}-${date}`, "YYYY-M-D");
  return theDate < new Date().getTime();
};
// 选择本周
const disabledRange = function(calendarDate) {
  let ret = false;
  const now = moment();
  const nowWeek = now.isoWeekday();
  const { year, month, date } = calendarDate;
  const theDate = moment(`${year}-${month + 1}-${date}`, "YYYY-M-D");
  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>
    <h3>日期选择</h3>
    <DatePicker disabledDate={disabledDate} />
    <h3>月份选择</h3>
    <MonthPicker disabledMonth={disabledMonth} />
    <h3>年份选择</h3>
    <YearPicker disabledYear={disabledYear} />
    <h3>区间选择</h3>
    <RangePicker disabledDate={disabledRange} />
  </div>,
  mountNode
);

禁用选择框

选择框的不可用状态。

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
ReactDOM.render(
  <div>
    <h3>日期选择</h3>
    <DatePicker defaultValue={"2017-02-14"} disabled />
    <h3>月份选择</h3>
    <MonthPicker defaultValue={"2017-02"} disabled />
    <h3>年份选择</h3>
    <YearPicker defaultValue={"2017"} disabled />
    <h3>区间选择</h3>
    <RangePicker defaultValue={["2017-02-14", "2017-03-24"]} disabled />
  </div>,
  mountNode
);

与 field 结合

与field结合使用，简单示范自定义返回值

查看源码在线预览

import { DatePicker, Field, Button } from "@icedesign/base";
const { RangePicker } = DatePicker;
class App extends React.Component {
  field = new Field(this);
  normDate(date, dateStr) {
    console.log("normDate:", date, dateStr);
    return date.getTime();
  }
  normRange(date, dateStr) {
    console.log(date, dateStr);
    return date;
  }
  render() {
    const init = this.field.init;
    return (
      <div>
        <DatePicker
          format="YYYY年MM月DD日 "
          {...init("datepicker", {
            getValueFromEvent: this.normDate
          })}
        />
        <br />
        <br />
        <RangePicker
          {...init("rangepicker", {
            getValueFromEvent: this.normRange,
            initValue: ["2017-05-01", "2017-05-10"]
          })}
        />
        <br />
        <br />
        <Button
          onClick={() => {
            return console.log(this.field.getValues());
          }}
        >
          Console中展示数据
        </Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

日期格式化

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

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
ReactDOM.render(
  <div>
    <h3>日期选择</h3>
    <DatePicker format={"YYYY/MM/DD"} />
    <br />
    <br />
    <DatePicker format={"YYYY年MM月DD日"} />
    <h3>月份选择</h3>
    <MonthPicker format={"YYYY/MM"} />
    <h3>年份选择</h3>
    <YearPicker format={"YYYY"} />
    <h3>区间选择</h3>
    <RangePicker format={"YYYY/MM/DD"} />
  </div>,
  mountNode
);

多语言

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

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
const locale = {
  datePlaceholder: "请选择日期-测试",
  monthPlaceholder: "请选择月份-测试",
  yearPlaceholder: "请选择年份-测试",
  rangeStartPlaceholder: "起始时间-测试",
  rangeEndPlaceholder: "结束时间-测试",
  now: "此刻-测试",
  selectTime: "选择时间-测试",
  selectDate: "选择日期-测试",
  ok: "确定-测试",
  clear: "清除-测试"
};
ReactDOM.render(
  <div>
    <h3>日期选择</h3>
    <DatePicker locale={locale} />
    <h3>月份选择</h3>
    <MonthPicker locale={locale} />
    <h3>年份选择</h3>
    <YearPicker locale={locale} />
    <h3>区间选择</h3>
    <RangePicker locale={locale} />
  </div>,
  mountNode
);

关于弹出层的自定义配置

关于弹出层的自定义配置

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
ReactDOM.render(
  <div>
    <h3>日期选择</h3>
    <DatePicker popupAlign={"bl tl"} />
    <h3>月份选择</h3>
    <MonthPicker popupAlign={"bl tl"} />
    <h3>年份选择</h3>
    <YearPicker popupAlign={"bl tl"} />
    <h3>区间选择</h3>
    <RangePicker popupAlign={"bl tl"} />
  </div>,
  mountNode
);

用户预设日期范围

可以通过 ranges 属性自定义快捷日期选择。

查看源码在线预览

import { DatePicker } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
const now = new Date();
const start = new Date().setDate(1);
const end = new Date().setDate(7);
const quickRanges = {
  Today: [now, now],
  "First Week": [start, end]
};
ReactDOM.render(
  <div>
    <RangePicker
      ranges={quickRanges}
      onChange={(val, str) => console.log(val, str)}
      onStartChange={(val, str) => console.log(val, str)}
    />
    <br />
    <br />
    <RangePicker
      ranges={quickRanges}
      onChange={(val, str) => console.log(val, str)}
      onStartChange={(val, str) => console.log(val, str)}
      showTime
    />
  </div>,
  mountNode
);

与时间选择联动

通过设置 showTime 属性，可以设置包含时间选择控件的日期组件。showTime 属性支持两种设置方式，通常可以传入 bool 值表示是否启动时间选择控件。如果用户有预设时间初值的需求，showTime 属性支持传入对象的方式设置时间初值，设置方式为设置 showTime.defaultValue ，推荐使用 moment 对时间值进行格式化。

查看源码在线预览

import { DatePicker, moment } from "@icedesign/base";
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
ReactDOM.render(
  <div>
    <h3>普通的日期时间选择</h3>
    <DatePicker showTime onChange={(a, b) => console.log(a, b)} />
    <h3>设置时间初值的日期时间选择</h3>
    <DatePicker
      showTime={{ defaultValue: moment("12:12:12", "HH:mm:ss") }}
      onChange={(a, b) => console.log(a, b)}
    />
    <h3>普通的区间选择（每次选择会重置时间为 00:00:00 ）</h3>
    <RangePicker showTime onChange={(a, b) => console.log(a, b)} />
    <h3>设置时间初值的区间选择（每次选择重置时间为用户预设的日期初值 ）</h3>
    <RangePicker
      showTime={{
        defaultValue: [
          moment("00:00:00", "HH:mm:ss"),
          moment("23:59:59", "HH:mm:ss")
        ]
      }}
      onChange={(a, b) => console.log(a, b)}
    />
    <h3>每次记住上次选择时间的区间选择（每次选择不重置时间）</h3>
    <RangePicker
      showTime
      onChange={(a, b) => console.log(a, b)}
      resetTime={false}
    />
    <h3>设置时间初值的区间选择（每次选择会记住上次选择的时间 ）</h3>
    <RangePicker
      showTime={{
        defaultValue: [
          moment("00:00:00", "HH:mm:ss"),
          moment("23:59:59", "HH:mm:ss")
        ]
      }}
      onChange={(a, b) => console.log(a, b)}
      resetTime={false}
    />
  </div>,
  mountNode
);

不同尺寸

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

查看源码在线预览

import { DatePicker } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>大号</h3>
    <DatePicker size="large" />
    <h3>中号</h3>
    <DatePicker />
    <h3>小号</h3>
    <DatePicker size="small" />
  </div>,
  mountNode
);

相关区块

暂无相关区块